{"id":5293,"date":"2011-02-21T20:21:36","date_gmt":"2011-02-21T19:21:36","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog\/en\/?p=5293"},"modified":"2015-08-05T20:51:32","modified_gmt":"2015-08-05T18:51:32","slug":"advanced-drop-shadows-with-css3","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/en\/tutorials\/advanced-drop-shadows-with-css3","title":{"rendered":"Advanced drop shadows with CSS3"},"content":{"rendered":"

I use the name “CSS<\/abbr>3″ only for its “commercial” aspect. Actually, we will use my two favorite pseudo-elements :after<\/code> and :before<\/code> which are available since CSS2.1. I mean they are available since a long time ago\u2026 Demos you see in the demo page<\/a> are composed with only one unique <div><\/code> and some CSS properties.<\/p>\n

<\/p>\n

For me, the best rendering is made with Firefox browser, but you should see those advanced shadows on all modern browsers, so use the one ou prefer.<\/p>\n

In this demonstration<\/a> I will use some advanced CSS properties (transform<\/code>, box-shadow<\/code>) directly on :before<\/code> and :after<\/code> pseudo-elements. Those pseudo-elements allow to build a kind of “shadow-dow” inside the existing DOM (Document Object Model). It’s an element built with CSS, or a sort of\u2026 Lets do it!<\/p>\n

:after<\/code> and :before<\/code> pseudo-elements<\/h2>\n

Imagine: in your website, just after a link, you want to add the language of the resource you linked to. (reminder: this information is given by the hreflang<\/code> attribute in a <a><\/code> element). You can do it using those some lines of CSS:<\/p>\n

a[hreflang]:after {\r\n\tcontent : \" (\"attr(hreflang)\")\";\r\n}<\/code><\/pre>\n
With that code, all the links with the hreflang<\/code> attribute will be ended by “(en)”, in the case of an english reference:
\nMy link (en)<\/a><\/p>\n
The working basis<\/h2>\n
Under the same principle, we will use two pseudo-element to built several styles of dropped shadows, the same you can analyze in the demo page<\/a>.<\/p>\n
As base of HTML, we have a single div<\/code> element:<\/p>\n
<div class=\"block\">Without drop shadow<\/div><\/code><\/pre>\n
This div<\/code> element has a block<\/code>, class value which will visually create the block (some basic styles for the demo). The without<\/code> class in the first block is just here to define the block without any shadow. No big deal.<\/p>\n
\"\"<\/p>\n
You will find the corresponding CSS below. The main properties are those about positioning and dimensions. It’s not mandatory to fix dimension of the block, here is for the demo. So, the styles:<\/p>\n
.block {\r\n\tposition: relative;\r\n\tdisplay: inline-block;\r\n\tvertical-align: top;\r\n\tmargin: 35px 26px;\r\n\tpadding: 25px;\r\n\twidth: 220px;\r\n\theight: 110px;\r\n\tbackground: #f0e8d8;\r\n\tfont-size: 1.6em;\r\n\tline-height: 5em;\r\n\tfont-family: sans-serif;\r\n\ttext-align: center;\r\n\tbackground-image: linear-gradient(to bottom, #dacdb1 11%, #f0e8d8 56%);\r\n\tbox-shadow: 0 0 65px #cdbe9f inset, 0 0 20px #beae8c inset;\r\n}<\/code><\/pre>\n
Then, we build our pseudo-elements for all the cases. It’s important not forget the empty content<\/code> property.<\/p>\n
.block:after,\r\n.block:before {\r\n\tcontent: \"\";\r\n\tposition: absolute;\r\n\twidth: 50%;\r\n\theight: 100px;\r\n\tz-index: -10;\r\n}\r\n\r\n.block:before { background: green;}\r\n.block:after { background: red; }\r\n<\/code><\/pre>\n
Pseudo-blocks have an absolute position and a negative z-index<\/code>, the goal is to place those elements under their parent. (the <div><\/code> they depend)<\/p>\n
Colors of pseudo-elements are added to understand how it works, how those elements are positioned, rotated, etc. I had planned to invite you to use Firebug<\/a> to play with the .block<\/code> background, but thanks to a suggestion by Philippe<\/a>, I developed a plaything to watch those pseudo-elements without effort. :p<\/p>\n
But let us come back to the topic.<\/p>\n
Pseudo-blocks are ready, we just have to add them a drop shadow and a precise positioning. With some cases, we will need other properties, we will see later together.<\/p>\n
The following codes will be applied to all elements that have the block<\/code> class combined to the other class associated. In other words: one class by type of shadow.
\nFor example, for the next effect, the HTML element need those classes:<\/p>\n
<div class=\"block simple\">Soft Drop Shadow<\/div><\/code><\/pre>\n
Some CSS3 properties have to be prefixed (-webkit-, -moz-, etc.), depending on the browsers support you need, and the browsers evolutions.<\/p>\n
Simple shadow<\/h2>\n
It’s never too early to remind basis about box-shadow<\/code> usage.<\/p>\n
\"\"<\/p>\n
.simple {\r\n\tbox-shadow: 0 0 65px #cdbe9f inset, 0 0 20px #beae8c inset, 0 0 5px #816f47;\r\n}\r\n\/* we don't need pseudo-elements this time *\/\r\n.simple:after,\r\n.simple:before {\r\n\tdisplay: none;\r\n}<\/code><\/pre>\n
Here, we don’t need pseudo-elements, so we hide them.<\/p>\n
We have the same box-shadow<\/code> code than the base, but we added another shadow to the list. As you can see, we can combine inset shadow and drop shadow.<\/p>\n
The basic syntax:<\/p>\n
box-shadow: 1px 2px 9px 0 #000;<\/code><\/pre>\n
allow to create a box shadow, with those parameters, in the order:
\n1px<\/code> of horizontal move (to the right), 2px<\/code> of vertical move (to the bottom), 9px<\/code> of blur, 0<\/code> of spread (optional), #000<\/code> for the shadow color.
\nAn optional parameter, the keyword inset<\/code>, put at the end of the shadow value, makes the shadow inner instead of generating a drop shadow. Without this parameter, the shadow is a classical drop shadow.<\/p>\n
This set of parameters can be duplicated and comma separated to create multiple shadow.<\/p>\n
Lateral shadows<\/h2>\n
This is how we will really use our pseudo-element to create advanced effects.<\/p>\n
\"\"<\/p>\n
We will put our pseudo-blocks in a certain position, and give them dimensions and “personal” shadow. Let’s see!<\/p>\n
.laterals:before {\r\n\ttop: 15px;\r\n\tleft: 0;\r\n\twidth: 100%;\r\n\theight: 130px;\r\n\t\r\n\tborder-radius: 12px \/ 65px;\r\n\tbox-shadow: 0 0 10px #555;\r\n}\r\n.laterals:after { display: none; }\r\n<\/code><\/pre>\n
The border-radius<\/code> property add a curled effect in our shadows. It’s more realist.
\nDon’t forget to use the X-Ray feature to watch pseudo-element<\/a> in action.<\/p>\n
Curved lateral shadow<\/h2>\n
Simple but not too simple. I mean, it’s simple if you get in mind that there is only one shadow in one side.
\nSo! This time, again, we will use only one of both pseudo-elements.<\/p>\n
\"\"<\/p>\n
We have to use a rotation to give the shadow its effect.<\/p>\n
.lateral:before {\r\n\ttop: 10px;\r\n\tleft: 8px;\r\n\twidth: 50%;\r\n\theight: 130px;\r\n\t\r\n\tbox-shadow: -7px 0 10px #555;\r\n\ttransform: rotate(-5deg);\r\n}\r\n.lateral:after { display: none; }\r\n<\/code><\/pre>\n
You may see the negative value of box-shadow property. This value moves the shadow to the left to make it more visible below the block.<\/p>\n
Hozizontal shadows<\/h2>\n
It’s the same principle than lateral shadows<\/a>, but this time I use the both of pseudo-elements. In fact, it’s rare to know in advance the height of an item. Using :before<\/code> and :after<\/code> to make this effect allows me to have a dynamic-height item.<\/p>\n
\"\"<\/p>\n
The first pseudo-element is positionned regarding to the top of the block, the second one regarding to the bottom.<\/p>\n
.horizontal:before {\r\n\ttop: 0px;\r\n\tleft: 5%;\r\n\twidth: 90%;\r\n\theight: 50px;\r\n\t\r\n\tborder-radius: 125px \/ 12px;\r\n\tbox-shadow: 0 0 8px #555;\r\n}\r\n.horizontal:after { \r\n\tbottom: 0px;\r\n\tleft: 5%;\r\n\twidth: 90%;\r\n\theight: 50px;\r\n\t\r\n\tborder-radius: 125px \/ 12px;\r\n\tbox-shadow: 0 0 8px #555;\r\n}<\/code><\/pre>\n
I volontarily duplicated styles to the both declarations, but you can merge those duplicated properties in a single declaration to be more maintainable. It’s up to you.<\/p>\n
Simple horizontal shadow<\/h2>\n
It’s the more complex part of that article, I think.<\/p>\n
\"\"<\/p>\n
By adding single<\/code> class to our element:<\/p>\n
<div class=\"block horizontal single\">Single horizontal<\/div><\/code><\/pre>\n
and applying this CSS code (in addition of our previous effect):<\/p>\n
.single:before { display: none; }<\/code><\/pre>\n
It’s not a big deal, indeed \ud83d\ude09
\nOf course, instead of creating styles for :before<\/code> and hide it, we can also just create styles for :after<\/code> and hide :before<\/code> directly.<\/p>\n
Curved shadows<\/h2>\n
It was (and it is, maybe?) a trendy effect to add a touch of depth in some web designs.<\/p>\n
\"\"<\/p>\n
To make this effect, we will use our both pseudo-elements, and add a rotation to them, like the Curved Lateral Shadow<\/a> seen previously.<\/p>\n
.curve:before {\r\n\ttop: 52px;\r\n\tleft: 5px;\r\n\r\n\ttransform: rotate(-5deg);\r\n\tbox-shadow: 7px 6px 15px #333;\r\n}\r\n.curve:after {\r\n\ttop: 52px;\r\n\tright: 5px;\r\n\t\r\n\ttransform: rotate(5deg);\r\n\tbox-shadow: -7px 6px 15px #333;\r\n}<\/code><\/pre>\n
Too easy!<\/p>\n
\"\"<\/p>\n
With the same principle, you can hide one of both shadows to create this more simple effect. Use the\u00a0 single<\/code> class, seen previously, or just don’t style one or the other pseudo-elements.<\/p>\n
More experimental shadow<\/h2>\n
So! This one, the X-Ray feature will not help you, not this time.
\nI use entirely the both pseudo-elements, not only their box-shadow<\/code> property.<\/p>\n
\"\"<\/p>\n
The corresponding CSS code is bigger than the previous we made, but this experimentation is good to help you during your front-end work \ud83d\ude42<\/p>\n
.drop:before {\r\n\tleft: -5px;\r\n\ttop: 167px;\r\n\twidth: 280px;\r\n\theight: 4px;\r\n\tbackground: #aaa;\r\n\r\n\tborder-radius: 140px \/ 2px;\r\n\tbox-shadow: 0 0 5px #aaa, 0 0 10px #888, 0 0 15px #666;\r\n}\r\n\r\n.drop:after {\r\n\tleft: 8px;\r\n\ttop: 168px;\r\n\twidth: 255px;\r\n\theight: 2px;\r\n\tbackground: #666;\r\n\t\r\n\tborder-radius: 125px \/ 1px;\r\n\tbox-shadow: 0 0 5px #444, 0 0 8px #333, 0 0 10px #666;\r\n}<\/code><\/pre>\n
To be more efficient, you could (or should) use rgba()<\/code> instead of hexadecimal colors.<\/p>\n
The :before<\/code> pseudo-element is used for the large shadow.
\nThe :after<\/code> pseudo-element is used for the fine shadow,\u00a0 at the center of this complex large shadow.
\nIn both cases, we need to transform them into ellipses (fr)<\/a> (french article, but understandable code).<\/p>\n
Bugs<\/h2>\n
If it happens shadow not showing up, you may be in the following case: the elements affected by the shadows are in another parent element. In other words, you have a container that containing the elements you tried to make shadowy.
\nIf that container has a background (color or image), the shadows become non-visible.<\/p>\n
It’s a z-index<\/code> issue, you have to reorder it.
\nIn our example, you just have to put the position<\/code> property to relative<\/code> (or other value like fixed<\/code> or absolute<\/code>, depending on your layout) and a z-index<\/code> with 0<\/code> as value:<\/p>\n
.container {\r\n   position: relative;\r\n   z-index: 0;\r\n}<\/code><\/pre>\n
The ending word<\/h2>\n
I hope this tutorial was easy to follow for you. Some explainations are short, but if you have question, the comment form is there for you.
\nThe X-Ray feature should help you to find some answers, just click it!<\/p>\n
This topic about advanced drop shadows is also available here Nimbupani<\/a> and there NicolasGallagher<\/a>.<\/p>\n
Thank you for your reading!<\/p>\n
\n
Useful links<\/h2>\n