{"id":996,"date":"2011-02-19T14:30:50","date_gmt":"2011-02-19T13:30:50","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog\/?p=996"},"modified":"2015-08-05T20:53:26","modified_gmt":"2015-08-05T18:53:26","slug":"ombre-avancees-avec-css3-et-box-shadow","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/tutoriels\/ombre-avancees-avec-css3-et-box-shadow","title":{"rendered":"Ombres avanc\u00e9es avec CSS3 et box-shadow"},"content":{"rendered":"

CSS<\/abbr>3 c’est pour l’aspect vendeur du nom, car au final on va aussi et surtout b\u00e9n\u00e9ficier du service de pseudo \u00e9l\u00e9ments (:after<\/code> et :before<\/code>) qui sont pr\u00e9vus depuis CSS2.1.
\nLes visuels que vous voyez sur la page de d\u00e9monstration<\/a> ne sont compos\u00e9s qu’avec des propri\u00e9t\u00e9s CSS<\/abbr> sur une seule et unique <div><\/code> (pour chaque bloc).<\/p>\n

Chez moi le meilleur rendu est sous Firefox, notamment pour la derni\u00e8re ombre qui est un peu os\u00e9e (au passage il semblerait que la propri\u00e9t\u00e9 opacity<\/code> ne fonctionne pas sur les pseudo-\u00e9l\u00e9ments).<\/p>\n

Dans cette d\u00e9monstration<\/a> nous allons utiliser des propri\u00e9t\u00e9s avanc\u00e9es de CSS2.1 (:before<\/code> et :after<\/code>) qui sont des pseudo-\u00e9l\u00e9ments.
\nDes pseudo-\u00e9l\u00e9ments permettent de construire un \u00e9l\u00e9ment dans la structure de votre document (DOM<\/abbr>) sans vraiment en construire un… ok, \u00e7a commence bien pour l’explication.<\/p>\n

Pseudo-\u00e9l\u00e9ments :after<\/code> et :before<\/code><\/h2>\n

Imaginez que dans un site vous souhaitiez ajouter derri\u00e8re un lien la langue du site en r\u00e9f\u00e9rence (qui, pour rappel, se pr\u00e9cise gr\u00e2ce \u00e0 l’attribut hreflang<\/code> sur un \u00e9l\u00e9ment <a><\/code>) vous pouvez le faire en passant par du CSS :<\/p>\n

a[hreflang]:after {\r\n\tcontent : \" (\"attr(hreflang)\")\";\r\n}<\/code><\/pre>\n
Ainsi tous les liens porteurs de l’attribut hreflang<\/code> se verront agr\u00e9ment\u00e9s d’un \u00ab\u00a0(en)\u00a0\u00bb, dans le cas d’un lien anglais par exemple :
\nMon lien (en)<\/a><\/p>\n
La base de travail<\/h2>\n
Sur le m\u00eame principe nous allons pouvoir construire deux pseudo-\u00e9l\u00e9ments qui vont nous servir \u00e0 composer les diff\u00e9rentes ombres que vous pouvez visualiser sur la d\u00e9monstration<\/a>.<\/p>\n
Pour r\u00e9sumer simplement notre d\u00e9marche nous avons des divisions :<\/p>\n
<div class=\"bloc\">Without drop shadow<\/div><\/code><\/pre>\n
qui portent toutes la classe bloc<\/code>, cette classe nous sert de base pour les styles des blocs de d\u00e9monstration (\u00e7a ressemble vaguement \u00e0 une feuille… du moins j’esp\u00e8re).
\nLa classe without<\/code>, dans le premier exemple de la page de d\u00e9monstration, me sert juste \u00e0 d\u00e9finir le bloc qui n’a pas d’ombrage, mais passons.<\/p>\n
\"\"<\/p>\n
Voici le CSS correspondant, les principales propri\u00e9t\u00e9s \u00e0 retenir sont celles de positionnement et de dimensions \u00e0 fixer, mais je vous donne tout de m\u00eame la totalit\u00e9 :<\/p>\n
.bloc {\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: Georgia, Times, 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
Ensuite nous allons construire nos pseudo-\u00e9l\u00e9ments de mani\u00e8re globale :<\/p>\n
.bloc:after, .bloc: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.bloc:before { background: green;}\r\n.bloc:after { background: red; }\r\n<\/code><\/pre>\n
Les pseudo-blocs ont une position absolue et un z-index<\/code> n\u00e9gatif, le but \u00e9tant de placer ces \u00e9l\u00e9ments sous leur parent (la <div><\/code> dont ils d\u00e9pendent).<\/p>\n
Les couleurs sont l\u00e0 pour faire du rep\u00e9rage dans le positionnement des pseudo-\u00e9l\u00e9ments.
\n\u00c0 ce propos j’avais pr\u00e9vu de vous inviter \u00e0 utiliser Firebug<\/a> pour jouer avec le fond des .bloc<\/code>, mais gr\u00e2ce \u00e0 une suggestion de Felipe, je vous ai d\u00e9velopp\u00e9 un petit joujou pour visualiser les pseudo-\u00e9l\u00e9ments sans vous demander trop d’effort :p<\/p>\n
Bref, revenons-en \u00e0 nos moutons.<\/p>\n
Les pseudo-blocs sont pr\u00eats, il ne nous reste plus qu’\u00e0 leur offrir une ombre port\u00e9e ainsi qu’un positionnement pr\u00e9cis.
\nDans certains cas nous aurons besoin d’autres petites choses, mais nous verrons cela au fur et \u00e0 mesure.<\/p>\n
Tous les codes CSS suivants vont s’appliquer \u00e0 un \u00e9l\u00e9ment porteur de la classe bloc<\/code> combin\u00e9 \u00e0 la classe dont fait r\u00e9f\u00e9rence le code CSS.
\nExemple, pour le prochain effet, nous aurons besoin d’un \u00e9l\u00e9ment de cette forme :<\/p>\n
<div class=\"bloc simple\">Soft Drop Shadow<\/div><\/code><\/pre>\n
\u00c0 noter, certaines propri\u00e9t\u00e9s CSS3 doivent \u00eatre pr\u00e9fix\u00e9es (-webkit-, -moz-, etc.), cela d\u00e9pend du support navigateurs souhait\u00e9 et de votre projet.<\/p>\n
Ombre simple<\/h2>\n
Il n’est jamais de trop de rappeler certaines bases, notamment sur l’utilisation de la propri\u00e9t\u00e9 box-shadow<\/code>.<\/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.simple:after, .simple:before { display: none; }<\/code><\/pre>\n
Ici nous n’avons pas besoin des pseudo-\u00e9l\u00e9ments, nous les cachons.
\nIci il s’agit du m\u00eame code que pour les ombres de notre base, sauf que nous ajoutons une ombre port\u00e9e.<\/p>\n
box-shadow<\/code> permet d’attribuer plusieurs ombres \u00e0 un \u00e9l\u00e9ment. La syntaxe de base :<\/p>\n
box-shadow: 1px 2px 9px 0 #000;<\/code><\/pre>\n
permet la cr\u00e9ation d’une ombre port\u00e9e dont voici les param\u00e8tres, dans l’ordre d’apparition :
\n1px<\/code> de d\u00e9calage horizontal (vers la droite), 2px<\/code> de d\u00e9calage vertical (vers le bas), 9px<\/code>\u00a0 de diffusion et 0<\/code> d’\u00e9tendue (compl\u00e8tement optionnel), #000<\/code> de couleur.
\nUn param\u00e8tre optionnel, inset<\/code>, plac\u00e9 apr\u00e8s la couleur, permet d’indiquer que l’ombre port\u00e9e est en fait une ombre interne \u00e0 l’\u00e9l\u00e9ment. Sans ce param\u00e8tre, l’ombre est consid\u00e9r\u00e9e comme port\u00e9e.<\/p>\n
La multiplication de cet ensemble d’informations s\u00e9par\u00e9 par une virgule permet la cr\u00e9ation d’ombres multiples.<\/p>\n
Les ombres lat\u00e9rales<\/h2>\n
C’est ici que l’on va d\u00e9couvrir l’int\u00e9r\u00eat des pseudo-\u00e9l\u00e9ments.<\/p>\n
\"\"<\/p>\n
Ici nous allons positionner un des pseudo-blocs et lui donner une largeur et une hauteur, ainsi qu’une ombre port\u00e9e.<\/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
Le border-radius<\/code> nous permet d’avoir un effet l\u00e9g\u00e8rement gondol\u00e9 sur l’ombre, ce qui ajoute un poil de r\u00e9alisme.
\nN’oubliez pas de profiter de la fonction X-Ray pour visualiser le pseudo-\u00e9l\u00e9ment<\/a> et son comportement.<\/p>\n
Ombre lat\u00e9rale courbe<\/h2>\n
Simple mais pas trop, simple dans le sens o\u00f9 il n’y en a que d’un c\u00f4t\u00e9.
\nEncore une fois nous n’allons utiliser qu’un des deux pseudo-\u00e9l\u00e9ments.<\/p>\n
\"\"<\/p>\n
Ici nous allons utiliser une rotation pour donner cet effet.<\/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
Vous pouvez voir le petit d\u00e9calage n\u00e9gatif de l’ombre, le but \u00e9tant de le diriger vers la gauche.<\/p>\n
Ombres horizontales<\/h2>\n
C’est un peu le m\u00eame principe que pr\u00e9c\u00e9demment, sauf que, partant du principe qu’on peut tr\u00e8s bien ne pas conna\u00eetre la hauteur d’un bloc, j’utilise cette fois les deux pseudo-\u00e9l\u00e9ments pour produire cet effets.<\/p>\n
\"\"<\/p>\n
Nos deux pseudo-\u00e9l\u00e9ments sont donc positionn\u00e9s l’un par rapport au haut du bloc parent (la <div><\/code> dont il d\u00e9pend), l’autre par rapport au bas.<\/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 #565656;\r\n}<\/code><\/pre>\n
J’ai un peu dupliqu\u00e9 les styles pour que ce soit bien clair, mais vous pouvez bien entendu r\u00e9unir les styles communs dans une seule d\u00e9claration.<\/p>\n
Ombre horizontale simple<\/h2>\n
C’est l’\u00e9tape la plus complexe de cet article je pense.<\/p>\n
\"\"<\/p>\n
En ajoutant la classe single<\/code> \u00e0 notre \u00e9l\u00e9ment :<\/p>\n
<div class=\"bloc horizontal single\">Single Horizontal<\/div><\/code><\/pre>\n
et en appliquant, en plus des pr\u00e9c\u00e9dents, ce code CSS :<\/p>\n
.single:before { display: none; }<\/code><\/pre>\n
Le tour est jou\u00e9 \ud83d\ude09
\nAutre solution, plut\u00f4t que de cr\u00e9er les deux ombres pour en cacher une, il vous est simplement possible de n’en cr\u00e9er qu’une\u2026 \u00c9vident, mais je pr\u00e9f\u00e8re le souligner.<\/p>\n
Ombres courb\u00e9s<\/h2>\n
C’est certainement l’effet le plus en vogue chez les webdesigners qui souhaitent apporter une touche de profondeur \u00e0 leur design.<\/p>\n
\"\"<\/p>\n
Pour r\u00e9aliser cet effet nous allons devoir utiliser nos deux pseudo-\u00e9l\u00e9ments.<\/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
Trop facile !<\/p>\n
\"\"<\/p>\n
Toujours sur le m\u00eame principe, il vous suffira d’ajouter la classe single<\/code> styl\u00e9e plus haut pour faire disparaitre l’ombre d’un des deux c\u00f4t\u00e9s. De quoi simplifier bien largement vos int\u00e9grations !<\/p>\n
Ombre exp\u00e9rimentale<\/h2>\n
Alors celle-ci… ne regardez pas sous Chrome !
\nVous ne verrez rien non plus avec le X-Ray pour la simple et bonne raison que j’utilise l’int\u00e9gralit\u00e9 des pseudo-\u00e9l\u00e9ments (et pas uniquement leur box-shadow<\/code>), pour produire cet effet, encore exp\u00e9rimental.<\/p>\n
\"\"<\/p>\n
Le code CSS correspondant est plut\u00f4t lourd en terme d’ombre port\u00e9e… et plut\u00f4t difficile \u00e0 param\u00e9trer :<\/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
Le pseudo-\u00e9l\u00e9ment :before<\/code> me sert d’ombre large, les drop-shadow<\/code> y sont donc plut\u00f4t complexes.
\nLe pseudo-\u00e9l\u00e9ment :after<\/code> me sert d’ombre fine, au centre de l’ombre large, les drop-shadow<\/code> sont donc l\u00e9g\u00e8rement plus simples.
\nDans les deux cas nous les transformons dans un premier temps en ellipse<\/a>.<\/p>\n
Bogues<\/h2>\n
S’il vous arrivait de ne pas voir apparaitre les ombres, vous \u00eates peut-\u00eatre dans le cas rencontr\u00e9 par les lecteurs et commentateurs du blog :
\nLes blocs ombr\u00e9s sont des enfants d’au moins un autre bloc (un \u00ab\u00a0container\u00a0\u00bb quoi). Si ce bloc poss\u00e8de une couleur de fond, les ombres vont disparaitre derri\u00e8re le bloc.
\nC’est une histoire de z-index<\/code> \u00e0 r\u00e9ordonner.
\nDans notre exemple, il suffit de positionner votre \u00e9l\u00e9ment (en absolute<\/code> ou relative<\/code>) et de lui attribuer un z-index<\/code> de 0<\/code>, exemple :<\/p>\n
.container {\r\n   position:relative;\r\n   z-index: 0;\r\n}<\/code><\/pre>\n
Merci \u00e0 Ivan<\/a> d’avoir fourni un exemple de code concret.<\/p>\n
Le mot de la fin<\/h2>\n
J’esp\u00e8re que vous n’aurez pas eu trop de difficult\u00e9 \u00e0 suivre ce tutoriel dont les explications restent relativement sommaires.
\nLa fonction X-Ray devrait vous servir \u00e0 trouver certaines r\u00e9ponses \u00e0 vos questions, mais pour les autres n’h\u00e9sitez pas \u00e0 me consulter via le syst\u00e8me de commentaire de ce blog.<\/p>\n
J’ai bien conscience que le sujet a d\u00e9j\u00e0 \u00e9t\u00e9 abord\u00e9 ici : Nimbupani<\/a> et l\u00e0 : NicolasGallagher<\/a>. Mais cet article est en r\u00e9daction depuis d\u00e9but d\u00e9cembre, et il apporte ma vision des choses, je me suis donc d\u00e9cid\u00e9 \u00e0 le terminer \ud83d\ude42<\/p>\n
Merci pour votre lecture !<\/p>\n
\n
Liens utiles<\/h2>\n