Text-shadow en CSS3 implémente l'effet d'ombre de texte (exemple de code)-tutoriel CSS-php.cn

Text-shadow en CSS3 implémente l'effet d'ombre de texte (exemple de code)

易达

Libérer： 2020-06-06 11:58:57

original

2766 Les gens l'ont consulté

Objectifs de cet article :

1. Maîtriser l'utilisation de text-shadow

Question :

Utiliser pure div+css pour obtenir les effets suivants

Text-shadow en CSS3 implémente leffet dombre de texte (exemple de code)

Notes supplémentaires :

1 Il y a 4 mots au total : Croyez-vous que vous pouvez

3. L'espacement entre le texte de droite et le texte de gauche est de 20px

4 La taille et la largeur de l'image sont : 100px

5. l'ombre est de 15px, la quantité de traduction verticale est de 2 et le flou est de 20 et la couleur est #333333

Les opérations spécifiques sont les suivantes :

1 Préparer le matériel. , créez un nouveau répertoire d'images et enregistrez les fichiers d'images dans ce répertoire pour une gestion facile. Les matériaux sont

2. . Créez index.html et écrivez l'architecture. Comment analyser l'architecture

Analyse de l'idée :

1 L'architecture est divisée en parties supérieure et inférieure. Mots anglais, l'un est Belive et l'autre est vous-même, mais le texte a un effet d'ombre

2. La partie inférieure de l'architecture affiche également 2 mots anglais + une image. est Can. Le texte a également besoin d'un effet d'ombre

Selon l'analyse, nous obtenons le code suivant

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8">
<title>text-shadow实现文字阴影</title>

</head> 
<body>
<div class="container">
    <div class="top">
        <strong class="word">Belive</strong>
        <strong class="word rword">Yourself</strong>
    </div>
    <div class="bottom">
        <strong class="word">You</strong>
        <strong class="word rword">Can</strong>
        <img  src="images/Text-shadow en CSS3 implémente leffet dombre de texte (exemple de code)" / alt="Text-shadow en CSS3 implémente l'effet d'ombre de texte (exemple de code)" >
    </div>
</div>
</body>
</html>

Copier après la connexion

3 Écrivez le style, créez un répertoire CSS et créez un. nouveau fichier index.css dedans. L'analyse des idées en CSS est la suivante

Analyse de la pensée :

1.container *

Analyse des idées

1. Afin de définir les styles communs de tous les éléments du conteneur, nous pouvons écrire ces codes communs dans le style .container *

Ajoutez donc le code suivant à index.css :

.container *{
    padding:0;
    margin:0;
}

Copier après la connexion

2.texte .word

Analyse de l'idée :

1 Selon les exigences, la taille du texte est de 86 pixels et a un effet d'ombre selon les paramètres d'ombre requis. transfer Le code est text-shadow : 15px 2px 20px #333333;

Ajoutez donc le code à index.css comme suit

.word{
    font-size: 86px;
    text-shadow: 15px 2px 20px #333333;
}

Copier après la connexion

3 Le texte à droite de rword

Analyse des idées :

1 Selon les exigences, la distance entre le texte de droite et le texte de gauche est de 20px, donc margin-left:20px;

Ajoutez donc le code à indexer. .css comme suit

.rword{
     margin-left:20px;
}

Copier après la connexion

4. Paramètres de l'image

Analyse de l'idée :

1 Selon les exigences, largeur = 100px, puis la distance qui les sépare. et le texte à gauche est 10px

Alors ajoutez index.css Le code est le suivant

.bottom img{
    margin-left:10px;
    width:100px;
}

Copier après la connexion

Jusqu'à présent, tout le contenu d'index.css est le suivant :

.container *{
    padding:0;
    margin:0;
}

.word{
    font-size: 86px;
    text-shadow: 15px 2px 20px #333333;
}

.rword{
    margin-left:20px;
}
.bottom img{
    margin-left:10px;
    width:100px;
}

Copier après la connexion

Ensuite, introduisez index.css dans index.html

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8">
<title>text-shadow实现文字阴影</title>
<link rel="stylesheet" href="css/index.css" />
</head> 
<body>
<div class="container">
    <div class="top">
        <strong class="word">Belive</strong>
        <strong class="word rword">Yourself</strong>
    </div>
    <div class="bottom">
        <strong class="word">You</strong>
        <strong class="word rword">Can</strong>
        <img  src="images/Text-shadow en CSS3 implémente leffet dombre de texte (exemple de code)" / alt="Text-shadow en CSS3 implémente l'effet d'ombre de texte (exemple de code)" >
    </div>
</div>
</body>
</html>

Copier après la connexion

Les résultats en cours d'exécution sont les suivants :

Jusqu'à présent, nous avons atteint toutes les exigences

Résumé :

1. Apprentissage L'utilisation de text-shadow est expliquée. Le format principal est : text-shadow : décalage horizontal, décalage vertical, couleur de flou

Le décalage peut être positif ou négatif, positif signifie horizontalement vers la gauche ou verticalement vers le bas. Les nombres négatifs sont à l'opposé

J'espère que cet article pourra vous apporter de l'aide, merci ! ! !

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!