Travailler les ombres peut s’avérer devenir très compliqué pour le peu qu’on se trouve face à des dessins complexes.
Dans cet article, je vais vous donner quelques astuces pour placer vos ombres.
Voici la structure HTML de base que j’utiliserai pour ce tutoriel :
<div class="ombre ombre-top">
Hello World !
</div>
Et le CSS de base :
.ombre{
line-height: 60px;
width: 250px;
text-align:center;
display:block;
position: relative; /* Cette ligne est impérative */
background:#f5f5f5;
border:solid 1px #ccc;
margin-bottom: 20px;
}
#1 – Ombre au dessus en CSS
Ici, on va placer l’ombre uniquement au dessus de la box :
Il suffit d’utiliser la pseudo-class CSS :after ou :before comme suit :
.ombre:before{
content: " ";
position: absolute;
width:100%;
height: 15px;
top: -15px;
left: 0px;
box-shadow: 0px -10px 10px -10px #666 inset;
}
#2 – Ombre en dessous en CSS
Maintenant, on va placer l’ombre uniquement en dessous de la box :
On va utiliser de la même manière la pseudo-class :after ou :before
.ombre:after{
content: " ";
position: absolute;
width:100%;
height: 15px;
bottom: -15px;
left: 0px;
box-shadow: 0px 10px 10px -10px #666 inset;
}
#3 – Ombre à droite CSS
Nous allons placer l’ombre uniquement à droite :
Vous vous en douterez, on utilisera les pseudo-class :
.ombre:after{
content: " ";
position: absolute;
width:15px;
height: 100%;
top: 0px;
right: -15px;
box-shadow: 10px 0px 10px -10px #666 inset;
}
#4 – Ombre à gauche en CSS
Enfin, nous allons placer l’ombre à gauche en CSS :
.ombre:after{
content: " ";
position: absolute;
width:15px;
height: 100%;
top: 0px;
left: -15px;
box-shadow: -10px 0px 10px -10px #666 inset;
}
#5 – Combiner les ombres en CSS
En exploitant les pseudos-class, il vous sera ainsi possible de combiner les ombres.
Un tutoriel court, mais efficace. Retrouvez le code complet : https://jsfiddle.net/nx2h36pg/
Avez-vous d’autres techniques pour vos ombres ?
Enjoy it !
