Shadows in CSS 3 with box-shadow – Wingdings Translator Online

Create CSS3 shadows with the box-shadow attribute. Finally we will be able to apply shadows to the elements of the page, without using images, Javascript or anything extra, simply with a CSS 3 attribute.

CSS 3 represents a new revolution in web design, providing solutions to many of the practices that designers use to decorate web pages. This means that many of the things that we used to do with design techniques that required the use of images, such as shadows or rounded corners, will now be able to be specified simply from CSS.

As we saw in the article, there is no doubt that it will mean a great advance for people who are dedicated to developing websites, which will allow us to save time and, above all, save source code, which will make the pages lighter and separate the content even more. from the way.

Throughout it we have already seen several new attributes of considerable importance and variety and now it is the turn of box-shadow, the CSS3 attribute that will allow us to define shadows for the elements of the page.

box-shadow attribute

The box-shadow attribute requires several values to specify the characteristics of the shadow, such as feathering, shadow spacing, and the box or color itself. The syntax is like this:

box-shadow: 5px -9px 3px #000;

In order of appearance, the values indicated in box-shadow are:

Horizontal displacement of the shadow: The shadow of an element is usually slightly displaced with respect to the element that produces it and its position will depend on the angle at which the light arrives. In the case of this example, the first of the values, 5px, means that the shadow will appear 5 pixels to the right. If we wanted the shadow to appear a little to the left of the original element that produces it, we would put a negative value to this attribute. The more offset a shadow has, the more the element that casts it will appear to be further removed from the page canvas.

Shadow vertical offset: The second value we put in the box-shadow attribute is the vertical offset of the shadow with respect to the position of the element that casts it. This value is similar to the horizontal offset. Positive values indicate that the shadow will appear towards the bottom of the element, and negative values will cause the shadow to appear slightly upwards. In the case of the previous example, with -9px we are indicating that the shadow will appear displaced 9 pixels above the element.

Feather: The third value indicates how much we want the edge of the shadow to be feathered. If the feathering were zero, it would mean that the shadow has no feathering and appears fully defined. If the value is greater than zero, as in our example 3px, it means that the shadow will have a feather of that width, 3 pixels in the example.

Shadow Color: The last attribute indicated in the box-shadow attribute is the color of the shadow. Generally, shadows in the real world have a black or greyish color, but with CSS3 we can indicate any range of colors to make the shadow, which will give us much more versatility to the designs thanks to the possible use of shadows in different colors, which can combine better with our palette. In the previous example we had indicated a shadow with black color.

Browser Compatibility of CSS Shadows

The truth is that CSS 3 is still in the specification phase, although it is already very advanced and the most modern browsers have already begun to implement it. However, the W3C has not yet released the specifications for this version of Cascading Style Sheets and until it starts recommending its implementation web clients do not have to understand them.

CSS3 Shadow Examples

Now let’s look at several examples of shadows created directly with CSS 3 and the box-shadow attribute, with their variants for temporary compatibility in Mozilla or WebKit browsers.

#shadowbox{
background-color: #ddd;
width: 300px;
padding: 10px;

box-shadow: 5px 5px 0 #333;
-webkit-box-shadow: 5px 5px 0 #333;
-moz-box-shadow: 5px 5px 0 #333;
}

This would create a layer with a light gray background color and a shadow shifted to the bottom right by 5 pixels and no feathering. Additionally, we have defined a dark gray shadow color for the element.

#lightshadow{
width: 200px;
padding: 10px;
background-color: #999;
color: #fff;

box-shadow: 2px 2px 2px #ffc;
-webkit-box-shadow: 2px 2px 2px #ffc;
-moz-box-shadow: 2px 2px 2px #ffc;
}

box-shadow attribute

Browser Compatibility of CSS Shadows

CSS3 Shadow Examples

Related posts:

Related Posts