recherche

Maison  >  Article  >  interface Web  >  Comment créer une ombre dégradée en utilisant CSS ?

Comment créer une ombre dégradée en utilisant CSS ?

王林
王林avant
2023-08-27 23:41:061219parcourir

Comment créer une ombre dégradée en utilisant CSS ?

Alors que le Web continue d'évoluer, créer une belle interface utilisateur est l'une des tâches les plus importantes pour augmenter l'engagement des clients sur votre site Web. Une façon d'améliorer l'apparence de votre front-end consiste à appliquer des ombres dégradées en CSS. Les deux méthodes les plus importantes pour appliquer un ombrage dégradé sont les dégradés linéaires et les dégradés radiaux.

Les ombres dégradées peuvent être utilisées pour attirer l'attention de l'utilisateur sur des informations spécifiques, appliquer des effets de survol ou de mise au point, ou donner à un site Web une apparence Web3. Dans ce didacticiel, nous analyserons deux nuances de dégradé avec des exemples pratiques.

Nous utiliserons deux concepts CSS importants pour obtenir cet effet, l'un est l'attribut filter et l'autre est la pseudo-classe ::after. La pseudo classe sera utilisée pour créer un faux arrière-plan, tandis que l'attribut filter sera utilisé pour appliquer un effet de flou à l'arrière-plan environnant.

Méthode 1 : Ombre à dégradé linéaire

Dans cet exemple, nous verrons comment appliquer un effet d'ombre dégradé linéaire sur une carte.

Grammaire

.classname::after{	
	background: linear-gradient(direction, color1, [color2, color3.......]);
	inset: -0.5rem;
	filter: blur(25px);
	.......
}

Parmi eux, classname fait référence à la classe attribuée à l'étiquette donnée, et l'attribut direction indique dans quelle direction la disposition linéaire des couleurs doit être disposée. Cela peut être fourni sous forme de "deg" ou en utilisant une chaîne prédéfinie (par exemple "à droite").

Algorithme

Étape 1 : Créez le squelette du document HTML du site Web et spécifiez les noms de classe pour les balises qui nécessitent des effets de dégradé.

Étape 2 : Utilisez la pseudo-classe ::after avec le même nom de classe que celui attribué à la balise.

Étape 3 : Remplissez l'arrière-plan de la pseudo-classe avec la couleur de dégradé souhaitée à l'aide de la fonction CSS Linear−gradient().

Étape 4 : Pour garantir que la pseudo-classe ne se superpose jamais à la classe d'origine, ajoutez un attribut z−index à la pseudo-classe avec une valeur inférieure à la valeur attribuée à la classe d'origine.

Étape 5 : Ajoutez un petit attribut d'encart à la pseudo-classe afin que la classe d'origine ne recouvre pas complètement l'arrière-plan.

Étape 6 : Appliquez enfin l'effet d'ombre dégradé et appliquez le flou aux pseudo-composants.

Exemple

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Linear Gradient Shadow</title>
</head>
<body>
    <div class="gradient">
        <h1>Welcome to Tutorials Point</h1>
    </div>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .gradient{
            margin-top: 20px;
            margin-left: 5%;
            width: 90%;
            position: relative;
            border-radius: 10px;
            padding-top: 15px;
            padding-bottom: 15px;
            padding-right: 10px;
            padding-left: 10px;
            background-color: black;
        }
        h1{
            color: white;
            text-align: center;
        }
        .gradient::after{
            content: "";
            position: absolute;
            z-index: -100;
            background: linear-gradient(to right, blue, cyan,lime,  green, yellow, orange, red);
            inset: -0.5rem;
            filter: blur(25px);
        }
    </style>
</body>
</html>

Méthode 2 : Ombre à dégradé radial

Dans cet exemple, nous verrons comment appliquer l'effet Ombre Dégradée Radiale au même effet de carte et observer les changements.

Grammaire

.classname::after{	
	background: radial-gradient(color1, [color2, color3.......]);
	inset: -0.5rem;
	filter: blur(25px);
	.......
}

Algorithme

Étape 1 : Créez le squelette du document HTML du site Web et spécifiez les noms de classe pour les balises qui nécessitent des effets de dégradé.

Étape 2 : Utilisez la pseudo-classe ::after avec le même nom de classe que celui attribué à la balise.

Étape 3 : Remplissez l'arrière-plan de la pseudo-classe avec la couleur de dégradé souhaitée à l'aide de la fonction CSS Radial−gradient().

Étape 4 : Pour garantir que la pseudo-classe ne se superpose jamais à la classe d'origine, ajoutez un attribut z−index à la pseudo-classe avec une valeur inférieure à la valeur attribuée à la classe d'origine.

Étape 5 : Ajoutez un petit attribut d'encart à la pseudo-classe afin que la classe d'origine ne recouvre pas complètement l'arrière-plan.

Étape 6 : Appliquez enfin l'effet d'ombre dégradé et appliquez le flou au pseudo-composant.

Exemple

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Radial Gradient Shadow</title>
</head>
<body>
    <div class="gradient">
        <h1>Welcome to Tutorials Point</h1>
    </div>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .gradient{
            margin-top: 20px;
            margin-left: 5%;
            width: 90%;
            position: relative;
            padding-top: 50px;
            padding-bottom: 50px;
            border-radius: 10px;
            padding-right: 10px;
            padding-left: 10px;
            background-color: black;
        }
        h1{
            color: white;
            text-align: center;
        }
        .gradient::after{
            content: "";
            position: absolute;
            z-index: -100;
            background: radial-gradient(yellow, red, blue);
            inset: -1rem;
            filter: blur(10px);
        }
    </style>
</body>
</html>

Conclusion

La couleur du dégradé radial provient du centre de l'étiquette, comme vous pouvez le voir dans l'exemple ci-dessus, le jaune est entièrement recouvert par le fond noir, tandis que quelques traces de rouge se trouvent au milieu du côté de la carte. En revanche, dans un dégradé linéaire, aucune superposition n'est observée car elle répartit toutes les couleurs uniformément sur tous les bords selon la direction fournie.

Nous pouvons également ajuster les valeurs d'encart et de flou pour augmenter ou diminuer la zone couverte par l'effet de dégradé. Des valeurs plus négatives rendent le dégradé plus visible, tandis que des valeurs de flou rendent l'effet plus étalé sur les côtés.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

css html Filter 字符串 伪类 算法 ui web3
Déclaration：
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer
Article précédent：Créer des menus de navigation de pilules à onglets et de pilules verticales dans BootstrapArticle suivant：Créer des menus de navigation de pilules à onglets et de pilules verticales dans Bootstrap

Articles Liés

Voir plus