Créer des effets stellaires : Libèrer la puissance de Box-shadow en CSS

Box-shadow est un effet qui peut être appliqué à n'importe quel élément en CSS pour ajouter une ombre autour de cet élément. C'est comme si tu utilisais une lampe de poche dans le coin supérieur gauche de l'élément, ce qui produit une ombre sur ses bords - cette lueur crée de la profondeur et donne vie aux éléments ! Imagine que tu te trouves dans l'espace et que les étoiles scintillent : c'est le même principe, sauf qu'au lieu de la lumière cosmique, ce sont des "ombres" qui se projettent sur ta page. Il est assez facile de faire preuve de créativité avec les ombres, ce qui permet aux concepteurs de sites Web de produire des effets assez spectaculaires.

La syntaxe de Box-shadow est simple et directe : box-shadow : chaque boîte a au moins un ensemble de valeurs qui lui sont associées ; généralement, ces éléments sont disposés par rapport à l'endroit où se trouve le desiderata lorsqu'on crée quelque chose d'unique ou de complexe. Tu dois faire en sorte que les valeurs de flou et de rayon d'étalement soient petites mais facilement visibles afin qu'elles créent une belle harmonie entre elles sans nuire à la clarté ou aux détails.

Nous pourrions parler toute la journée de cet effet CSS, mais en fait, l'ombre de la boîte apportera un nouveau style et un nouvel élan à tes projets de conception ! Ça te semble intimidant ? -Pas vraiment - il te suffit de jouer avec différentes configurations jusqu'à ce que quelque chose te convienne. Ce qui est aussi génial, c'est la façon dont les conceptions plates prennent vie avec les ombres : leurs formes simples accentuent les capacités de mouvement, ce qui donne de meilleures interfaces pour les utilisateurs qui apprécient le minimalisme moderne et la fonctionnalité à la fois.

Qu'il s'agisse d'un amateur débutant dans la création d'un site Web ou d'un professionnel expérimenté souhaitant ajouter un peu de piquant à son portfolio, l'ajout d'ombres n'a plus rien de sorcier. Ce petit outil de stylisme nous permet, à nous qui ne sommes pas astronomes, de nous sentir comme des maîtres navigateurs de notre propre univers animé !

1. Ombre portée - box-shadow : 0 4px 6px rgba(0, 0, 0, 0.25)  
2. Double ombre- box-shadow : 2px 3px 3px 1px #35495ecc, -3px -3px 5px 5rgba(245,128, 23, .8) ;  
3. Ombre insérée - box-shadow : inset 3em 1em 4em black ;  
4. Ombre intérieure - box-shadow : inset -2em 3em 20em #039be5 ;  
5. Ombre extérieure - box-shadow : -4em 2em 8 16 #ec407a ;  
6. Ombre elliptique -box-shadow : ellipse 10 em 10 em 40 em #ee87dbcf ;          
7. Écart Ombre-boîte-ombre : 25vh 25vw 35 vmin jaune écart 20 ;  
8. Effet Text Stroke - box-shadow : 0 1 px 2 px redTextShadow et TextStroke skyblueOutline ;  
9. Coins arrondis-box-shadow : 0 0 15 5 mgba (60 ,78 ,89,.75) ;    
10. Effets de brillance - Box-Shadow : -2rem 2rem 1rem rgba(165, 55 77,.9) ;
    

1. Pour créer une ombre incrustée qui donne un aspect 3D aux éléments, box-shadow peut être utilisé avec des valeurs négatives pour les paramètres de flou, d'étalement et de décalage. Une excellente façon d'obtenir une interface moderne et propre !
2. Pour donner au texte ou aux boîtes un bord biseauté doux qui aide à créer plus de profondeur et de perspective, box-shadow est ton option de choix en réglant tous les paramètres sur zéro ou sur une valeur nulle. Parfait pour créer des séparations subtiles entre les contenus d'un site Web.
3. Lorsque tu travailles avec des interfaces utilisateur complexes qui comportent plusieurs chevauchements de couleurs différentes, la propriété box-shadow te permet de définir plusieurs ombres, chacune avec sa propre couleur, ce qui donne une définition et un effet pop à chaque élément contrôlé séparément !
   

• Elle a vu le jour dans le monde de la conception de sites Web en 2009.
• Selon la spécification CSS, trois propriétés interviennent dans la création d'une ombre de boîte : le "décalage horizontal", le "décalage vertical" et la couleur.
• Box-shadow est l'un des éléments les plus populaires du design moderne, utilisé pour obtenir des effets de design spectaculaires sur les bordures, les arrière-plans et le texte.
• Une fois que tu as compris les principes de base de l'ombre de la boîte, il ne te faut que quelques minutes pour créer une page Web d'aspect professionnel avec cette fonction.
• Différentes combinaisons des décalages horizontaux et verticaux peuvent être utilisées pour créer des styles d'ombres intéressants comme les ombres en creux, les ombres doubles et les ombres multiples.
• La propriété de rayon de flou permet de rendre floues des parties ou la totalité de l'ombre lorsqu'elle est réglée sur des valeurs plus importantes, ce qui donne lieu à des effets uniques qui peuvent ajouter du caractère aux pages Web.
• Des astronomes ont également rapporté avoir vu des ombres de boîtes au-dessus de galaxies lointaines, ce qui prouve que son utilisation va bien au-delà de la simple conception de sites Web quotidiens !
  

"Box-shadow" fait partie de la boîte à outils CSS depuis un certain temps. Tout a commencé lorsqu'elle a été incluse pour la première fois dans la spécification CSS 2.1 en tant que fonction expérimentale du modèle de boîte. Au départ, cette propriété de style ne permettait aux développeurs que d'appliquer une seule ombre autour d'un élément rectangulaire. Peu à peu, les développeurs se sont pris au jeu et ont découvert à quel point la propriété "Box-shadow" pouvait être polyvalente grâce à sa capacité à prendre en charge plusieurs ombres et à ajouter de la profondeur aux conceptions.

Au fur et à mesure de l'évolution des navigateurs, la "Box-shadow" a commencé à prendre forme ; elle a été prise en charge par un plus grand nombre de plates-formes, les anciennes versions ont été mises à jour, des syntaxes ont été ajoutées, les ressources des navigateurs se sont améliorées et les fonctionnalités se sont multipliées - ce qui nous a permis d'exercer un contrôle supplémentaire sur nos ombres, comme le rayon de flou et les décalages. Aujourd'hui, on a l'impression que les codeurs de tous les jours repoussent les limites en introduisant des choses comme les ombres portées sur les éléments transparents ou en utilisant des dégradés dans leurs ombres ! Tout cela a fait de la "Box-shadow" l'un des outils les plus utilisés par les développeurs frontaux de nos jours ; cependant, la compatibilité mobile étant parfois un problème, il y a encore de la place pour améliorer les implémentations des navigateurs modernes à l'avenir.

En conclusion, "Box-shadow" est une option de style extrêmement utile qui te donne un plus grand contrôle sur tes conceptions Web ainsi que d'infinies possibilités d'expression créative ! Nous avons fait beaucoup de chemin depuis son introduction initiale en tant que concept expérimental lors du lancement de CSS 2.1 - mais nous sommes sûrs que les ombres de boîtes ont encore beaucoup à offrir dans les incarnations futures !