Termes CSS clés employés : border-radius, ::before, ::after,
transform:rotate,
box-shadow, radial-gradient, linear-gradient.
Compatibilité navigateurs : IE10+, Firefox16.0+, Chrome et Safari
avec préfixe, Opera16+.
Créer des ombres plus sophistiquées que ce qui peut être obtenu simplement avec la propriété
box-shadow.
Une ombre box-shadow suit obligatoirement la forme de l’élément qui la créée. Pour obtenir d’autres
formes, il faut tricher avec un élément ::before et ou ::after, auquel il est possible de donner la
forme et la position de son choix. Nous allons ici raisonner sur des boutons, mais cela est
applicable à tout élément.
Le code HTML est simpliste : il suffit d’un élément quelconque, ici DIV, auquel on attribue une classe particulière.
<div class="bloc">texte<div>
Le code CSS commence par définir l’élément de base : il s’agit essentiellement ici de code « décoratif »,
sans importance réelle quand au but recherché.
.bloc {
position: relative;
display: inline-block;
margin-left:25%;
margin-top:10px;
padding: 25px;
width: 220px;
height: 80px;
background: rgb(250, 250, 250);
line-height: 15px;
text-align: center;
border-radius:15px;
border: 1px solid black;
background-image: linear-gradient(center bottom, white 11%, grey 56%);
box-shadow: 0 0 65px grey inset, 0 0 20px white inset;
}
Nous commençons par définir les caractéristiques par défaut d’éléments ::before et ::after
pour notre élément principal. Par défaut, ils ne sont pas affichés, et leur position z-index est fixée à –1
pour s’assurer qu’ils soient sous l’élément principal.
.bloc::after, .bloc::before {
display:none;
content: " ";
position: absolute;
z-index: -1;
}
Passons ensuite au premier cas : nous voulons ici deux bordures latérales cintrées, à droite et à gauche
de l’élément principal (ici de classe bloc lateraux). Cela va être obtenu à l’aide d’un unique élément
::before.
Commençons par afficher l’élément (il était masqué par défaut). Nous lui appliquons une bordure elliptique grâce
à border-radius, et une ombre portée avec box-shadow. L’élément étant légèrement plus large
et moins haut que l’élément principal, et positionné de façon à être centré (cela dépend des dimensions de l’élément de base),
nous ne verrons donc que ses côtés.
.lateraux::before {
display:inline-block;
top: 8px;
left: -2px;
width: 102%;
height: 98%x;
background-color:black;
border-radius: 12px / 65px;
box-shadow: 0 0 10px black;
}
Pour obtenir des bordures haute et basse cintrées, le principe est analogue : un unique élément ::before,
avec une bordure elliptique grâce à border-radius, et une ombre portée avec box-shadow. L’élément étant ici légèrement moins
large et plus haut que l’élément principal, et positionné de façon à être centré (cela dépend des dimensions de l’élément de
base), nous ne verrons donc que son haut et son bas.
.horizontales::before {
display:inline-block;
top: -2%;
left: 1%;
width: 98%;
height: 104%;
background-color:black;
border-radius: 125px / 12px;
box-shadow: 0 0 8px black;
}
Remarquez qu’en jouant sur les dimensions, vous pourriez obtenir une ombre cintrée uniquement d’un côté, et même
lui donner une forme plus irrégulière à l’aide d’une légère rotation.
Par exemple, pour obtenir une unique ombre en biseau en bas à gauche, le processus est similaire, mais nous appliquons
une rotation à un élément à coins droits de façon à n’en laisser dépasser qu’une fraction :
.biseau::before {
display:inline-block;
top: 112px;
left: -2%;
width: 95%;
height:10%;
transform: rotate(-3deg);
box-shadow: 12px 8px 10px black;
}
Un effet intéressant peut être obtenu en doublant ce biseau, à l’aide d’un élément complémentaire
::after, aux caractéristiques inversées :
.biseau2::after {
display:inline-block;
top: 112px;
right: -2%;
width: 95%;
height:10%;
transform: rotate(3deg);
box-shadow: -12px 8px 10px black;
}
Enfin, il est possible de créer l’illusion d’un reflet, à l’aide d’un unique élément :
.reflet::before {
display:inline-block;
left: -5px;
top: 150px;
width: 100%;
height: 4px;
background-image: radial-gradient(black, black 11%, grey 56%, grey);
border-radius: 140px / 2px;
box-shadow: 0 0 5px #aaa, 0 0 10px #888, 0 0 15px #666;
}
Voici les résultats :
|
|---|