Geavanceerde CSS-filters. Hoe de achtergrond te vervagen met CSS

Hallo vrienden, vandaag heb ik een hele GROTE les voor jullie, een hele 27 minuten. Maar daarin zullen we kijken naar een heel, heel, heel interessante eigenschap waarmee je verschillende speciale effecten voor afbeeldingen kunt instellen zonder in te gaan op Photoshop-programma en andere redacteuren.

Filter is een eigenschap in CSS3 die uw afbeeldingen kan wijzigen. Pas vervaging toe, verhoog het contrast en de helderheid, voeg schaduwen toe, verander kleuren en nog veel, veel meer.

In totaal heeft Filter 10 waarden waarmee je “allerlei interessante dingen” kunt doen met site-elementen. Ik stel nu voor om al deze 10 betekenissen in de praktijk te analyseren in de onderstaande video-tutorial.

Videofilter CSS 3 – Afbeeldingsfilters:

Een voorbeeld van de pagina die we in deze tutorial maken:

U kunt het sjabloonbestand downloaden met .

Aandacht! De eigenschap filters wordt momenteel getest en wordt alleen ondersteund Firefox-browser volledig. A Chrome-browser en andere gebaseerd op de Webkit-engine, werkt deze eigenschap alleen bij het toevoegen van voorvoegsels. Ik toon voorvoegsels aan het einde van de les, dus ik raad aan om deze eerst door te nemen. Firefox nieuwste versies.

Als je te lui bent om de video te bekijken, kun je deze bekijken gedetailleerde instructies hieronder met alle filterregels.

10 filtereffecten in CSS3

Houd er rekening mee dat alle effecten in de onderstaande afbeeldingen alleen worden geïmplementeerd met behulp van CSS3, dus ze zullen niet zichtbaar zijn in oudere browsers!!!

1. Vervagingsfilter

Als we praten in eenvoudige taal, dan is dit de gebruikelijke vervaging van de foto. Een filter is geweldig als je de randen wilt verzachten. Door vervaging ontstaat de indruk dat de achtergrond onscherp is.

Laten we proberen ons filter op de vos toe te passen door de volgende code te schrijven:

Aan de linkerkant heb ik voor de duidelijkheid een gewone afbeelding geplaatst, maar aan de rechterkant is dezelfde afbeelding, alleen aangepast met CSS3.

Een filter met een vervagingswaarde wordt opgegeven in pixels. Bovendien geldt: hoe hoger deze waarde, hoe waziger het beeld lijkt.

Helderheid filteren

Dit filter is vergelijkbaar met het wijzigen van de helderheid van een tv-scherm. IN in dit geval Past de kleur aan tussen zwart en de originele kleur terwijl u parameters toevoegt.

En hier is ons proefpaard:

U kunt aanpassen vanaf 0% of meer. Bij 0% is de afbeelding zwart, bij 100% is deze origineel en bij 200% wordt deze twee keer zo helder. Dit is erg goed effect, vooral voor donkere beelden.

Het helderheidsfilter kan op 3 manieren worden gespecificeerd:

1. gehele getallen
2. fractionele getallen
3. interesse

Bovendien zijn er in principe geen beperkingen. In het voorbeeld hebben we de waarde ingesteld op 2 en hebben we de helderheid van onze afbeelding met 2 keer of 200% verhoogd.

3. Contrastfilter

Met dit filter kunt u het contrast van een foto vergroten door het verschil tussen de lichte en donkere tinten van de afbeelding aan te passen. Ook hier worden waarden op drie manieren gespecificeerd: hele getallen, breuken en percentages. 100% is dus de standaardwaarde. 0% - zwart beeld. En alles meer dan 100% voegt contrast toe aan jou.

Deze keer zullen we de kat bespotten. Laten we er +50% contrast aan toevoegen:

Hier is het resultaat:

Zoals je kunt zien, hoeven we nu niet eens Photoshop te gebruiken om contrast en onscherpte te creëren. Hier, midden in CSS, nemen en veranderen we de afbeeldingen zoals ons hartje begeert.

4. Filterverzadiging - verzadigen

Dit is erg cool effect, waardoor uw afbeeldingen levendiger en verzadigder worden. We geven de waarden aan in drie opties: hele en gebroken getallen, evenals percentages. Laten we de waarde specificeren: 200%. Laten we de verzadiging van onze foto met 2 keer vergroten.

De zee is merkbaar aangenamer geworden:

