Er is een serene warmte aan het vroege avondzonlicht dat door ritselende bladeren prijkt. Kunstenaars gebruiken gevlekt licht om een zacht, hypnotiserend effect te creëren.
We kunnen hetzelfde soort gevlekt lichteffect creëren in webdesign, door het op foto's en illustraties te gebruiken om die magische toets toe te voegen aan wat anders saaie inhoudsmuren zouden zijn om ze weer tot leven te brengen.
Ik zal je een gemakkelijke, snelle manier geven om dit effect toe te voegen... met alleen CSS.
Voordat we ingaan op de code, is het belangrijk om de samenstelling van gevlekt licht te kennen. Het bestaat uit grote lichtvlekken - cirkelvormig of elliptisch - die worden onderschept door de schaduwen van het gebladerte. Eigenlijk het licht dat langs bladeren, takken enzovoort glijdt. Soms creëren de schaduwen scherpe randen, maar zijn ze vaker vervaagd, omdat we het hebben over licht dat door vele, minder gedefinieerde ruimtes gaat die het licht verspreiden en vervormen omdat het schaduwen werpt van een grotere afstand dan, laten we zeggen, je eigen grimmige schaduw op een nabijgelegen muur tegen direct zonlicht.
Dit is het verschil in het uiterlijk van een witte muur met en zonder verlicht door gevlekt licht:
Ik ga het gevlekte lichteffect opnieuw creëren met zowel platte tekst als leuke emoji's, waarbij ik CSS-schaduwen en overvloeiingen toepassen om de natuur na te bootsen. Ik zal ook alternatieve methoden behandelen.
De scène instellen
We gebruiken tekst - letters uit het alfabet, speciale tekens, emoji's, enz. - om de vormen van licht te creëren. En met licht bedoel ik bleke, doorschijnende kleuren. Nogmaals, we zijn voor een gevlekt lichteffect in plaats van iets dat scherp, helder of grimmig is.
Het is het beste om tekens te kiezen die op de een of andere manier elliptisch of langwerpig zijn - de vlekken die worden geproduceerd door gevlekt licht zijn er in verschillende vormen. Je zult hier met je gezond verstand moeten gaan om precies te krijgen waar je voor gaat. Mij? Ik gebruik 🍃, 🍂, omdat ze elliptisch, langwerpig en schuin zijn - een beetje chaos en onvoorspelbaarheid voor een anders sereen effect.
Ik wikkel die in alinea's die zijn opgenomen in a .backdrop bovenliggend element:
<div class="backdrop"> <p class="shapes">🍃</p> <p class="shapes">🍂</p> <p class="shapes"></p>
</div>Ik gebruik het bovenliggende element als het oppervlak waar het gevlekte licht en de schaduwen worden geworpen, en pas een achtergrondafbeelding toe voor de textuur. En niet alleen geef ik het oppervlak een expliciete width en height, maar ik plaats er ook een verborgen overloop op zodat ik schaduwen kan werpen die verder gaan dan het oppervlak zonder ze te onthullen. De objecten die het gevlekte lichteffect werpen, zijn uitgelijnd in het midden van het oppervlak van de achtergrond, dankzij het CSS-raster:
.backdrop { background: center / cover no-repeat url('image.jpeg'); width: 400px; height: 240px; overflow: hidden; display: grid;
}
.backdrop > * { grid-area: 1/1;
}Ik vind dat het oké is als de vormen niet zijn uitgelijnd precies op elkaar zolang ze elkaar overlappen op een manier die het gewenste gevlekte lichteffect krijgt. Dus geen druk om precies te doen wat ik hier doe om dingen in CSS te positioneren. Ik moedig je zelfs aan om te proberen met de waarden te spelen om verschillende patronen van gevlekt licht te krijgen!
Het gevlekte licht stylen in CSS
Dit zijn de belangrijkste eigenschappen die de emoji's zouden moeten hebben: transparent kleur, zwarte semi-transparante achtergrond (met behulp van het alfakanaal in rgba()), wazig wit text-shadow met een mooie grote font-size, en tot slot, een mix-blend-mode dingen glad te strijken.
.shapes { color: transparent; background-color: rgba(0, 0, 0, 0.3); // Use alpha transparency text-shadow: 0 0 40px #fff; // Blurry white shadow font: bolder 320pt/320pt monospace; mix-blend-mode: multiply;
}mix-blend-mode stelt in hoe de kleuren van een element zich vermengen met die van de inhoud van het containerelement. De multiply waarde zorgt ervoor dat de achtergrond van een element zichtbaar wordt door de lichte kleuren van het element en dat donkere kleuren hetzelfde blijven, wat zorgt voor een mooier en natuurlijker gevlekt lichteffect.
Kleuren en contrast verfijnen
ik wilde de background-image op de achtergrond om een beetje helderder te zijn, dus ik heb ook toegevoegd filter: brightness(1.6). Een andere manier om dit te doen is met background-blend-mode in plaats daarvan, waar alle verschillende achtergronden van een element worden gemengd en, in plaats van de emoji's als afzonderlijke elementen toe te voegen, voegen we ze toe als achtergrondafbeeldingen.
Merk op dat ik in dat laatste voorbeeld ook een andere emoji heb gebruikt, evenals floralwhite voor een kleur die minder intens is dan puur wit voor het licht. Hier is een van de emoji-achtergrondafbeeldingen uitgepakt:
<svg xmlns='http://www.w3.org/2000/svg'> <foreignObject width='400px' height='240px'> <div xmlns='http://www.w3.org/1999/xhtml' style= 'font: bolder 720pt/220pt monospace; color: transparent; text-shadow: 0 0 40px floralwhite; background: rgba(0, 0, 0, 0.3);' > 🌾 </div> </foreignObject> </svg>Als je je eigen afbeeldingen voor de vormen wilt gebruiken, zorg er dan voor dat de randen wazig zijn om een zacht licht te creëren. De CSS blur() filter kan handig zijn voor hetzelfde soort dingen. Ik gebruikte ook CSS @supports om de schaduwvervagingswaarde voor bepaalde browsers als fallback aan te passen.
Laten we nu teruggaan naar het eerste voorbeeld en een paar dingen toevoegen:
<div class="backdrop"> <p class="shapes">🍃</p> <p class="shapes">🍂</p> <p class="shapes"></p>
</div> <p class="content"> <img width="70px" style="float: left; margin-right: 10px;" src="image.jpeg" alt=""> Top ten tourists spots for the summer vacation <br><br><i style="font-weight: normal;">Here are the most popular places...</i>
</p>.backdrop en .shapes zijn in principe dezelfde stijlen als voorheen. Wat betreft de .content, die ook bovenop de zit .backdrop, Ik voegde toe isolation: isolate om een nieuwe stapelcontext te vormen, waarbij het element als een verfijnde toets uit de vermenging wordt uitgesloten.
De lichtbron animeren
Ik heb ook besloten om een eenvoudige CSS-animatie toe te voegen met @keyframes die worden toegepast op de .backdrop on :hover:
.backdrop:hover > .shapes:nth-of-type(1){ animation: 2s ease-in-out infinite alternate move;
}
.backdrop:hover > .shapes:nth-of-type(2):hover{ animation: 4s ease-in-out infinite alternate move-1;
} @keyframes move { from { text-indent: -20px; } to { text-indent: 20px; }
}
@keyframes move-1 { from { text-indent: -60px; } to { text-indent: 40px; }
}het animeren text-indent eigenschap op de emojis-producten een super subtiel beetje beweging - het soort dat je zou verwachten van wolken die boven je hoofd bewegen en de richting van het licht veranderen. Gewoon een vleugje klasse, weet je.
Afsluiten
Daar hebben we het! We hebben wat inspiratie gehaald uit de natuur en kunst om een van die half bewolkte dagen na te bootsen waarop de zon door bomen en struiken schijnt en gevlekt licht en schaduwvlekken op een oppervlak projecteert. En we deden het allemaal met een handvol CSS en een paar emoji.
De sleutel was hoe we kleur op de emoji hebben toegepast. Een extra wazige gebruiken text-shadow in een lichte kleur zet het licht, en een semi-transparante background-color definieert de schaduwvlekken. Van daaruit hoefden we alleen maar te zorgen dat de achtergrond voor het licht en de schaduwen een realistische textuur met voldoende contrast gebruikte om het gevlekte lichteffect in actie te zien.
