Explanations:
, - properties of the CSS language, used to create shadows. , , — shadow properties parameters. , , , - CSS properties, responsible for changing the size and location of elements. - The tag is responsible for creating links.
- Selectors are a kind of links with which CSS determines which elements to apply certain styles to.
- Hover is a state selector.
— property of animated object change.
Shadows are often used to obtain the effect of three-dimensionality. They allow you to give texts and blocks a unique style, and in combination with special fonts, you can get a great effect.
CSS offers us so much room for imagination and experimentation that it would take you years to try them all.
In this article, we will describe in detail the creation of shadows in CSS. In addition to the usual outer shadows, we'll show you how to create inner shadows and state shadows.
CSS - box shadow. box-shadow property
html( background: #fff; ) body( width: 80%; margin: 0 auto; background-color: rgba(150,60,60,0.54) box-shadow: -1px 5px 5px 5px rgba(77,63,63 ,0.88) ) The tool allows us to create one or more shadows around the block, with any color.
Basically, what is a shadow? This is an exact copy of the area of the element, which has a certain color and position. These options can be set using the box-shadow property.
Shadow properties are used in this order:
- Move horizontally.
- Move vertically.
- Blur level.
- Stretching.
- Shadow color.
It is in this order that you need to specify the parameters of the shadow. The main thing is not to confuse the value, since the first 4 are set in the same way, using numerical values -
The first parameter, which is called
Negative values move the shadow to the left, while positive values move it to the right. The value of the parameter can be equal to 0 when the shadows are blurred along the vertical axis.
Next in order is the property
The parameter can be set to 0. Usually used for horizontal blurring of shadows.
Attention! We advise you to specify the value in pixels. You can use other values - ,
3 value -
The given value determines the radius along which the shadow will be blurred. Negative values are not specified.
Larger values can also be used here. A strong blur will help create a colorful effect, but only in some situations.
The penultimate value, which is responsible for stretching the shadow. It is also optional, but can add color to your shadow.
The expansion occurs due to the stretching of the central solid part of the shadow, which is located between the blurry edges.
This parameter accepts any value, both positive and negative. Positive values stretch the shadow, while negative values shrink it.
And the last parameter is
To change the color, any color system is suitable - as well as standard colors.
Attention! If you want the property to work in Safari, then this setting must be specified, even if you are using the default black color.
Inner Shadow - CSS
html( background: #fff; ) body( width: 80%; margin: 0 auto; background-color: rgba(150,60,60,0.54) box-shadow: -1px 5px 5px 5px rgba(77,63,63 ,0.88) inset; ) So, let's look at the first example of applying shadows. Here we will look at creating an inner shadow for the body block.
To get started, open our HTML document and fill it out. You can not specify any tags, do not fill in the content, the main thing is to create a tag
.Open our CSS document, write the tag
, it will be our main selector.Next, open the curly braces and write the property
Now the most important thing. In order to create an inner box shadow in CSS, you need to set the inset value. You can specify it immediately after defining the color.
As a result, we got the following block:
HTML/CSS - Text Shadow
html( background: #fff; ) body( width: 80%; margin: 0 auto; background-color: rgba(150,60,60,0.54) box-shadow: -1px 5px 5px 5px rgba(77,63,63 ,0.88) inset; ) div( margin: 150px; box-shadow: -1px 5px 5px 5px rgba(77,63,63,0.88); font-size: 25px; ) 
It is created in a similar way, but instead of box-shadow the property is used
- Horizontal shift.
- Vertical shift.
- Blur radius. Not necessary.
- Color.
As you can see, there is no stretch parameter in this property. The size of the shadow will always be identical to the size of the text, there is no way to fix this.
It is very convenient to impose shadows on each other. To do this, you need to list several groups of parameters.
The first shadow will be placed closer to the text, and the second above it. Similar to working with the outline and border properties, but here you can create 2, 3 or more shadows.
Hover Shadows - CSS
Now let's look at creating shadows for a specific state. In our example, a button will be used.
In order to create a shadow for a button, you first need to place it. We open the a tag, write the button class for it and any text value for better display.
First, let's set the placement using the margin property and increase the button to a certain size. To increase it, you can use the width and height properties, or you can use the padding property.
Now we set the background color, text and frame. Our button is ready, let's start creating the shadow.
First, let's create a regular shadow, small in size, using box-shadow. It will be visible by default, without hovering over the button.
Let's make the simplest effect - increase the shadow. You can make it blurry or change the stretch to your liking.
For the best effect, set the transition property for a normal link, set the time to 0.5s.
Now we have a nice button with a nice shadow that will expand smoothly on hover.
Conclusion
In this article, we got acquainted with all the basic ways to create shadows. We have analyzed all the properties and parameters of the shadows.
You can find all the elements that were presented in the screenshots in the source folder. If you want, you can study them yourself and experiment with the values. Maybe you will do much better than we did.
A shadow under a block-level element on a page is usually used to create a three-dimensional effect, draw attention to an element, or as part of a design. A small shadow under the elements also gives the page volume and depth.
To add a shadow, the box-shadow property is used, which has six values, of which only two are required. On fig. Figure 1 shows the box-shadow property with all possible values, numbered to identify them.
Rice. 1. Values of the box-shadow property
- the inset keyword sets the shadow inside the element;
- shadow shift horizontally (5px - to the right, -5px - to the left);
- vertical shift (5px - down, -5px - up);
- shadow blur radius (0 - sharp shadow);
- shadow stretch (5px - stretch, -5px - shrink);
- shadow color.
Be sure to specify only the horizontal and vertical shift, all other parameters will be taken by default. In this case, the shadow will be sharp without blur and black.
Due to the combinations of different parameters and their values, a wide variety of shadow types can be obtained. In table. 1 shows the code and the result it leads to.
| The code | Result | Description |
|---|---|---|
| box-shadow: 5px 5px; | Sharp shadow on the right and bottom. | |
| box-shadow: -5px -5px; | Sharp shadow on the left and top. | |
| box-shadow: 0 0 5px | Blurred shadow around the element. | |
| box-shadow: 0 0 5px 2px; | Expanding the shadow by 2 pixels. | |
| box-shadow: 0 0 5px 2px red; | Red glow around the element. | |
| box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.5); | Translucent shadow. | |
| box-shadow: inset 0 0 6px; | Shadow inside. |
As you can see from the table, the shadow shift does not have to be specified in pixels, although this is convenient. The color of the shadow can be specified in any available format, for example, to get a translucent shadow, the RGBA format is suitable, such a shadow will look good on any background. Example 1 shows how to do this.
Example 1: Shadow on background image
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Do not go against the banners of the enemy when they are in perfect order; not to attack the camp of the enemy when he is impregnable; this is change management.
Sun Tzu, trans. Nicholas Konrad
The result of this example is shown in Fig. 2. The shadow repeats the rounding of the corners of the block.
Rice. 2. View of the shadow on the background image
When adding a "wide" shadow, be aware that it may extend beyond the visible browser window and thus result in a horizontal scroll bar.
Shadow can also be added to pseudo-elements, this is sometimes required for complex layout. On fig. 3 shows a block with a title to which a shadow has been added. So that there are no lines at the junction, you have to use the ::after pseudo-element and add a shadow to it.
Rice. 3. Block with shadow
Example 2 shows the creation of such a block.
Example 2. Box with shadow
HTML5 CSS3 IE 9+ Cr Op Sa Fx
header
An element can have not one shadow, but several at once, their parameters are listed separated by commas in the value of the box-shadow property. Example 3 shows how to add a double shadow to all images.
Example 2. Box with shadow
HTML5 CSS3 IE 9+ Cr Op Sa Fx
The result of this example is shown in Fig. four.
Rice. 4. Image with double shadow
The first shadow is rendered to the left of the image with a blur radius of 20px, reduced in size by the fourth parameter (-20px). The parameters of the second shadow are indicated after the comma, the shadow is displayed to the right of the picture and is also reduced for symmetry.
With the advent of the standard CSS 3 the box-shadow property has been introduced, which is widely used among web developers as it makes it easy to add one or more shadows to an element's box to give the desired visual effect.
In the previous article, we looked at the border-radius property, using it, you can get a shadow with rounded corners. By analogy with text-shadow (text-shadow), you can create multiple shadows, they are applied on z-axis front to back (with the first shadow given on top).
Let's take a closer look at the syntax of this modern property:
Consider in order possible values this property:
| Meaning | Description |
|---|---|
| none | The shadow is not displayed. This is the default value. |
| inset | Optional value. If this value is not specified (default), then the shadow will be on the outside of the element and will create the effect of the element's bulge. With the keyword (value) inset , the shadow will fall inside the element and create an indented effect. In other words, it is a change from an outer shadow to an inner one. |
| h-shadow | Required value. Specifies the location of the horizontal shadow. Negative values are allowed. |
| v-shadow | Required value. Specifies the location of the vertical shadow. Negative values are allowed. |
| blur-radius | Optional value. Sets the blur radius. The larger this value, the greater the blur, while the shadow becomes larger and lighter. If the value is not set, then the value will be 0 (sharp - distinct shadows). Negative values are not allowed. |
| spread radius | Optional value. The size of the shadow (the radius to stretch the shadow). Positive values will expand the shadow, while negative values will shrink it. If the value is not set, then the value will be 0 (the shadow corresponds to the size of the element). |
| color | Optional value. Specifies the shadow color (HEX, RGB, RGBA, HSL, HSLA, "Predefined Colors"). The default value is black. |
The main points you need to understand in order to create element shadows are:
I want to draw your attention to the fact that the box-shadow property is currently supported by all modern browsers:
| Property | Opera | IExplorer | edge |
|||
|---|---|---|---|---|---|---|
| box shadow | 10.0 4.0 -webkit- | 4.0 3.5 -moz- | 10.5 | 5.1 3.1 -webkit- | 9.0 | 12.0 |
If you want to expand support for some browsers, including mobile IOS 3.2 - 4.3 and Android 2.1 - 3, then it is recommended to use manufacturer prefixes and use the following syntax (in the examples of the article, only the syntax for modern browsers will be used):
-webkit-box-shadow : value ; /* Safari 3.1 - 4, IOS 3.2 - 4.3 and Android 2.1 - 3 */-moz-box-shadow : value ; /* Firefox 3.5 - 3.6 */ box-shadow : value ; /* table above */Let's move on to practice and start with a simple example, in which we add one shadow to the elements:
The result of our example:
Using multiple shadows
In the following example, consider interesting effect mixing colors, which can be obtained when using multiple shadows:
- Two blocks of fixed width and height (15em and 10em ), added padding to all sides (2em ), and set boxes to be block-lined to be able to line them up.
- For first block with class .test we indicated four shadows with different horizontal and vertical shadow values so that the element has different shadows on all sides. Blur radius for all shadows set to one. The color of each shadow is different and is set using predefined colors.
- For second block with class .test2 we indicated four shadows with different horizontal and vertical shadow values. The blur radius for all shadows was set to one, with the shadow stretch set to negative, which caused the shadow itself to shrink. The color of each shadow is different and specified using the RGBA system.
The result of our example:
Using shadows for images
The final example of this article will focus on using shadows for images. Immediately I want to draw your attention to the fact that directly specify the shadow for HTML element will not work, but we have the opportunity to specify an image as a background for the element of interest to us, and already for this element to set the shadow we need.
We will look at working with background images in detail in the article of the tutorial " ", but now, to put an end to the study of the use of shadows, we will touch on it superficially, and use an image as a background to an element in the following example:
- Two blocks of fixed width and height (237px and 232px ), added padding to all sides (2em ), and set boxes to be inline to allow them to line up. We set the block size of 237px by 232px to fit the image size, so that at this stage of training we don’t have to scale the image to fit the element and affect those CSS properties that are planned to be studied at a later stage (in the tutorial article "").
- For first block with class .test we indicated zero value horizontal and vertical shadows, but we set the blur radius to 50px and expanded it by setting the stretch radius to 10px . The color of the shadow was specified with a predefined color (violet ). In addition, we indicated in the ad keyword inset , causing the shadow to fall inside the element. In other words, we've created the element's inner shadow.
- For second block with class .test2 we've set the horizontal and vertical shadows to zero, but we've set the blur radius to 50px and extended it with a stretch radius of 10px . Shadow color specified in RGBA mode.
The result of our example:
Rice. 98 CSS image shadow example (box-shadow property)
Questions and tasks on the topic
Before moving on to the next topic, complete the practical task:
If you are having difficulty doing practical task, You can always open the example in a separate window and inspect the page to see what CSS was used.
2016-2020 Denis Bolshakov, you can send comments and suggestions on the site to [email protected]
Typography is the favorite toy of web designers. CSS has one very interesting tool in its composition - text shadow(text shadow), which at first glance seems simple enough, but it can be used to create memorable effects if you use ingenuity and imagination.
Shadow basics
Property text shadow very easy to use. It is supported by all modern browsers and even without the use of prefixes. But there is no support in IE (even IE9). You can use tools like Modernizr to help pull out CSS3 effects even in older versions of IE.
Syntax
Property syntax is used to create a text shadow text shadow, which is given below. Four parameters need to be defined: the first two set the position of the shadow, the third sets the blur level, and the fourth determines the color of the shadow.
Text-shadow: horizontal_offset vertical_offset blur color;
Below is an example of a text-shadow that is shifted two pixels down and four pixels to the right, blurred by three pixels, and black at 30% opacity.
Text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
The result of using this property will look like this:
Why is rgba used?
You don't have to use rgba to set the shadow color when defining the property. However, rgba adds another dimension to the shadow definition - the level of transparency.
This method is much simpler than other color determination methods. You don't have to focus on defining a hue for the shadow color, which can be just slightly darker or lighter than the background color. With rgba, you can simply use white or black colors and increase their transparency to achieve the desired background hue when mixing colors.
Using the property text shadow you can create various effects for text, not limited to simple drop shadows. For example, here is the code to create the illusion of indented text.
First you need to set the text color a little darker than the background color. And then you need to use the property text shadow with white color and increased transparency.
The background color is #222 and the text color has an opacity of 60%. The white shadow is positioned slightly down and to the right with an opacity of 10%.
Body ( background: #222; ) #text h1 ( color: rgba(0,0,0,0.6); text-shadow: 2px 2px 3px rgba(255,255,255,0.1); )
It is not necessary to blur the shadow at all. A clear shadow can go well with the design of the site.
Text-shadow: 6px 6px 0px rgba(0,0,0,0.2);
The real fun begins when you throw away the limitation of having only one shadow. By using a comma to separate definitions, you can use as many shadows as you like!
Text-shadow: shadow1, shadow2, shadow3;
Here is an example using two shadows. The first has the same color as the background.
Text-shadow: 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0.15);
Moving down a long distance
Once you master the use of multiple shadows, the result will become more and more expressive. It's very easy to create a 3D effect for text.
The example uses four shadows, all shifted down at different distances and blurred.
Text-shadow: 0px 3px 0px #b2a98f, 0px 14px 10px rgba(0,0,0,0.15), 0px 24px 2px rgba(0,0,0,0.1), 0px 34px 30px rgba(0,0,0,0.1 );
Shift down a small distance and strong blur
Here is another implementation of the same idea. The three shadows are moved a smaller distance and more blurred.
Text-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1);
3D text by Mark Dotto
The effect is used on MarkDotto.com. It uses 12 different shadows to create a great 3D effect.
Text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0 ,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
Embossed text by Gordon Hall
Notice in the example above I called my technique the “quick and dirty” letterpress effect. That's because there's a much more involved way to create some seriously inset text that's much more believable.
Gordon uses some serious CSS voodoo to pull off not only an outer shadow but a genuine inner shadow as well. Check out his blog post for a full explanation of the technique.
background-color: #666666; -webkit-background-clip:text; -moz-background-clip:text; background-clip:text; color:transparent text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;
glow
Text-shadow: 0px 0px 6px rgba(255,255,255,0.7);
Text-shadow: -10px 10px 0px #00e6e6, -20px 20px 0px #01cccc, -30px 30px 0px #00bdbd;
Multiple light sources
Text-shadow: 0px 15px 5px rgba(0,0,0,0.1), 10px 20px 5px rgba(0,0,0,0.05), -10px 20px 5px rgba(0,0,0,0.05);
Color: rgba(0,0,0,0.6); text-shadow: 2px 8px 6px rgba(0,0,0,0.2), 0px -5px 35px rgba(255,255,255,0.3);
Conclusion
Like most css effects, shadows are very easy to implement. But a combination of simple actions can result in amazing effects.
Hello dear readers. Today we will do nice shadow for the blocks CSS help . I think that this will be very useful to you, especially if you make templates. And blocks with a shadow look very attractive and modern.
Browser support
Basically everything modern browsers support shadow effects:
- Internet Explorer 9.0 and above;
- Firefox 3.5 and above;
- Chrome 1 and above;
- Safari 3 and above;
- Opera 10.5 and up.
I would also like to mention one not unimportant point: for some browsers we will use some prefixes. For Firefox is used -moz-, for Chrome and Safari you need to use the prefix -webkit.
Now, let's move on to the most interesting part. Let's look at all the shadows separately, there will be 8 effects.
shadow effect 1
AT this example the block shadow is at the bottom.
HTML
Effect 1
css
text-align:center; position:relative; top:80px; ) .box ( width:70%; height:200px; background:#FFF; margin:40px auto; ) /*======================= ========================== * Effect 1 * ===================== ===========================*/ .effect1( -webkit-box-shadow: 0 10px 6px -6px #777; -moz- box-shadow: 0 10px 6px -6px #777; box-shadow: 0 10px 6px -6px #777; )shadow effect 2
In this example, the shadow from the block goes to the left and right, but there is none in the middle. It turns out a very interesting effect.
HTML
Effect 2
css
.box h3( text-align:center; position:relative; top:80px; ) .box ( width:70%; height:200px; background:#FFF; margin:40px auto; ) /*====== =========================================== * Effect 2 * == ===========================================*/ .effect2 ( position: relative; ) .effect2:before, .effect2:after ( z-index: -1; position: absolute; content: ""; bottom: 15px; left: 10px; width: 50%; top: 80%; max -width:300px; background: #777; -webkit-box-shadow: 0 15px 10px #777; -moz-box-shadow: 0 15px 10px #777; box-shadow: 0 15px 10px #777; -webkit-transform : rotate(-3deg); -moz-transform: rotate(-3deg); -o-transform: rotate(-3deg); -ms-transform: rotate(-3deg); transform: rotate(-3deg); ) . effect2:after ( -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); -o-transform: rotate(3deg); -ms-transform: rotate(3deg); transform: rotate(3deg) ; right: 10px; left: auto; )shadow effect 3
Here the block shadow is only on the left.
HTML
Effect 3
css
.box h3( text-align:center; position:relative; top:80px; ) .box ( width:70%; height:200px; background:#FFF; margin:40px auto; ) /*====== =========================================== * Effect 3 * == ===========================================*/ .effect3 ( position: relative; ) .effect3:before ( z-index: -1; position: absolute; content: ""; bottom: 15px; left: 10px; width: 50%; top: 80%; max-width:300px; background: #777; -webkit-box-shadow: 0 15px 10px #777; -moz-box-shadow: 0 15px 10px #777; box-shadow: 0 15px 10px #777; -webkit-transform: rotate(-3deg ); -moz-transform: rotate(-3deg); -o-transform: rotate(-3deg); -ms-transform: rotate(-3deg); transform: rotate(-3deg); )shadow effect 4
Shadow on the right.
HTML
Effect 4
css
.box h3( text-align:center; position:relative; top:80px; ) .box ( width:70%; height:200px; background:#FFF; margin:40px auto; ) /*====== =========================================== * Effect 4 * == ===========================================*/ .effect4 ( position: relative; ) .effect4:after ( z-index: -1; position: absolute; content: ""; bottom: 15px; right: 10px; left: auto; width: 50%; top: 80%; max- width:300px; background: #777; -webkit-box-shadow: 0 15px 10px #777; -moz-box-shadow: 0 15px 10px #777; box-shadow: 0 15px 10px #777; -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); -o-transform: rotate(3deg); -ms-transform: rotate(3deg); transform: rotate(3deg); )Shadow effect 5
In this case, the shadow on both sides moved down more strongly.
HTML
Effect 5
css
.box h3( text-align:center; position:relative; top:80px; ) .box ( width:70%; height:200px; background:#FFF; margin:40px auto; ) /*====== =========================================== * Effect 5 * == ===========================================*/ .effect5 ( position: relative; ) .effect5:before, .effect5:after ( z-index: -1; position: absolute; content: ""; bottom: 25px; left: 10px; width: 50%; top: 80%; max -width:300px; background: #777; -webkit-box-shadow: 0 35px 20px #777; -moz-box-shadow: 0 35px 20px #777; box-shadow: 0 35px 20px #777; -webkit-transform : rotate(-8deg); -moz-transform: rotate(-8deg); -o-transform: rotate(-8deg); -ms-transform: rotate(-8deg); transform: rotate(-8deg); ) . effect5:after ( -webkit-transform: rotate(8deg); -moz-transform: rotate(8deg); -o-transform: rotate(8deg); -ms-transform: rotate(8deg); transform: rotate(8deg) ; right: 10px; left: auto; )shadow effect 6
Here is the effect of curved shadows on the bottom of the block.
HTML
Effect 6
css
.box h3( text-align:center; position:relative; top:80px; ) .box ( width:70%; height:200px; background:#FFF; margin:40px auto; ) /*====== =========================================== * Effect 6 * == ===========================================*/ .effect6 ( position:relative; -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0 , 0, 0, 0.1) inset; ) .effect6:before, .effect6:after ( content:""; position:absolute; z-index:-1; -webkit-box-shadow:0 0 20px rgba(0, 0,0,0.8); -moz-box-shadow:0 0 20px rgba(0,0,0,0.8); box-shadow:0 0 20px rgba(0,0,0,0.8); top:50% ; bottom:0; left:10px; right:10px; -moz-border-radius:100px / 10px; border-radius:100px / 10px; ) .effect6:after ( right:10px; left:auto; -webkit-transform :skew(8deg) rotate(3deg); -moz-transform:skew(8deg) rotate(3deg); -ms-transform:skew(8deg) rotate(3deg); -o-transform:skew(8deg) rotate(3deg); transform:skew(8deg) rotate(3deg); )Shadow effect 7
The same effect is only a shadow on the top and bottom of the block.
HTML
Effect 7
css
.box h3( text-align:center; position:relative; top:80px; ) .box ( width:70%; height:200px; background:#FFF; margin:40px auto; ) /*====== =========================================== * Effect 7 * == ===========================================*/ .effect7 ( position:relative; -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0 , 0, 0, 0.1) inset; ) .effect7:before, .effect7:after ( content:""; position:absolute; z-index:-1; -webkit-box-shadow:0 0 20px rgba(0, 0,0,0.8); -moz-box-shadow:0 0 20px rgba(0,0,0,0.8); box-shadow:0 0 20px rgba(0,0,0,0.8); top:0; bottom:0; left:10px; right:10px; -moz-border-radius:100px / 10px; border-radius:100px / 10px; ) .effect7:after ( right:10px; left:auto; -webkit-transform: skew(8deg) rotate(3deg); -moz-transform:skew(8deg) rotate(3deg); -ms-transform:skew(8deg) r otate(3deg); -o-transform:skew(8deg) rotate(3deg); transform:skew(8deg) rotate(3deg); )Shadow effect 8
The effect of curved shadows on the sides of the block.
HTML
Effect 8
css
.box h3( text-align:center; position:relative; top:80px; ) .box ( width:70%; height:200px; background:#FFF; margin:40px auto; ) /*====== =========================================== * Effect 8 * == ===========================================*/ .effect8 ( position:relative; -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0 , 0, 0, 0.1) inset; ) .effect8:before, .effect8:after ( content:""; position:absolute; z-index:-1; -webkit-box-shadow:0 0 20px rgba(0, 0,0,0.8); -moz-box-shadow:0 0 20px rgba(0,0,0,0.8); box-shadow:0 0 20px rgba(0,0,0,0.8); top:10px; bottom:10px; left:0; right:0; -moz-border-radius:100px / 10px; border-radius:100px / 10px; ) .effect8:after ( right:10px; left:auto; -webkit-transform: skew(8deg) rotate(3deg); -moz-transform:skew(8deg) rotate(3deg); -ms-transform:skew(8deg) r otate(3deg); -o-transform:skew(8deg) rotate(3deg); transform:skew(8deg) rotate(3deg); )That's all dear friends. If you don't understand something, be sure to ask in the comments. See you soon.