Explication détaillée sur la façon d'obtenir des ombres colorées et intelligentes en utilisant du CSS pur

Cet article vous donnera une introduction détaillée à la méthode de réalisation d'ombres colorées et intelligentes en utilisant du CSS pur. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Vous êtes-vous déjà demandé comment créer un effet d'ombre portée qui hérite de certaines couleurs d'un élément de premier plan ? Lisez cet article et découvrez comment !

Je suis passé par Home Depot (Home Depot, American Home Depot Company, le premier détaillant mondial de matériaux de construction) il y a quelques jours, et ils avaient une exposition à grande échelle de lampes intelligentes qu'ils vendaient. L'une d'elles était une série d'ampoules situées derrière le téléviseur, elles projettent une lumière similaire à la couleur affichée sur l'écran de premier plan du téléviseur, similaire à celle illustrée ci-dessous.

Regardez ce qui se passe derrière la télévision. Les couleurs affichées au premier plan de l'écran de télévision sont projetées par la lampe sur un fond d'ombre coloré. À mesure que les couleurs sur l’écran changent, la couleur de l’arrière-plan de projection change également. Vraiment cool, non ?

Naturellement, ma première pensée après avoir vu cela a été : pourrais-je utiliser les web techniques de développement pour créer une ombre suffisamment colorée et intelligente pour simuler la couleur du premier plan ? Il s'avère que cet effet peut être obtenu en utilisant uniquement CSS. Dans cet article, nous verrons comment. [Partage de vidéos d'apprentissage : Tutoriel vidéo CSS]

Commençons !

Réalisez cela

Comme vous le découvrirez dans les paragraphes suivants, créer des ombres colorées intelligentes en utilisant simplement CSS peut sembler une tâche ardue à première vue. Lorsque nous abordons la tâche étape par étape et divisez les parties difficiles en parties plus petites, vous constaterez que tout devient plus facile à comprendre et à digérer. Dans les chapitres suivants, nous allons créer un exemple qui ressemble à ceci :

Ce que vous voyez est une image de sushi avec une couleur d'arrière-plan correspondant à l'ombre de couleur du premier plan. Pour souligner que ce que nous faisons est dynamique, ajoutez un effet d'animation pulsé à l'ombre. Avec cet exemple fonctionnel, voyons comment donner vie à tout en utilisant uniquement HTML et CSS.

Image affichée

Il n'y a rien de spécial dans le HTML utilisé pour afficher les sushis comme indiqué ci-dessous :

<div class="parent">
  <div class="colorfulShadow sushi"></div>
</div>

Nous avons un élément parent div .parent, Il contient un élément enfant .suchi pour la présentation. Nous l'instancions en utilisant une image d'arrière-plan. Les règles de style spécifiques de l'élément .sushi sont les suivantes :

.sushi {
  margin: 100px;
  width: 150px;
  height: 150px;
  background-image: url("https://www.kirupa.com/icon/1f363.svg");
  background-repeat: no-repeat;
  background-size: contain;
}

Dans les règles de style ci-dessus, nous définissons div sur 150 * 150 pixels de largeur et de hauteur, Et définissez background-image et les attributs associés. Si nous montrons les résultats que nous avons obtenus maintenant, nous pouvons voir le contenu comme indiqué dans la figure ci-dessous.

Création de l'ombre

Maintenant que notre image de sushi est affichée, la partie la plus intéressante consiste à définir l'ombre. Nous définirons l'ombre en spécifiant un pseudo-élément enfant ::after, qui fera 3 choses :

• est directement derrière le div où se trouve l'image
hérite de la même image d'arrière-plan que l'élément parent
• est filtrée pour produire un effet d'ombre
• coloré. drop-shadow

Les 3 fonctions ci-dessus sont implémentées par les 2 règles de style suivantes :

.colorfulShadow {
  position: relative;
}
.colorfulShadow::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  background: inherit;
  background-position: center center;
  filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.50)) blur(20px);
  z-index: -1;
}

Prenez un moment pour parcourir l'implémentation ici et portez une attention particulière à chaque attribut et à la valeur correspondante. Les plus remarquables sont l'attribut

et l'attribut background. La valeur de filter est background, ce qui signifie qu'il héritera de la valeur d'arrière-plan de l'élément parent : inherit

background: inherit;

L'attribut définit deux valeurs de filtre : filter et drop-shadowblur

filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.50)) blur(20px);

Notre

filtre définit une ombre noire avec drop-shadow transparence. Le filtre 50% définit l'effet de flou de blur sur l'élément. La combinaison de ces deux filtres peut finalement créer des ombres colorées. Lorsque ces deux règles de style sont en vigueur, nous pouvons voir les ombres colorées apparaître derrière l'image du sushi comme indiqué ci-dessous : 20px

Jusqu’à présent, nous avons accompli beaucoup de choses. Pour être complet, si vous souhaitez des ombres colorées avec une animation zoomée, les

supplémentaires suivants peuvent vous aider à y parvenir :

.colorfulShadow {
  position: relative;
}
.colorfulShadow::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  background: inherit;
  background-position: center center;
  filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.50)) blur(20px);
  z-index: -1;
  /* animation time! */
  animation: oscillate 1s cubic-bezier(.17, .67, .45, 1.32) infinite alternate;
}

@keyframes oscillate {
  from {
    transform: scale(1, 1);
  }
  to {
    transform: scale(1.3, 1.3);
  }
}

如果你想在不使用循环动画效果的情况下增强交互性，也可以使用 CSS transition 来改变阴影的行为，如在 hover 操作情况下。需要强调的难点是对待伪元素只需要像对待用 HTML 创建的或 JavaScript 动态创建的元素一样，唯一的不同是这个元素完全是仅使用 CSS 创建的！

结论

伪元素允许我们使用 CSS 来创建通常在 HTML 和 JavaScript 领域内完成的元素创建任务。对于我们多彩的智能阴影来说，我们依赖于父元素有一个背景图像集，这使得我们定义一个既可以继承父级背景细节又可以设置模糊效果和投影效果的子元素变得容易。虽然这一切都很好，减少了我们大量的复制粘贴工作，但是这种方法也不是很灵活。

如果我想将这样的阴影应用到一个不只是带有背景图像的空元素上，该怎么办呢？如果我有一个 HTML 元素如一个按钮或组合框，我想应用这种阴影效果呢？一种解决方案是依靠  JavaScript 复制 DOM 中的相应元素，将其放置在前台元素底层，应用过滤器，这样也是一种方法。虽然这可以实现效果，但我想到这个有点重复 DOM 元素的沉重过程就不寒而栗。更糟糕的是，JavaScript 没有将你想提供的任意视觉意向转换为渲染目标位图的能力！

更多编程相关知识，请访问：编程视频！！

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!