Préréglages
floobits.com
floobits.com
🌐 Web et technique
Réglez une ou plusieurs ombres, voyez le rendu en direct et copiez la déclaration box-shadow prête à coller.
Par Jimenez Julien, éditeur de Floobits.com · mis à jour le
La propriété CSS box-shadow ajoute une ombre autour d'un élément. Chaque ombre se décrit par cinq valeurs : le décalage horizontal et vertical, le rayon de flou, l'étalement (qui agrandit ou réduit l'ombre) et la couleur. Le mot inset place l'ombre à l'intérieur de l'élément, pour un effet de creux. Il est possible d'empiler plusieurs ombres en les séparant par des virgules.
Le générateur affiche le rendu en direct sur un élément dont vous réglez la couleur, le fond et l'arrondi. Chaque couche dispose de ses propres réglages et d'une opacité qui produit une couleur rgba. Les préréglages (ombre douce, ombre élevée en trois couches, ombre nette, néomorphisme, ombre intérieure, lueur colorée, contour) servent de point de départ. Le code produit est une déclaration CSS standard, compatible avec tous les navigateurs actuels.
Dans la réalité, l'ombre d'un objet se compose d'une zone nette près de lui et d'une zone diffuse plus loin. Deux ou trois couches de flou croissant imitent ce comportement et paraissent plus naturelles.
box-shadow suit la boîte rectangulaire de l'élément (avec son arrondi), alors que drop-shadow suit le contour réel du contenu, y compris les zones transparentes d'une image PNG ou SVG.
Des ombres très floues sur de grandes surfaces ou de nombreux éléments animés peuvent coûter en performance. Modérez le flou et évitez d'animer directement box-shadow.