Comment définir la distance de flou en CSS ?

CSS (Cascading Style Sheets) est un outil puissant pour concevoir les effets visuels de votre site Web. L'effetBlurest l'une des nombreuses fonctionnalités CSS utilisées pour flouter n'importe quelle propriété d'élément à l'aide deBlur. Pour créer un effet doux et onirique ou attirer l'attention sur un élément spécifique de la page, nous pouvons utiliser l'effet de flou.

Grammaire

css element { filter : blur (amount) }

Le concept de distance floue en CSS

Avant d'aborder les aspects pratiques de la définition de la distance floue, il est important de comprendre le concept de distance floue. La quantité de flou appliquée à un élément est appelée distance de flou. La valeur peut être définie en pixels (px), em ou autres unités CSS.

Comment appliquer la distance de flou en CSS en utilisant la propriété « flou »

Pour définir la distance de flou en CSS, vous devez utiliser l'attribut flou. La propriété Blur définit la quantité de flou qui doit être appliquée à l'élément. Pour utiliser l'attribut Flou, nous sélectionnons d'abord l'élément auquel nous voulons appliquer l'effet de flou, puis définissons l'attribut Flou sur la valeur souhaitée.

Par exemple, pour appliquer un effet de flou à une image, on peut utiliser le code CSS suivant -

img { filter : blur(5px) }

Ici, nous avons sélectionné l'élément « img » et lui avons appliqué un effet de flou de 5 pixels.

Exemple 1

Voici un exemple de code complet de la méthode ci-dessus.

    
  
Applying blur distance in CSS using the 'blur' property
  

Nous pouvons appliquer différentes distances de flou à différents éléments de la page Web. Pour ce faire, nous pouvons sélectionner chaque élément individuellement et définir la propriété "flou" à la valeur souhaitée. Par exemple -

h1 { filter : blur(3px) } img { filter : blur(5px) }

Ici, nous avons sélectionné deux éléments, le premier « h1 » et le deuxième « img » et appliqué un effet de flou de 3 pixels et 5 pixels en conséquence.

Exemple 2 : Appliquer différentes distances de flou à différents éléments

    
  
Applying blur distance in CSS using the 'blur' property
 
Applied blur distance 2 pixels in CSS using the 'blur' property
   

Créer un effet de mise au point avec une distance floue en CSS

La création d'un effet de focus est l'utilisation la plus courante des effets de flou en CSS. Cet effet est obtenu en appliquant un effet de flou à tous les éléments de la page Web à l'exception de l'élément ciblé.

Pour créer un effet de focus avec une distance floue en CSS, utilisez la propriété "blur" avec la pseudo-classe ":not". La pseudo-classe ':not' permet à l'utilisateur de sélectionner tous les éléments sauf des éléments spécifiques. Par exemple -

.blur * { transition: all 0.5s ease-in-out; } .blur:hover *:not(.no-blur) { filter: blur(5px); }

Ici, nous appliquons l'attribut "blur" à tous les éléments enfants de la classe "blur" lorsque l'utilisateur survole la classe "blur". Cet effet ne fonctionne pas sur les éléments de classe "no-blur", car l'utilisation de la pseudo-classe "no" exclut les éléments de classe "no-blur" de l'effet de flou.

Exemple 3

Voici un exemple de code complet de la méthode ci-dessus.

    
  
Creating a focus effect with blur distance in CSS
 
 Hover over the below content to see the effect 
 
 
Heading
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 Click me 
  

Conclusion

Définir la distance de flou en CSS est un moyen simple et efficace d'ajouter un attrait visuel à vos pages Web. Avec les exemples suivants, vous pouvez facilement créer des effets de flou sur des pages Web.

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!