ATOZ CSS Astuce rapide: en utilisant le volant et la hauteur

Cet article fait partie de la série Atoz CSS. Vous pouvez trouver d'autres entrées dans cette série ici: Afficher la série complète Afficher les enregistrements vidéo et texte complets des effets de survol

Bienvenue dans notre série Atoz CSS! Dans cette série, je vais commencer par des lettres dans l'alphabet et explorer différentes valeurs (et propriétés) CSS. Nous savons que parfois les captures d'écran ne suffisent pas, et dans ce post, nous avons ajouté un nouveau conseil pour vous sur les effets de la volonté.

h signifie planer et hauteur

concernant l'effet de survol, j'ai déjà introduit beaucoup dans la vidéo sur la lettre H, donc je ne vais pas entrer dans les détails ici. Cependant, vous pouvez appliquer des animations sympas à l'état de survol. Recherchez "CSS Hover Effets" sur Google et vous en trouverez beaucoup.

Voici quelques sites Web avec des effets intelligents:

• CODROPS: CSS Transition Hover Effets
• Design Shack: Copier les effets de survol de la pâte
• CSS-Tricks: Pop plane

De plus, j'ai récemment réalisé une vidéo pour Code School, tout sur une bibliothèque appelée Hover.css.

Une autre propriété CSS H (je ne l'ai pas décrite en détail sur ce site) est la hauteur (hauteur).

L'attribut de hauteur

est utilisé pour définir la hauteur du contenu de l'élément. Toutes les unités de longueur standard (telles que PX, EM, REM,%, VW, VH et autres unités) peuvent être utilisées pour contrôler la hauteur.

Si la hauteur d'un élément n'est pas explicitement définie, elle est calculée comme la hauteur minimale qui s'accueille tous les éléments contenus (correspondant à la valeur par défaut automatique).

Il est généralement recommandé d'éviter de régler explicitement les hauteurs sur n'importe quel élément, car il limite la flexibilité de l'élément - ce qui signifie qu'il ne peut pas croître à mesure que le contenu change. Ceci est particulièrement important dans les conceptions réactives lorsque le contenu doit être réarrangé verticalement à mesure que la largeur disponible change.

Par conséquent, j'ai tendance à définir la hauteur uniquement sur les éléments avec des tailles prédéfinies, telles que les images. Un autre cas d'utilisation est que lorsque vous utilisez un positionnement absolu ou fixe, la hauteur (et la largeur) se rétrécit autour de l'élément de positionnement.

L'exemple suivant démontre le problème de la définition d'une hauteur fixe.

Affichez l'exemple de code

Bien que le premier ensemble de texte soit correct, une fois que le texte est plus court ou plus long que le style, le style n'est plus correct - la boîte d'inclusion apparaît trop grande ou que le texte déborde de la boîte.

Une façon de corriger le débordement de texte est d'utiliser la propriété Overflow, mais cela tronque le texte et le rend illisible.

Cela peut être complètement évité si la hauteur n'est pas spécifiée au début. Si je pouvais améliorer la flexibilité du code sans rien faire, je choisirais de le faire sans hésitation!

FAQ sur CSS Hover Heights (FAQS)

Quel est l'effet de volant CSS et comment fonctionne-t-il?

CSS LET LE VOLAGE est une pseudo-classe qui applique des styles lorsque le pointeur de la souris plane sur un élément. Il est souvent utilisé pour créer des effets interactifs sur les pages Web, tels que la modification de la couleur d'un bouton lorsque la souris plane dessus. L'effet de survol est appliqué en utilisant le sélecteur ": Hover" suivi de l'attribut CSS à modifier. Par exemple, pour modifier la couleur d'arrière-plan du bouton en rouge lorsque la souris plane dessus, vous pouvez utiliser le code suivant:

button:hover {
  background-color: red;
}

Comment modifier la hauteur d'un élément en utilisant l'effet de survol du CSS?

Vous pouvez modifier la hauteur d'un élément à l'aide de l'effet de survol du CSS en spécifiant une nouvelle hauteur dans la règle de survol. Par exemple, si vous souhaitez augmenter sa hauteur lorsque votre souris plane sur un élément DIV, vous pouvez utiliser le code suivant:

div:hover {
  height: 200px;
}

Dans cet exemple, lorsque la souris plane sur la div, la hauteur du div changera à 200px.

Puis-je utiliser l'effet CSS en survol avec les requêtes multimédias?

Oui, vous pouvez utiliser les effets de volants CSS avec des requêtes multimédias pour créer des effets de volants réactifs. Par exemple, vous pouvez utiliser des requêtes multimédias pour appliquer les effets de survol uniquement si l'écran a une largeur spécifique. Voici un exemple:

@media (min-width: 600px) {
  div:hover {
    height: 200px;
  }
}

Dans cet exemple, l'effet de survol n'est appliqué uniquement si la largeur de l'écran est d'au moins 600px.

Puis-je modifier plusieurs propriétés en utilisant l'effet de survol du CSS à la fois?

Oui, vous pouvez modifier plusieurs propriétés à l'aide de l'effet de survol du CSS à la fois. Par exemple, vous pouvez modifier la hauteur, la largeur et la couleur d'arrière-plan de l'élément DIV lorsque vous en survolez. Voici un exemple:

div:hover {
  height: 200px;
  width: 200px;
  background-color: red;
}

Dans cet exemple, lorsque la souris plane sur la div, la hauteur, la largeur et la couleur d'arrière-plan du div changent.

Puis-je créer des effets de transition en utilisant des effets de volants CSS?

Oui, vous pouvez utiliser l'effet CSS en survol en conjonction avec la propriété de transition pour créer un effet de transition en douceur. Par exemple, vous pouvez créer un effet de transition qui modifie progressivement la hauteur de l'élément DIV en 2 secondes tandis que la souris plane sur l'élément div. Voici un exemple:

div {
  transition: height 2s;
}

div:hover {
  height: 200px;
}

Dans cet exemple, lorsque la souris plane sur la div, la hauteur de la div changera progressivement à 200px en 2 secondes.

Veuillez noter que j'ai remplacé tous les liens d'image en tant qu'ensembles car je ne peux pas accéder à l'image d'origine. Veuillez remplacer l'espace réservé par le lien d'image réel. De même, les endroits où des liens sont nécessaires dans l'article sont également remplacés par des espaces réservés, veuillez les remplacer en fonction de la situation réelle.

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!