La lumière du soleil en début de soirée filtrant à travers les feuilles crée une lueur serein et chaude. Les artistes utilisent magistralement cette ?lumière ponctuelle? pour obtenir un effet doux et fascinant. Nous pouvons reproduire ce look enchanteur dans la conception Web, respectant une nouvelle vie dans un contenu autrement banal en l'appliquant à des photos et des illustrations. Ce tutoriel démontre une approche simple basée sur CSS.

Avant de plonger dans le code, la compréhension de la composition de Dappled Light est cruciale. Il se compose de grandes plaques lumineuses circulaires ou elliptiques entrecoupées d'ombres jetées par le feuillage - une lumière qui glisse les feuilles et les branches. Ces ombres présentent souvent des bords doux et floues, à cause de la lumière passant par de nombreux espaces moins définis, diffusant et déformant la lumière lorsqu'elle jette des ombres à distance.

Observez la différence entre un mur blanc ordinaire et un éclairé par une lumière poncée: [la comparaison illustrative irait ici]

Ce tutoriel recrée l'effet en utilisant du texte (lettres, symboles, emojis), tirant parti des ombres CSS et mélangeant pour imiter l'art de la nature. Des méthodes alternatives seront également explorées.

Préparer la voie

Nous utiliserons des éléments de texte - lettres, symboles, emojis - pour représenter des patchs légers. Ce seront des couleurs pales et translucides, visant un effet doux et diffusé plut?t que des contrastes nets. Les caractères elliptiques ou oblongs sont idéaux, reflétant les formes variées de la lumière ponctuelle. L'expérimentation est essentielle pour atteindre l'esthétique souhaitée. Pour cet exemple, nous utiliserons? ,?, et \ pour leurs formes elliptiques et inclinées.

Ces caractères sont enveloppés dans des paragraphes dans un élément parent .backdrop :

<div class="backdrop">
  <p class="shapes">?</p>
  <p class="shapes">?</p>
  <p class="shapes">\</p>
</div>

Le .backdrop sert de surface sur laquelle la lumière et les ombres sont projetées. Il utilise une image d'arrière-plan pour la texture, a une largeur et une hauteur explicites, et overflow: hidden pour contenir des ombres s'étendant au-delà de ses limites. CSS Grid centre les éléments légers:

 .BackDrop {
  Contexte: URL central / couverture sans répétition ('image.jpeg');
  Largeur: 400px; hauteur: 240px;
  débordement: caché;
  Affichage: grille;
}
.BackDrop> * {
  Grid-Area: 1/1;
}

L'alignement précis des formes n'est pas critique; Le chevauchement est suffisant. N'hésitez pas à ajuster le positionnement pour des motifs d'éclairage pombés uniques.

Styliser la lumière pachée avec CSS

Les principales propriétés CSS pour les emojis sont: couleur transparente, fond noir semi-transparent (en utilisant rgba() ), un shadow blanc flou, une grande taille de police et mix-blend-mode pour le lissage:

 .shapes {
  Couleur: transparent;
  Color d'arrière-plan: RGBA (0, 0, 0, 0,3);
  Text-shadow: 0 0 40px #fff;
  Police: plus audacieux 320pt / 320pt monospace;
  Mode de mélange de mélange: Multiplier;
}

mix-blend-mode: multiply mélange les couleurs de l'élément avec son récipient, permettant à la toile de fond de se montrer à travers des couleurs claires tout en maintenant les couleurs sombres, ce qui entra?ne un effet lumineux dapplé plus naturel.

Affiner les couleurs et le contraste

Pour améliorer la luminosité de l'image d'arrière-plan, filter: brightness(1.6) est appliquée. Alternativement, background-blend-mode peut mélanger plusieurs arrière-plans. Les emojis peuvent également être utilisés comme images d'arrière-plan, comme indiqué ci-dessous:

<svg xmlns="http://www.w3.org/2000/svg"><foreignobject height="240px" width="400px"><div style="font: bolder 720pt/220pt monospace;
       color: transparent;
       text-shadow: 0 0 40px floralwhite;
       background: rgba(0, 0, 0, 0.3);" xmlns="http://www.w3.org/1999/xhtml">
      ?
    </div>
  </foreignobject></svg>

Pour les formes d'image personnalisées, brouillez les bords pour un effet lumineux doux à l'aide du filtre CSS blur() . @supports peut être utilisé pour les ajustements d'ombre spécifiques au navigateur.

Revoyons l'exemple initial et ajoutons du contenu:

<div class="backdrop">
  <p class="shapes">?</p>
  <p class="shapes">?</p>
  <p class="shapes">\</p>
</div>


  
  Top dix spots touristiques pour les vacances d'été



  Voici les endroits les plus populaires ...

. Les styles. .backdrop et .shapes restent les mêmes. .content utilise isolation: isolate pour créer un nouveau contexte d'empilement, empêchant le mélange avec l'effet de lumière pampé.

Animer la source lumineuse

Une animation subtile est ajoutée à l'aide de @keyframes sur .backdrop:hover :

 .BackDrop: Hover> .shapes: Nth of-Type (1) {
  Animation: le mouvement alternatif infini de la facilité d'infinie;
}
.BackDrop: Hover> .shapes: nth of-type (2): hover {
  Animation: 4S Facilit-in-Out Infinite Alternate Move-1;
}

@KeyFrames Move {
  de {text-indent: -20px; }
  à {text-indent: 20px; }
}
@KeyFrames Move-1 {
  de {text-indent: -60px; }
  à {text-indent: 40px; }
}

L'animation text-indent crée un mouvement subtil, simulant les nuages ??de change et changeant la direction de la lumière.

Conclusion

Ce didacticiel montre comment créer un effet lumineux pommelé à l'aide de CSS, s'inspirant de la nature et de l'art. La clé réside dans l'application de la couleur aux éléments de texte en utilisant des shadows de texte flous pour des arrière-plans légers et semi-transparents pour les ombres. Une toile de fond texturée avec un contraste suffisant complète l'effet.

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!