Comment définir la distance de flou en CSS ?-tutoriel CSS-php.cn

Comment définir la distance de flou en CSS ?

WBOY

Libérer： 2023-09-01 22:37:02

avant

1494 Les gens l'ont consulté

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'effet Blur est l'une des nombreuses fonctionnalités CSS utilisées pour flouter n'importe quelle propriété d'élément à l'aide de Blur. 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)
}

Copier après la connexion

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)
}

Copier après la connexion

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.

<!DOCTYPE html>
<html>
<head>
   <style>
      body{
         text-align:center;
      }
      img {
         filter: blur(3px);
      }
   </style>
</head>
<body>
   <h3>Applying blur distance in CSS using the 'blur' property</h3>
   <img src="https://www.tutorialspoint.com/dip/images/einstein.jpg" alt="My Image">
</body>

Copier après la connexion

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)
}

Copier après la connexion

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

<!DOCTYPE html>
<html>
<head>
   <style>
      body{
         text-align:center;
      }
      p{
         filter: blur(2px);
         font-size: 20px;
         color: red;
      }
      img {
         filter: blur(3px);
      }
   </style>
</head>
<body>
   <h3>Applying blur distance in CSS using the 'blur' property</h3>
   <p>Applied blur distance 2 pixels in CSS using the 'blur' property</p>
   <img src="https://www.tutorialspoint.com/dip/images/einstein.jpg" alt="My Image">
</body>
</html>

Copier après la connexion

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);
}

Copier après la connexion

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.

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         text-align: center;
      }
      .blur * {
         transition: all 0.5s ease-in-out;
      }
      .blur:hover *:not(.no-blur) {
         filter: blur(5px);
      }
   </style>
</head>
<body>
   <h2>Creating a focus effect with blur distance in CSS</h2>
   <p> Hover over the below content to see the effect </p>
   <div class="blur">
      <h2>Heading</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <button class="no-blur">Click me</button>
   </div>
</body>
</html>

Copier après la connexion

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!