Create Menu using CSS border, shadow. JavaScript/CSS Game: #2.10 the hidden Gems

Everything that can be implemented using CSS,
finally must be done with CSS. I’ll show you how to create something awesome
using CSS only. [Music playing] Hi! Let’s talk today about CSS3 features, such
as text-shadow, box-shadow and border-radius. We’ll use them in order to create a simple
menu. I’m Anatol and you are watching the Good Parts
of the FrontEnd development. [Music playing] We’re starting with DevDocs. This is a comprehensive manual that combines
multiple API documentations in a fast, organized, and searchable interface. The second useful resource, I recommend you,
is CanIUse dot com. Here you can check the browser’ support for
every single feature that you’re planning to use in your application. The border-radius CSS property allows to define
how rounded border corners are. The curve of each corner is defined by circle
or ellipse. The radius applies to the whole background,
even if the element has no border; the exact position of the clipping is defined by the
background-clip property. Initial value for the border-radius is 0. The value can be set as a length, percentage
or calc(); This property can be animated. The text-shadow property adds shadows to text. It accepts a comma-separated list of shadows
to be applied to the text and text-decorations of the element. Each shadow is specified as an offset from
the text, along with optional color and blur radius values. Multiple shadows are applied front-to-back,
with the first-specified shadow on top. Lists text-shadow as animatable. The box-shadow property describes one or more
shadow effects as a comma-separated list. It enables you to cast a drop shadow from
the frame of almost any element. If a border-radius is specified on the element
with a box shadow, the box shadow takes on the same rounded corners. Syntax is the same as for text-shadow property. Using nothing more than these three features
we can create really fancy buttons. Let’s dive in the code. A markup. A title and buttons. Now styles. I use predefined colors. Set a background and text color. Styles for the title For the rectangle button, let’s set its
size and absolute position. Also define the border and background color. Now text styles. Set styles for hovered element So, with a combination of different CSS properties
you can implement a plenty of effects. Everything can be done automagicaly! Easy, isn’t’ it? [Music playing] My code is available on GitHub
Documentation is available in the Internet Follow the links if you’re eager to get
more. [Music playing] If you like this video give it “thumbs up”,
share it with your friends, subscribe to the channel and watch other episodes. [Music playing] This is all for this week. Thanks for watching and dive deeper.

Add a Comment

Your email address will not be published. Required fields are marked *