Geavanceerde CSS-filters. Hoe de achtergrond te vervagen met CSS
Ik kon achtergrond en achtergrond niet kort in het Russisch vertalen, terwijl ik het semantische verschil daartussen handhaafde, dus ik zal het nu uitleggen:
achtergrond - wat zich achter het element bevindt en er doorheen kan worden gezien, afgesneden door het frame;
background is ook een achtergrond, maar maakt deel uit van het element en de eigenschap background verwijst ernaar.
Laten we teruggaan naar 2011, toen browsers begonnen met de introductie CSS-filters uit specificaties. Op dat moment was de ondersteuning voornamelijk voor SVG-filters, en Firefox was de enige browser die deze op HTML-inhoud kon toepassen (in principe veranderde er niets).
CSS-filters zoals vervagen(), contrast() of grijswaarden() zijn geweldige toevoegingen aan CSS, hoewel SVG geweldige dingen kan doen. U kunt er meer over vinden op veel bronnen.
achtergrondfilter
Eerst en vooral is er de eigenschap Background-filter, gedefinieerd in Filtereffectniveau 2. Hiermee kunnen filters worden toegepast op de achtergrond van een element in plaats van op de achtergrond ervan.Ik was sceptisch, maar ik begon in februari met WebKit nightlies te spelen en ik ben van gedachten veranderd: het is erg cool. Iedereen zal het met mij eens zijn, zoals blijkt uit mijn Vine-post, die in 48 uur tijd meer dan 20.000 keer bekeken werd.
In juni maakte Apple op WWDC bekend dat deze functies beschikbaar zouden zijn in Safari 9. goed nieuws. Het is tijd om te controleren (de auteur gebruikt iOS-bèta 9 en Safari9).
Met deze eigenschap kun je effecten bereiken die moeilijk te bereiken waren. Het meest voorkomende probleem is onscherpte, zoals in iOS:
Koptekst (achtergrondkleur: rgba(255,255,255,.6); achtergrondfilter: vervagen(5px) )
Elk element achter de koptekst wordt vervaagd met 5px. Zo simpel is het.
filter()
Soms moet u een filter noch op het element, noch op de achtergrond (achtergrond) toepassen. U wilt het alleen op de achtergrond toepassen, maar er is geen eigenschap background-filter. Dit is waar de functie filter() van pas kan komen; deze moet niet worden verward met de eigenschap filter. De functie heeft twee parameters nodig: afbeelding en filter, en retourneert een nieuwe afbeelding. Deze afbeelding kan bij iedereen worden gebruikt CSS-eigenschap, ondersteunende afbeeldingen. Iets als dit:Element ( achtergrond: filter(url(pad/naar/img.jpg), vervagen(5px)); )
Als gevolg hiervan kunt u nu filters op afbeeldingen toepassen voordat u ze als achtergrond gebruikt. Je zou kunnen denken dat het een variatie is op een achtergrondfilter (of achtergronddekking, achtergrondvervaging), maar het is veel krachtiger.
Live voorbeeld op JSBin (alleen Safari 9).
Het goede nieuws is dat het, zelfs zonder Apple te noemen, beschikbaar is in Safari 9.
Een paar dingen om te weten:
- er is een bug met achtergrondgrootte
- de functie kan worden geanimeerd
- functie vereist voorvoegsel: -webkit-filter()
Ik kijk er naar uit om deze functies in browsers geïmplementeerd te zien. SVG kan dit ook, maar dezelfde coole effecten kunnen eenvoudig worden gedaan met CSS. Sinds vorig jaar was een groot deel van het debat rond CSS gericht op architectuur, methodologie en tools. Het is goed om te onthouden dat CSS ook over grafisch ontwerp(samen met SVG).
Oké, de ondersteuning is momenteel minimaal, maar tegen het einde van het jaar zal dit mogelijk zijn op miljoenen iPhones en iPads.
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
Op op dit moment CSS-achtergrond vervagen werkt Google Chrome, Safari( mobiele en desktopversies) en Firefox 35+. Om eerder steun te krijgen Firefox-versies, moet u het SVG-filter toepassen:
Sla het bestand op als blur.svg en vervang de CSS door:
img.blur ( breedte:367; hoogte:459px; filter: url(blur.svg#blur); -webkit-filter: vervagen(3px); filter: vervagen(3px); )
Ondersteuning voor oudere versies van IE
Om hetzelfde effect te krijgen in IE 4 - 9, moet je het oude DX-filter van Microsoft gebruiken. Onze klas ziet er als volgt uit:
img.blur ( breedte:367; hoogte:459px; filter: url(blur.svg#blur); -webkit-filter: vervagen(3px); filter: vervagen(3px); filter:progid:DXImageTransform.Microsoft.Blur( PixelRadius = "3");
Het effect uitschakelen
Als u de afbeelding wilt scherpstellen, moet u deze de volgende keer dat u het CSS-filtervervaging aanroept, op geen instellen. IN in dit geval Ik verander het gedrag van het filter bij mouseover 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:
- Als u een afbeelding heeft waarvan alle randen dezelfde kleur hebben, kunt u de achtergrondkleur instellen ( achtergrondkleur) V of een containerelement van dezelfde kleur;
- 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
Wazige tekst
Voorlopig kunt u dit filter gebruiken om tekst te vervagen.
Vertaling van het artikel “ Cross-browser beeldvervaging met CSS” werd voorbereid door het vriendelijke projectteam
Probleem
In het artikel “Een lightbox-effect creëren” maakten we kennis met een manier om de aandacht af te leiden van fragmenten van een webapplicatie door ze donkerder te maken met een doorschijnende zwarte achtergrond. Maar als de pagina bevat groot aantal details, dan moet het heel erg verduisterd worden om voldoende contrast te bieden met de tekst die erbovenop staat of om de aandacht te vestigen op de lichtbak of een ander element.
Een elegantere manier is om al het andere behalve het gemarkeerde element te vervagen, naast of in plaats van donkerder te maken. Bovendien creëert het meer realistisch effect diepte, waarbij de manier wordt gesimuleerd waarop ons zicht objecten waarneemt die fysiek dichter bij ons staan als we ons erop concentreren. Dit effect is echter veel moeilijker te realiseren.
Vóór de Filter Effects-specificatie was dit helemaal niet mogelijk, en zelfs niet met behulp van een filter vervagen() de taak blijft moeilijk. Waar moet ik het vervagingsfilter op bevestigen? Of moeten we het op alles toepassen behalve specifiek onderdeel? Als we het op een element toepassen
, dan wordt de hele inhoud van de pagina vervaagd, inclusief het element waarop we de aandacht willen vestigen.De situatie lijkt sterk op de situatie die we in het artikel "Frosted Glass Effect" hebben besproken, maar we kunnen hier niet dezelfde oplossing gebruiken, omdat achter ons dialoogvenster van alles kan zitten, niet alleen achtergrondafbeelding. Wat te doen?
Oplossing
Helaas hebben we dit effect nodig extra element HTML: We zullen alle inhoud van onze pagina, behalve de elementen die niet vervaagd mogen worden, in een wrapper-element moeten verpakken en vervolgens de vervaging erop toepassen.
Het element is hiervoor ideaal
HTML
O HAI, ik ben een dialoog. Klik op mij om te negeren.
Op de foto kun je zien hoe het eruit ziet zonder achterkant. We moeten dus de klasse op het element toepassen
main.de-benadrukt (
filteren: vervagen(5px);
}
Zoals onderstaande afbeelding bevestigt, is dit al een enorme stap voorwaarts. Nu wordt de vervaging echter onmiddellijk toegepast, wat er niet erg natuurlijk uitziet en afbreuk doet aan de ervaring van de gebruiker op de pagina. Omdat CSS-filters animatie ondersteunen, kunnen we de paginavervaging vloeiend en geleidelijk laten verschijnen:
voornaamst(
overgang: .6s-filter;
}
main.de-benadrukt (
filteren: vervagen(5px);
}
Het is vaak nuttig om twee de-nadrukeffecten (donkerder en onscherper) te combineren.
Eén manier om dit te doen is door helderheid() en/of contrast() filters te gebruiken:
main.de-benadrukt (
filter: vervagen(3px) contrast(.8)
helderheid (.8);
}
Het resultaat ziet u in de figuur. Dimmen door CSS-filters betekent dat als ze niet worden ondersteund, er geen terugvaloplossing wordt toegepast. Misschien zou het verduisteren beter tot stand kunnen worden gebracht met behulp van een andere methode die ook zou kunnen dienen back-up oplossing(bijvoorbeeld door de eigenschap box-shadow te gebruiken zoals we deden in vorig geheim). Hierdoor verdwijnt ook het "glanseffect" dat rond de randen op de foto te zien is.
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 goed 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 dit geval wordt de kleur aangepast tussen zwart en de originele kleur terwijl parameters worden toegevoegd.
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:
- gehele getallen
- fractionele getallen
- 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-filters speel in browser visuele effecten, vergelijkbaar met Photoshop-filters. Filters kunnen niet alleen aan afbeeldingen worden toegevoegd, maar ook aan niet-lege elementen.
De set filters is niet beperkt tot de filters die vooraf in de browser zijn geïnstalleerd. U kunt ook SVG-filters gebruiken door deze samen met het SVG-element via de link te downloaden.
Filters zijn oorspronkelijk gemaakt als onderdeel van de SVG-specificatie. Hun taak was om op pixelrasters gebaseerde effecten toe te passen vectorafbeeldingen. Met SVG-ondersteuning in browsers is het nu mogelijk om deze effecten rechtstreeks in browsers te gebruiken.
Browsers verwerken de pagina pixel voor pixel, passen de opgegeven effecten toe en tekenen het resultaat bovenop het origineel. Door verschillende filters te gebruiken, kunt u dus verschillende effecten bereiken; ze lijken elkaar te overlappen. Hoe meer filters, hoe langer het duurt voordat de browser de pagina weergeeft.
U kunt meerdere filters tegelijkertijd toepassen. Klassieke manier dergelijke effecten toepassen - wanneer u over een element zweeft: hover .
Browser-ondersteuning
D.W.Z: ondersteunt niet
Rand: 13.0 behalve URL()
Firefox: 35.0
Chroom: 18.0 -webkit-
Safari: 9.1, 6.0 -webkit-
Opera: 40.0, 15.0 -webkit-
iOS-Safari: 9.3, 6.1 -webkit-
Android-browser: 53.0, 4.4 -webkit-
Chroom voor Android: 55.0, 47.0 -webkit-
| filter | |
|---|---|
| vervagen() | De waarde wordt opgegeven in lengte-eenheden, bijvoorbeeld px, em. Past een Gaussiaanse vervaging toe op de originele afbeelding. Hoe groter de straalwaarde, hoe groter de vervaging. Als er geen straalwaarde is opgegeven, is de standaardwaarde 0. Syntaxis filteren: vervagen(3px); |
| helderheid() | De waarde wordt opgegeven in % of in decimalen. Verandert de helderheid van het beeld. Hoe hoger de waarde, hoe helderder het beeld. De standaardwaarde is 1. Syntaxis filteren: helderheid (50%); filteren: helderheid(.5); |
| contrast() | De waarde wordt gespecificeerd in % of decimale breuken. Past het contrast van het beeld aan, d.w.z. het verschil tussen de donkerste en lichtste delen van de afbeelding/achtergrond. De standaardwaarde is 100%. Een waarde nul verbergt de originele afbeelding onder een donkergrijze achtergrond. Waarden die oplopen van 0 naar 100% of 0 naar 1 zullen de originele afbeelding geleidelijk openen naar de originele weergave, en waarden daarboven zullen het contrast tussen hooglichten en schaduwen vergroten. Syntaxis filteren: contrast(20%); filteren: contrast(.2); |
| slagschaduw() | Het filter werkt op dezelfde manier als de eigenschappen Box-Shadow en Text-Shadow. Gebruikt de volgende waarden: X-as verschuiving Y-as verschuiving vervaging uitrekken schaduwkleur. Onderscheidend kenmerk filter is dat er een schaduw wordt toegevoegd aan elementen en de inhoud ervan, rekening houdend met hun transparantie, d.w.z. als het element tekst bevat, voegt het filter een schaduw toe voor zowel de tekst als de zichtbare randen van het blok. In tegenstelling tot andere filters is het voor dit filter noodzakelijk om parameters in te stellen (het minimum is de offsetwaarde). Syntaxis filter: slagschaduw (2px 3px 5px zwart); |
| grijswaarden() | Haalt alle kleuren uit de afbeelding en maakt de uitvoer zwart-wit beeld. De waarde wordt gespecificeerd in % of decimale breuken. Hoe hoger de waarde, hoe sterker het effect. Syntaxis filter: grijswaarden(.5); filter: grijstinten (50%); |
| tint-roteren() | Verandert de kleuren van de afbeelding afhankelijk van gegeven hoek inleveren kleurenwiel. De waarde wordt opgegeven in graden van 0 graden tot 360 graden. 0deg is de standaardwaarde, wat betekent dat er geen effect is. Syntaxis filter: tint-roteren (180 graden); |
| omkeren() | Het filter maakt het beeld negatief. De waarde wordt opgegeven in %. 0% past geen filter toe, 100% converteert kleuren volledig. Syntaxis filteren: omkeren (100%); |
| dekking() | Het filter werkt op dezelfde manier als dekkingseigenschap, waardoor transparantie aan het element wordt toegevoegd. Een onderscheidend kenmerk is dat browsers dit bieden hardwareversnelling voor het filter, wat de prestaties verbetert. Extra bonus- het filter kan tegelijkertijd met andere filters worden gecombineerd, waardoor er een interessante effecten. De waarde is alleen ingesteld op %, 0% maakt het element volledig transparant en 100% heeft geen effect. Syntaxis filteren: dekking (30%); |
| verzadigen() | Regelt de kleurverzadiging en werkt volgens het principe van een contrastfilter. Een waarde van 0% verwijdert kleur, terwijl 100% geen effect heeft. Waarden van 0% tot 100% verminderen de kleurverzadiging, waarden boven de 100% verhogen de kleurverzadiging. De waarde kan worden opgegeven in % of als een geheel getal, 1 is gelijk aan 100% . Syntaxis filter: verzadigd (300%); |
| sepia() | Een effect dat de oudheid en ‘retro’ imiteert. Een waarde van 0% verandert niet verschijning element, en reproduceert het sepia-effect 100% volledig. Syntaxis filteren: sepia(150%); |
| url() | De functie accepteert de locatie van een extern XML-bestand met een SVG-filter, of een anker naar een filter in het huidige document. Syntaxis filteren: url(#filterId); /* als het filter in dit document staat */ filter: url(filter.svg#filterId); /* als het filter met id="filterId" zich in het bestand filter.svg*/ bevindt |
| geen | Standaardwaarde. Geeft geen effect aan. |
| voorletter | Stelt deze eigenschap in op de standaardwaarde. |
| erven | Erft de eigenschapswaarde van het bovenliggende element. |
