4 effets de survol cool qui utilisent l'ombre de texte CSS

Dans l'article précédent, nous avons discuté de la façon d'utiliser les propriétés d'arrière-plan CSS pour créer des effets de volants sympas. Cette fois, nous nous concentrerons sur la propriété CSS text-shadow et explorerons des effets de volants plus intéressants. Vous vous demandez peut-être comment l'ajout d'ombres au texte peut avoir un effet sympa, mais le fait est: nous ne créons pas réellement d'ombres pour ces effets de survol du texte.

Série d'effets de volants cool:

1. Utilisez des propriétés d'arrière-plan pour obtenir un effet de survol cool
2. Utilisez CSS Text Shadow pour obtenir un effet de survol cool (votre emplacement actuel!)
3. Utilisez des recadrage de fond, du masquage et de la 3D pour obtenir des effets de survol cool

text-shadow mais pas d'ombre de texte?

Permettez-moi de supprimer la confusion par l'effet de survol que nous construire dans la démo suivante:

Sans regarder le code, beaucoup d'entre vous penseront intuitivement que pour chaque effet de survol, nous copierons le texte et l'animons indépendamment. Maintenant, si vous regardez le code, vous constaterez qu'aucun texte dans le HTML n'est réellement copié. Avez-vous remarqué content: "text" n'est pas utilisé dans CSS?

Les couches de texte sont entièrement créées avec text-shadow !

Effet de survol n ° 1

Décomposons le code CSS:

 .Hover-1 {
  hauteur de ligne: 1.2EM;
  Couleur: # 0000;
  Text-shadow: 
    0 0 # 000, 
    0 1.2EM # 1095C1;
  débordement: caché;
  transition: .3s;
}
.Hover-1: Hover {
  Text-shadow: 
    0 -1.2em # 000, 
    0 0 # 1095C1;
}

