Home-theater-designers
CSS est le langage utilisé par les développeurs pour styliser une page Web. Il contrôle la façon dont les éléments HTML sont affichés sur un écran, sur papier ou dans toute autre forme de média. CSS fournit le pouvoir de personnalisation complet pour styliser la page Web à votre propre image.
Vous pouvez modifier la couleur d'arrière-plan d'un élément, le style de police, la couleur de police, l'ombre de la boîte, la marge et de nombreuses autres propriétés à l'aide de CSS. Nous vous expliquerons quelques utilisations efficaces de box-shadow dans ce guide.
Qu'est-ce que CSS box-shadow ?
Les boîte ombre La propriété est utilisée pour appliquer une ombre aux éléments HTML. C'est l'une des propriétés CSS les plus utilisées pour styliser des boîtes ou des images.
Syntaxe CSS :
box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];- décalage horizontal : Si le décalage horizontal est positif, l'ombre sera à droite de la boîte. Et si le décalage horizontal est négatif, l'ombre sera à gauche de la boîte.
- décalage vertical : Si le décalage vertical est positif, l'ombre sera en dessous de la boîte. Et si le décalage vertical est négatif, l'ombre sera au-dessus de la boîte.
- rayon de flou : Plus la valeur est élevée, plus l'ombre sera floue.
- rayon d'épandage : Cela signifie à quel point l'ombre doit s'étendre. Les valeurs positives augmentent la propagation de l'ombre, les valeurs négatives diminuent la propagation.
- Couleur: Il signifie la couleur de l'ombre. En outre, il prend en charge n'importe quel format de couleur comme rgba, hex ou hsla.
Les paramètres de flou, d'étalement et de couleur sont facultatifs. La partie la plus intéressante de box-shadow est que vous pouvez utiliser une virgule pour séparer les valeurs de box-shadow un certain nombre de fois. Cela peut être utilisé pour créer plusieurs bordures et ombres sur les éléments.
1. Ajoutez une ombre de boîte Dim à gauche, à droite et en bas de la boîte
Vous pouvez ajouter des ombres très faibles sur trois côtés (gauche, droite et bas) de la boîte en utilisant le CSS box-shadow suivant avec votre élément HTML cible :
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;Sortir:
2. Ajoutez une ombre de boîte Dim à tous les côtés
Vous pouvez ajouter des ombres claires sur tous les côtés de la boîte en utilisant le CSS box-shadow suivant avec votre élément HTML cible :
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;Sortir:
3. Ajoutez une ombre de boîte mince aux côtés inférieur et droit
Vous pouvez ajouter des ombres en bas et à droite de la boîte en utilisant le CSS box-shadow suivant avec votre élément HTML cible :
transfert d'un lecteur google à un autre
box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;Sortir:
4. Ajoutez une ombre de boîte sombre à tous les côtés
Vous pouvez ajouter une ombre noire sur tous les côtés de la boîte en utilisant le CSS box-shadow suivant avec votre élément HTML cible :
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;Sortir:
5. Ajouter une ombre étendue sur tous les côtés
Vous pouvez ajouter une ombre étalée sur tous les côtés de la boîte à l'aide de la commande suivante avec votre élément HTML cible :
box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;Sortir:
6. Ajoutez une ombre à bordure fine sur tous les côtés
Vous pouvez ajouter une simple ombre de bordure sur tous les côtés de la boîte en utilisant le CSS suivant avec votre élément HTML cible :
box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;Sortir:
7. Ajoutez une ombre de boîte aux côtés inférieur et gauche
Vous pouvez ajouter une ombre en bas et à gauche de la boîte en utilisant le CSS box-shadow suivant avec votre élément HTML cible :
box-shadow: rgba(0, 0, 0, 0.1) -4px 9px 25px -6px;Sortir:
8. Ajoutez une ombre de boîte Dim sur les côtés supérieur et gauche, une ombre sombre sur les côtés inférieur et droit
Vous pouvez ajouter une ombre claire en haut et à gauche de la boîte ainsi qu'une ombre sombre en bas et à droite de la boîte en utilisant le CSS suivant avec votre élément HTML cible :
box-shadow: rgba(136, 165, 191, 0.48) 6px 2px 16px 0px, rgba(255, 255, 255, 0.8) -6px -2px 16px 0px;Sortir:
9. Ajoutez une ombre de bordure fine et colorée sur tous les côtés
Vous pouvez ajouter une simple ombre de bordure colorée sur tous les côtés de la boîte en utilisant le CSS box-shadow suivant avec votre élément HTML cible :
box-shadow: rgba(3, 102, 214, 0.3) 0px 0px 0px 3px;Sortir:
10. Ajoutez plusieurs ombres de bordure colorées sur les côtés inférieur et gauche de la boîte
Vous pouvez ajouter plusieurs ombres de bordure colorées en bas et à gauche de la boîte en utilisant le CSS suivant avec votre élément HTML cible :
box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;Sortir:
enregistrer une vidéo à partir d'un site Web
11. Ajoutez plusieurs ombres de bordure colorées en bas
Vous pouvez ajouter plusieurs ombres de bordure colorées au bas de la boîte en utilisant le CSS box-shadow suivant avec votre élément HTML cible :
box-shadow: rgba(240, 46, 170, 0.4) 0px 5px, rgba(240, 46, 170, 0.3) 0px 10px, rgba(240, 46, 170, 0.2) 0px 15px, rgba(240, 46, 170, 0.1) 0px 20px, rgba(240, 46, 170, 0.05) 0px 25px;Sortir:
12. Ajoutez plusieurs ombres de bordure colorées sur les côtés inférieur et droit de la boîte
Vous pouvez ajouter plusieurs ombres de bordure colorées en bas et à droite de la boîte en utilisant le CSS suivant avec votre élément HTML cible :
box-shadow: rgba(240, 46, 170, 0.4) 5px 5px, rgba(240, 46, 170, 0.3) 10px 10px, rgba(240, 46, 170, 0.2) 15px 15px, rgba(240, 46, 170, 0.1) 20px 20px, rgba(240, 46, 170, 0.05) 25px 25px;Sortir:
13. Ajoutez des ombres claires sur les côtés gauche et droit, étalez l'ombre vers le bas
Vous pouvez ajouter des ombres claires sur les côtés gauche et droit et étendre l'ombre au bas de la boîte à l'aide du CSS box-shadow suivant avec votre élément HTML cible :
box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;Sortir:
Intégrer CSS avec une page HTML
Maintenant que vous savez comment ajouter des effets d'ombre de boîte à l'aide de CSS, vous pouvez facilement les intégrer aux éléments HTML de plusieurs manières.
En rapport: 11 outils utiles pour vérifier, nettoyer et optimiser les fichiers CSS
Vous pouvez l'intégrer dans la page HTML elle-même ou la joindre en tant que document séparé. Il existe trois façons d'inclure du CSS dans un document HTML :
CSS interne
Les feuilles de style intégrées ou internes sont insérées dans le section d'un document HTML à l'aide de la élément. Vous pouvez créer n'importe quel nombre de éléments dans un document HTML, mais ils doivent être placés entre le et Mots clés. Voici un exemple montrant comment utiliser le CSS interne avec un document HTML :
CSS box-shadow
.heading {
text-align: center;
}
.image-box {
display: block;
margin-left: auto;
margin-right: auto;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
Style 4
CSS en ligne
Le CSS en ligne est utilisé pour ajouter des règles de style uniques à un élément HTML. Il peut être utilisé avec un élément HTML via le style attribut. L'attribut style contient des propriétés CSS sous la forme de 'valeur de la propriété' séparés par un point-virgule ( ; ).
Connexes : Apprenez à créer des sites Web en deux dimensions avec une grille CSS
Toutes les propriétés CSS doivent être sur une seule ligne, c'est-à-dire qu'il ne doit y avoir aucun saut de ligne entre les propriétés CSS. Voici un exemple illustrant comment utiliser le CSS en ligne avec un document HTML :
CSS box-shadow
Style 4
CSS externe
CSS externe est le moyen le plus idéal pour appliquer des styles aux documents HTML. Une feuille de style externe contient toutes les règles de style dans un document séparé (fichier .css), ce document est ensuite lié au document HTML à l'aide de la étiqueter. Cette méthode est la meilleure méthode pour définir et appliquer des styles aux documents HTML, car le fichier HTML concerné nécessite des modifications minimales dans le balisage. Voici un exemple illustrant comment utiliser un CSS externe avec un document HTML :
Créez un nouveau fichier CSS avec le .css extension. Ajoutez maintenant le code CSS suivant dans ce fichier :
.heading {
text-align: center;
}
.image-box {
display: block;
margin-left: auto;
margin-right: auto;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}Enfin, créez un document HTML et ajoutez le code suivant à l'intérieur de ce document :
puis-je jouer à pokemon go sur mon ordinateur
CSS box-shadow
Style 4
Notez que le fichier CSS est lié au document HTML via balise et href attribut.
Les trois méthodes ci-dessus (CSS interne, CSS en ligne et CSS externe) afficheront la même sortie-
Rendez votre page Web élégante avec CSS
En utilisant CSS, vous avez un contrôle total sur le style de votre page Web. Vous pouvez personnaliser chaque élément HTML à l'aide de diverses propriétés CSS. Des développeurs du monde entier contribuent aux mises à jour CSS, et ce depuis sa sortie en 1996. En tant que tels, les débutants ont beaucoup à apprendre !
Heureusement, CSS est adapté aux débutants. Vous pouvez obtenir une excellente pratique en commençant par quelques commandes simples et en voyant où votre créativité vous mène.
Partager Partager Tweeter E-mail 10 exemples de code CSS simples que vous pouvez apprendre en 10 minutesBesoin d'aide avec CSS ? Essayez ces exemples de code CSS de base pour commencer, puis appliquez-les à vos propres pages Web.
Lire la suite Rubriques connexes- La programmation
- Création de sites web
- CSS
Yuvraj est un étudiant de premier cycle en informatique à l'Université de Delhi, en Inde. Il est passionné par le développement Web Full Stack. Quand il n'écrit pas, il explore la profondeur de différentes technologies.
Plus de Yuvraj ChandraAbonnez-vous à notre newsletter
Rejoignez notre newsletter pour des conseils techniques, des critiques, des ebooks gratuits et des offres exclusives !
Cliquez ici pour vous abonner