Kijk hoe sappig het beeld is geworden. Ik vind het een heel gaaf effect! Zullen we gaan??

5. Filtertransparantie - dekking

Stelt transparantie in. Er worden bepaalde beperkingen opgelegd aan de waarden van dit filter:

• percentages: van 0% tot 100

Laten we proberen de transparantie van de volgende afbeelding met 50% te verminderen.

Kijk wat er gebeurde:

6. Filterinversie - omkeren

Hiermee kunt u kleuren "omdraaien". Er zijn ook beperkingen op de waarden van dit filter:

• hele en gebroken getallen: van 0 tot 1
• percentages: van 0% tot 100

In ons geval zullen we instellen maximale waarde - 100 %:

En met een lichte beweging van de hand verandert een prachtige sportwagen in...

Dit filter heeft ons geholpen een negatief effect op de afbeelding zelf te creëren.

7. Sepia-filter

Hiermee kunt u de kleur wijzigen door een sepiatint toe te voegen. Dat wil zeggen, u krijgt een imitatie oude foto. De beperkingen op filterwaarden zijn hetzelfde als in de vorige twee.

• hele en gebroken getallen: van 0 tot 1
• percentages: van 0% tot 100

Goed? Zullen we het proberen?

Fuck-tibidoh! Met een lichte handbeweging zullen we deze foto een paar decennia verouderen. Het lijkt alsof ik gek word met deze voorbeelden.

In ons geval hebben we een fractionele waarde gespecificeerd - 0,5. Maar je kunt experimenteren zoals je wilt!

8. Grijswaardenfilter

Met dit filter kunnen we kleuren omzetten in grijstinten. Er zijn ook beperkingen op filterwaarden:

• hele en gebroken getallen: van 0 tot 1
• percentages: van 0% tot 100

Bij 100% zal de gehele afbeelding dus in grijstinten zijn, en bij 0% blijft deze ongewijzigd. 0 is gelijk aan 0% en 1,0 is gelijk aan 100%.

Laten we de waarde instellen op 0,7 (of 70%):

CSS3 heeft veel nieuwe eigenschappen die de lay-out van bepaalde pagina-elementen aanzienlijk kunnen versnellen. Bijvoorbeeld CSS-filters, waar we het vandaag over gaan hebben.

Ieder van ons heeft minstens één keer de gelegenheid gehad om het vervagingseffect op de pagina te observeren. Vaak wordt de jQuery-bibliotheek bjurjs gebruikt om deze te maken. Het is echter niet raadzaam om jQuery op alle sites te gebruiken, en de technologie staat niet stil: nu kunnen we de oplossing gebruiken op pure CSS. Zullen we het proberen?

Een voorbeeld van de eenvoudigste opmaak:

Er wordt dus een ouder-div met een wrapper-klasse gedefinieerd, die dient als container voor twee geneste div's: inner-wrapper bevat de welkomsttekst en blur is de afbeelding waarop het blur-effect moet worden toegepast.

Laten we naar stijlen kijken.

