Box-shadow in CSS

We welcome you to our blog. And we will tell you what is the box-shadow in today's article, how this feature is useful and how it can be used.

Design of your Web project must contain certain blocks on the page. It can be block of menu or block of groups, any of which sometimes need a good look, but we do not always have the skills in design or software usage. So, you can easily add the usual shadow for your unit with just a few lines. This feature is provided with help of box-shadow in CSS.

Consequently, box-shadow is a property that can create different shadows for the block on any web page of your project. You can specify several types of block shadows separated with comma. The first shadow will be located above and the rest below. It is possible to round shadow and it can be done with help of border-radius property. Let's look at the syntax of box-shadow property usage. box-shadow: ;

Now we will review all of the parameters.

- shadow shift by the X axis (horizontal). if the value is positive then shadow is placed at the right of item, if the value of this parameter is negative, then the shadow will be located to the left of the block.

- the shift by the Y axis(vertically). if value is positive - the shadow is placed at the bottom of the element, if negative - at the top.

- if the value is 0 or not present, then the shadow will be strict and not smooth. The specified value sets the blur, the greater the value of this parameter, the more blurred and wider the shadow will be.

- value is 0 or not present, then the shadow will be the same size as the element. If the value is set, then the positive will stretch the shadow, negative reduces the shadow of your unit.

- black color is used by default for the shadow. The parameter can be specified manually by using standard CSS color format.

Also, other parameters can be used. First one is inset, which makes it possible to display a shadow inside of the element, and the second one is none - prevents shadows from appearing on the page. The syntax of these parameters would look as follows. box-shadow: none; and box-shadow: inset ;

Next is a simple example of shadows usage, where we will set shift values. Horizontal and vertical shadows are shifted by 0px, Blur radius is set to 20px and the color is blue. As a shadow may appear in different browsers, we will write code for each of them. Specifically, for Mozilla you can use the -moz-box-shadow and for Safari and Chrome you should use -webkit-box-shadow option. Then, let's set block color to blue, text to 100px size and red with a central location to establish a clear and nice look.

style = "-webkit-box-shadow: 0 0 20px #A0A0A0; -Moz-box-shadow: 0 0 20px #A0A0A0; box-shadow: 0 0 20px #A0A0A0; background: blue; padding: 10px; font-size: 100px; text-align: center; color: red; "> Best regards!

As a result, we will get red text placed in a blue block with a shadow of gray color.

Best regards!

In the next our example we will try to use few shadows at one time. As result, to show the shadow inside of the element, we should use the option inset with the following values: offset vertically and horizontally set to 0, the blur radius set to 20px, spread to 10px and forest-green color(#228B22). Standard shadow was made with Blur radius of 24px and spread set to 32px, aquamarine color(#66CDAA). The values for these and other colors you can find online. Next, we will analyze what the other properties that we have used in our example:

- height, margin and width - specifies the size of our block;

- background - background color of the main unit, in our case, we chose a lime green color (#32CD32);

- border-radius - parameter that specifies the rounded corners of the block. The higher the value the smoother will be block;

- color- color of the text, we chose yellow. As you can see the color can be specified in plain text;

- font-size - accordingly, font size;

- text-align - the horizontally alignment of text can be set in the middle of the block with the help of this parameter;

- line-height - can be used to align text vertically. Some predefined value should be set.

This is our source code.

inset 0 0 20px 10px #228B22, 0 0 24px 32px #66CDAA; height: 175px; margin: 80px; width: 175px; background: #32CD32; border-radius: 15px; color: yellow; font-size: 40px; text-align: center; line-height: 1.5em; "> Best regards!

Best regards!

Similarly, if you need to make text looking surrounded, you may want to use two values of the inset shadow parameter. Here we use the same unit, but with changed color and shadow.

inset 5px 5px 15px 5px #8B008B, inset -5px-5px 15px 5px #FF00FF; height: 175px; margin: 80px; width: 175px; background: #EE82EE; border-radius: 15px; color: yellow; font-size: 40px; text-align: center; line-height: 1.5em; "> Best regards!

Best regards!

And our last example will be very interesting. Let's try to make some element with the color of spectrum range. We will use the following code.

inset #4B0082-200px 0 100px-100px, inset #0000FF-300px 0 100px-100px, inset #87CEFA-400px 0 100px-100px, inset #E0FFFF-500px 0 100px-100px, inset #FFFFFF-600px 0 100px-100px; background: #FFFFFF; border: 1px solid #000000; height: 100px; margin: 20px; width: 500px; ">

In this article, we introduced you to the box-shadow property that can be used to create shadows for blocks on your webpage. It was reviewed with it's basic parameters and methods of their usage. Also, we learned how to create the element with gradient colors. You can use these features when you need to format quickly and easily the look of your Internet project.

Best regards, DYAMAR Engineering.

Language: 
Category: 

All rights reserved. You may not copy or distribute, electronically or otherwise, any part of this article for any purpose without prior written permission from the DYAMAR Engineering.