La première chose à noter est que pour masquer le texte réel, je définis la couleur du texte réel pour être transparent (en utilisant #0000 ). Après cela, j'utilise text-shadow pour créer deux ombres, chacune ne définit que deux valeurs de longueur. Cela signifie qu'il n'y a pas de rayon flou, résultant en une ombre claire et nette qui produit efficacement une copie du texte avec la couleur spécifiée.

C'est pourquoi j'ai affirmé dans l'introduction qu'il n'y avait pas d'ombre ici. Ce que nous faisons n'est pas tant une ombre «classique» qu'un moyen facile de copier du texte.

Nous avons deux couches de texte que nous déplacons lorsqu'ils planaient. Si nous masquons le débordement, le texte en double sera invisible et le déplacera, cela donne l'impression que le texte réel a été remplacé par un autre texte. C'est l'astuce principale pour que tous les exemples de cet article fonctionnent correctement.

Optimions le code. J'ai utilisé la valeur 1.2em plusieurs fois pour définir la hauteur et le décalage de l'ombre, ce qui en fait un candidat idéal pour les propriétés personnalisées CSS (nous l'appelons --h ):

 .Hover-1 {
  --H: 1.2EM;

  hauteur de ligne: var (- h);
  Couleur: # 0000;
  Text-shadow: 
    0 0 # 000, 
    0 var (- h) # 1095C1;
  débordement: caché;
  transition: .3s;
}
.Hover-1: Hover {
  Text-shadow: 
    0 calc (-1 * var (- h)) # 000, 
    0 0 # 1095C1;
}

Nous pouvons également simplifier davantage le code en utilisant plus de calculs calc() afin que nous n'utilisions que text-shadow une fois. (Nous avons fait la même chose dans le post précédent.)

 .Hover-1 {
  --H: 1.2EM;   

  hauteur de ligne: var (- h);
  Couleur: # 0000;
  Text-shadow: 
    0 calc (-1 * var (--_ t, 0em)) # 000, 
    0 calc (var (- h) - var (--_ t, 0em)) # 1095C1;
  débordement: caché;
  transition: .3s;
}
.Hover-1: Hover {
  --_ t: var (- h);
}

Si vous vous demandez pourquoi j'ajoute un soulignement à la variable --_t , ce n'est qu'une convention de dénomination que j'utilise pour distinguer les variables (telles que --h ) que les utilisateurs peuvent mettre à jour des variables internes (telles que --_t ) uniquement utilisées à des fins d'optimisation et ne doivent pas être modifiées. En d'autres termes, les soulignements font partie du nom de la variable et n'ont aucune signification particulière.

Nous pouvons également mettre à jour le code pour obtenir l'effet inverse, où le texte en double glisse du haut:

Nous n'avons fait qu'une petite mise à jour de text-shadow - nous n'avons rien touché d'autre!

Effet de survol n ° 2

Pour cet effet, nous animerons deux propriétés: text-shadow et background . En ce qui concerne text-shadow nous avons encore deux couches comme l'exemple précédent, mais cette fois, nous ne déplacerons qu'un d'entre eux tout en définissant la couleur de l'autre couche à transparent pendant le swap.

 .Hover-2 {
  /* haut*/
  --H: 1.2EM;

  hauteur de ligne: var (- h);
  Couleur: # 0000;
  Text-shadow: 
    0 var (--_ t, var (- h)) #fff,
    0 0 var (--_ c, # 000);
  transition: 0,3S;
}
.Hover-2: Hover {
  --_ t: 0;
  --_ C: # 0000;
}

En survol, nous déplaçons la couche de texte blanche vers le haut tout en changeant la couleur de l'autre couche en transparente. Pour ce faire, nous avons ajouté une animation background-size appliquée aux gradients:

Enfin, nous ajoutons overflow: hidden pour rendre l'animation visible uniquement dans les limites de l'élément:

 .Hover-2 {
  /* haut*/
  --H: 1.2EM;

  hauteur de ligne: var (- h);
  Couleur: # 0000;
  Text-shadow: 
    0 var (--_ t, var (- h)) #ffff,
    0 0 var (--_ c, # 000);
  arrière-plan: 
    Gradient linéaire (# 1095C1 0 0) 
    en bas / 100% var (--_ d, 0) sans répétition;
  débordement: caché;
  transition: 0,3S;
}
.Hover-2: Hover {
  --_ D: 100%;
  --_ t: 0;
  --_ C: # 0000;
}

Ce que nous faisons ici, c'est de combiner le CSS text-shadow et les propriétés background pour créer un effet de survol cool. De plus, nous pouvons utiliser des variables CSS pour optimiser le code.

Si la grammaire d'arrière-plan est bizarre, je vous recommande fortement de lire mon article précédent. Le prochain effet de survol s'appuie également sur l'animation que j'ai détaillée dans ce post. À moins que vous ne connaissiez les compétences de fond de CSS, je vous suggère de lire cet article pour plus d'informations de base avant de continuer à lire cet article.

Dans les articles précédents, vous nous avez montré comment créer un effet de survol en utilisant une seule variable - pouvez-vous le faire ici?

Oui, absolument! Nous pouvons en effet utiliser la même technique de commutation à sec afin que nous n'ayons besoin que de gérer une propriété CSS personnalisée qui ne change que les valeurs lors du plan de vol:

 .Hover-2 {
  /* haut*/
  --H: 1.2EM;

  hauteur de ligne: var (- h);
  Couleur: # 0000;
  Text-shadow: 
    0 var (--_ i, var (- h)) #fff,
    0 0 RGB (0 0 0 / Calc (var (--_ i, 1) * 100%));
  arrière-plan: 
    Gradient linéaire (# 1095C1 0 0) 
    en bas / 100% calc (100% - var (—_ i, 1) * 100%) sans répétition;
  débordement: caché;
  transition: 0,3S;
}
.Hover-2: Hover {
  --_ i: 0;
}

Effet de survol n ° 3

Cet effet de survol n'est rien de plus qu'une combinaison de deux effets que nous avons faits: le deuxième effet de survol dans le post précédent et le premier effet de survol de cet article.

 .Hover-3 {
  /* couleur*/
  --c: # 1095C1;
  /* haut*/
  --H: 1.2EM;

  / * Le premier effet de survol de cet article * /
  hauteur de ligne: var (- h);  
  Couleur: # 0000;
  débordement: caché;
  Text-shadow: 
    0 calc (-1 * var (--_ t, 0em)) var (- c), 
    0 calc (var (- h) - var (--_ t, 0em)) #fff;
  / * Le deuxième effet de survol dans le post précédent * /
  arrière-plan: 
    gradient linéaire (var (- c) 0 0) sans répétition 
    calc (200% - var (--_ p, 0%)) 100% / 200% var (--_ p, .08em);
  transition: .3s var (--_ s, 0s), position d'arrière-plan .3s calc (.3s - var (--_ s, 0s));
}
.Hover-3: Hover {
  --_ t: var (- h);
  --_ P: 100%;
  --_ s: .3s
}

Tout ce que j'ai fait, c'est copier et coller les effets des autres exemples et faire quelques ajustements mineurs au nom de la variable. Lorsqu'ils sont combinés, ils créent un effet de survol net! À première vue, cet effet peut sembler complexe et difficile à réaliser, mais en fin de compte, il combine simplement deux effets relativement simples en un seul.

Si nous considérons les optimisations antérieures que nous avons terminées, il devrait également être une tâche simple pour optimiser le code à l'aide de la technologie de variable de bascule sèche:

 .Hover-3 {
  /* couleur*/
  --c: # 1095C1;
  /* haut*/
  --H: 1.2EM;

  hauteur de ligne: var (- h);  
  Couleur: # 0000;
  débordement: caché;
  Text-shadow: 
    0 calc (-1 * var (- h) * var (--_ i, 0)) var (- c), 
    0 calc (var (- h) * (1 - var (--_ i, 0))) #fff;
  arrière-plan: 
    gradient linéaire (var (- c) 0 0) sans répétition
    calc (200% - var (--_ i, 0) * 100%) 100% / 200% calc (100% * var (--_ i, 0) .08em);
  transition: .3s calc (var (--_ i, 0) * .3s), position d'arrière-plan .3s calc (.3s - calc (var (--_ i, 0) * .3s));
}
.Hover-3: Hover {
  --_ i: 1;
}

Effet de survol n ° 4

Cet effet de survol est une amélioration du deuxième effet de survol. Tout d'abord, introduisons une animation clip-path pour afficher l'une des calques de texte, puis le déplacez:

Voici une meilleure explication pour mieux comprendre ce qui se passe:

Initialement, nous avons utilisé inset(0 0 0 0) , ce qui est similaire à overflow: hidden , car nous ne voyons que le texte réel. En survol, nous mettons à jour la troisième valeur (représentant le décalage inférieur) avec une valeur négative égale à la hauteur pour afficher la couche de texte placée en bas.

De là, nous pouvons ajouter cela au deuxième effet de survol que nous avons fait dans cet article, et voici ce que nous obtenons:

Nous nous rapprochons de plus en plus! Notez que nous devons d'abord exécuter clip-path , puis tout le reste. Pour ce faire, nous pouvons ajouter un délai à toutes les propriétés de survol, à l'exception de clip-path :

 Transition: 0,4 s 0,4 s, clip path 0,4S;

Lorsque la souris est émue, nous faisons le contraire:

 Transition: 0,4 s, clip path 0,4S 0,4S;

La touche finale consiste à ajouter une box-shadow pour créer l'effet coulissant du rectangle bleu. Malheureusement, background ne produit pas cet effet, car l'arrière-plan est recadré dans la zone de contenu par défaut. Dans le même temps, box-shadow peut aller au-delà de la zone de contenu.

 .Hover-4 {
  /* couleur*/
  --c: # 1095C1;
  /* haut*/
  --H: 1.2EM;

  hauteur de ligne: var (- h);
  Couleur: # 0000;
  Text-shadow: 
    0 var (--_ t, var (- h)) #fff,
    0 0 var (--_ c, # 000);
  Box-shadow: 0 var (--_ t, var (- h)) var (- c);
  Clip-path: inset (0 0 0 0);
  Contexte: Linear-Gradient (var (- C) 0 0) 0 var (--_ t, var (- h)) sans répétition;
  Transition: 0,4 s, clip path 0,4S 0,4S;
}
.Hover-4: Hover {
  --_ t: 0;
  --_ C: # 0000;
  Clip-path: inset (0 0 calc (-1 * var (- h)) 0);
  Transition: 0,4 s 0,4 s, clip path 0,4S;
}

Si vous regardez attentivement box-shadow , vous constaterez qu'il a la même valeur que le calque de texte blanc à l'intérieur text-shadow . C'est logique, car les deux doivent être déplacés de la même manière. Les deux glisseront vers le haut. box-shadow est alors derrière l'élément et text-shadow est en haut.

Voici une démonstration avec quelques modifications pour visualiser comment les couches se déplacent:

Attendez, la syntaxe d'arrière-plan est légèrement différente de celle utilisée dans le deuxième effet de survol!

Bonne vue! Oui, nous utilisons différentes techniques d'arrière-plan pour produire le même effet. Au lieu d'animer la taille de 0% à 100%, nous animons la position.

Si nous ne spécifions pas la taille sur le gradient, il occupera la largeur et la hauteur entières par défaut. Puisque nous connaissons la hauteur de l'élément ( --h ), nous pouvons créer un effet glissant en mettant à jour la position de 0 var(--h) à 0 0 .

 .Hover-4 {
  / * ... * /
  Contexte: Linear-Gradient (var (- C) 0 0) 0 var (--_ t, var (- h)) sans répétition;
}
.Hover-4: Hover {
  --_ t: 0;
}

Nous pouvons utiliser une animation background-size pour obtenir le même effet, mais nous avons simplement ajouté une autre astuce à notre liste de trucs!

Dans la démo, vous avez également utilisé inset(0 0 1px 0) … Pourquoi?

J'ajoute ou supprime parfois des pixels ou des pourcentages ici pour perfectionner tout ce qui n'a pas l'air très bien. Dans ce cas, une mauvaise ligne apparaît en bas, l'ajout de 1px le supprimera.

Et l'optimisation des variables de commutation à sec?

Je vais vous laisser cette tâche! Après avoir lu ces quatre effets de survol et les articles précédents, vous devriez être en mesure de mettre à jour le code afin qu'il n'utilise qu'une seule variable. J'aimerais voir votre tentative dans les commentaires!

maintenant vous!

Permettez-moi de partager le dernier effet de survol, qui est une autre version de l'effet précédent. Pouvez-vous découvrir comment il est implémenté sans regarder le code? C'est un excellent exercice, alors ne trichez pas!

Résumer

Nous avons examiné de nombreux exemples qui montrent comment l'utilisation d'un élément et quelques lignes de CSS est suffisante pour créer un effet de survol plutôt complexe sur les éléments de texte - aucun pseudo-éléments n'est nécessaire! Nous sommes même en mesure de combiner plusieurs technologies pour réaliser des animations plus complexes avec des efforts plus petits.

Si vous êtes intéressé à creuser ce qui est au-delà de ces quatre effets de survol de l'ombre de texte dans cet article, consultez ma collection de 500 effets de survol, où j'explore une variété de techniques différentes.

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!