Wrapper (positie: relatief; breedte: 500px; hoogte: 500px; marge: 0 auto;) .inner-wrapper, .blur (positie: absoluut; breedte: 500px; hoogte: 300px; links: 0; boven: 0; onder: 0; rechts: 0;

Zoals u kunt zien, zijn de kindblokken absoluut gepositioneerd en bevinden ze zich op hetzelfde niveau. Het punt is dat het vervagingseffect ook op de begroetingstekst wordt toegepast, wat we graag willen vermijden. Daarom is het beter om de positie van blokken ten opzichte van elkaar te controleren met behulp van z-index. Laten we dit doen en ook de benodigde achtergrond voor .blur instellen:

Innerlijke wrapper ( z-index : 100 ; kleur : #fff ; tekstuitlijning : midden ; tekstschaduw : 0 0 5px rgba ( 0 , 0 , 0 , .5 ); ) .blur ( z-index : 99 ; achtergrondafbeelding: url(image.png) achtergrondgrootte: omslag; achtergrondherhaling: geen herhaling;

Op op dit moment we krijgen een eenvoudige pagina met een afbeelding en tekst:

Het is tijd om de magie te laten werken! Helaas ondersteunt Firefox nog geen CSS-filters, dus een klein trucje helpt: je moet het een SVG-bestand “voeden” met de volgende inhoud:

en specificeer het pad naar dit bestand, en raadpleeg ook het benodigde filter. In ons geval is er maar één filter: het filter dat is gedefinieerd onder id blur . Dit is hoe de CSS-code moet worden geconverteerd om het vervagingseffect te krijgen:

Binnenverpakking ( z-index : 100 ; /* tekst is niet wazig */ kleur: #fff; tekst uitlijnen: centreren; achtergrondafbeelding: url(image.png);

achtergrondgrootte: omslag;

achtergrondherhaling: geen herhaling; -webkit-filter: vervagen (5px);-moz-filter: vervagen (5px); filter: vervagen (5px); filter: url("blur.svg#blur" ;

/* pad naar SVG */ ) En hier is de definitieve versie met het vervagingseffect toegepast: Het enige nadeel: onduidelijke, vervagende grenzen die verder gaan

ouderelement

. Vaak zo

bijwerking kan onwenselijk zijn. Nou, je kunt spelen met de vervagingsradius of overflow toepassen: verborgen . In zijn effect lijkt Blur CSS sterk op een filter "

Gaussiaanse vervaging

" Nu kunnen we hetzelfde effect bereiken op webpagina's.

Als vervaging verkeerd wordt gebruikt, kunnen gebruikers het gevoel krijgen dat ze uw site hebben bezocht na een week lang binges, omdat ze er hoofdpijn van krijgen. Om dit op te lossen wordt vaak een vervagingseffect gecombineerd met een overgang, wat ik ook in dit artikel zal demonstreren.

Let op IE 9+

Toen Microsoft besloot om Internet Explorer Volgens moderne webstandaarden resulteerde dit in het verlies van veel native CSS-waarden, inclusief DX-filters, die sinds IE 5.5 in deze browser werden ondersteund. Helaas konden ze niet worden vervangen door CSS3-alternatieven, waardoor IE9, 10 en 11 in de problemen bleven. Op het moment dat dit artikel wordt geschreven, gebruiken ontwikkelaars die afbeeldingen nodig hebben met exact dezelfde vervagingseffecten StackBlur, een op canvas gebaseerd script, als een cross-browser oplossing. HTML-code: Vervolgens wordt het vervagingseffect toegepast via de klasse: img.blur ( breedte:367; hoogte:459px; -webkit-filter: vervagen(3px); filter: vervagen(3px); ) SVG-vervagingsfilter

Momenteel werkt CSS-achtergrond vervagen

Google Chrome

, Safari(

mobiele en desktopversies

) en Firefox 35+. Om eerder steun te krijgen

Firefox-versies

Als u de afbeelding wilt scherpstellen, moet u deze de volgende keer dat u het CSS-filtervervaging aanroept, op geen instellen. In dit geval verander ik het gedrag van het filter wanneer ik de muiscursor beweeg via :hover:

img.blur:focus, img.blur:hover ( -webkit-filter: vervagen(0px); filter: vervagen(0px); filter: geen; filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius = "0"); )

Wanneer u in een browser (anders dan IE) zweeft, ziet u dat wazig beeld wordt geleidelijk scherper dankzij CSS-overgang.

De randen van een afbeelding bijsnijden

In tegenstelling tot andere filters die we tot nu toe hebben bekeken, reikt het CSS-vervagingseffect verder dan de randen van een element, waardoor de randen van de afbeelding en de omgeving ervan vervagen. Als u wilt dat het beeld alleen aan de binnenkant wazig is, zijn hiervoor verschillende methoden mogelijk:

1. Als u een afbeelding heeft waarvan alle randen dezelfde kleur hebben, kunt u de achtergrondkleur instellen ( achtergrondkleur) V of een containerelement van dezelfde kleur;
2. Gebruik de eigenschap clip om de randen van een afbeelding bij te snijden. Clip wordt altijd in de volgende volgorde gespecificeerd.

clip: rect(boven, offset van rechter clip vanaf linkerkant, offset van onderkant vanaf boven, links)

Voor een afbeelding die 367 pixels breed en 459 pixels hoog is en een CSS-vervagingseffect van 2 pixels heeft, wordt de clip als volgt "geformuleerd":

fragment: rect(2px,365px,457px,2px);

Houd er rekening mee dat Clip alleen van toepassing is op elementen met position: absolute . Als u ondersteuning nodig heeft in IE8 of hoger eerdere versies, vergeet niet de px aan het einde van de waarden te verwijderen.

Verpak de afbeelding in een containerelement (bijv