CSS-filter är ett kraftfullt verktyg som författare kan använda för att uppnå varierande visuella effekter (ungefär som Photoshop-filter för webbläsaren). CSS- filteregenskapen ger åtkomst till effekter som oskärpa eller färgförskjutning på elementets återgivning innan elementet visas. Filter används ofta för att justera återgivningen av en bild, en bakgrund eller en kant.
Syntaksen är:
.filter-me ( filter: blur(3px); filter: grayscale(1); filter: saturate(2.2); filter: none; /* remove existing filter */ )Det finns ett antal funktioner att använda för värdet:
blur()brightness()contrast()drop-shadow()grayscale()hue-rotate()invert()opacity()saturate()sepia()url()- för tillämpning av SVG-filtercustom()- "kommer snart"
Flera funktioner kan användas, mellanslag separerade.
.do-more-things ( filter: blur(20px) grayscale(20%); )Filterfunktioner
För att använda CSS-filteregenskapen anger du ett värde för en av följande funktioner som listas ovan. Om värdet är ogiltigt returnerar funktionen "ingen". Med undantag av vad som anges, accepterar funktionerna som tar ett värde uttryckt med procentsignal (som i 34%) också värdet uttryckt som decimal (som i 0,34).
Här är en demo som låter dig spela med enskilda filter lite:
gråskala ()
filter: grayscale(20%) /* same as… */ filter: grayscale(0.2);Konverterar den inmatade bilden till gråskala. Värdet på "belopp" definierar andelen av konverteringen. Ett värde på 100% är helt gråskala. Ett värde på 0% lämnar ingången oförändrad. Värden mellan 0% och 100% är linjära multiplikatorer för effekten. Om parametern "mängd" saknas används ett värde på 100%. Negativa värden är inte tillåtna.
sepia ()
filter: sepia(0.8); /* same as… */ filter: sepia(80%);Konverterar den inmatade bilden till sepia. Värdet på "belopp" definierar andelen av konverteringen. Ett värde på 100% är helt sepia. Värdet 0 lämnar ingången oförändrad. Värden mellan 0% och 100% är linjära multiplikatorer för effekten. Om parametern "mängd" saknas används ett värde på 100%. Negativa värden är inte tillåtna.
mätta()
filter: saturate(2); /* same as… */ filter: sature(200%);Mättar den inmatade bilden. Värdet på "belopp" definierar andelen av konverteringen. Ett värde på 0% är helt omättat. Ett värde på 100% lämnar ingången oförändrad. Andra värden är linjära multiplikatorer på effekten. Värden över 100% är tillåtna, vilket ger supermättade resultat. Om parametern "mängd" saknas används ett värde på 100%. Negativa värden är inte tillåtna.
nyans-rotera ()
filter: hue-rotate(180deg); /* same as… */ filter: hue-rotate(0.5turn);Tillämpar en nyansrotation på den inmatade bilden. Värdet på “vinkel” definierar antalet grader runt den färgcirkel som ingångsproverna kommer att justeras. Värdet 0deg lämnar ingången oförändrad. Om "vinkel" -parametern saknas används ett värde på 0deg. Det maximala värdet är 360deg.
invertera()
filter: invert(100%);Inverterar proverna i den inmatade bilden. Värdet på "belopp" definierar andelen av konverteringen. Ett värde på 100% är helt inverterat. Ett värde på 0% lämnar ingången oförändrad. Värden mellan 0% och 100% är linjära multiplikatorer för effekten. Om parametern "mängd" saknas används ett värde på 100%. Negativa värden är inte tillåtna.
opacitet()
filter: opacity(0.5); /* same as… */ filter: opacity(50%);Tillämpar transparens på proverna i den inmatade bilden. Värdet på "belopp" definierar andelen av konverteringen. Ett värde på 0% är helt transparent. Ett värde på 100% lämnar ingången oförändrad. Värden mellan 0% och 100% är linjära multiplikatorer för effekten. Detta motsvarar att multiplicera ingångsbildproverna med mängd. Om parametern "mängd" saknas används ett värde på 100%. Denna funktion liknar den mer etablerade opacitetsegenskapen; skillnaden är att med webbläsare erbjuder vissa webbläsare hårdvaruacceleration för bättre prestanda. Negativa värden är inte tillåtna.
ljusstyrka ()
filter: brightness(0.5); /* same as… */ filter: brightness(50%);Tillämpar en linjär multiplikator på inmatad bild, vilket gör att den verkar mer eller mindre ljus. Ett värde på 0% skapar en bild som är helt svart. Ett värde på 100% lämnar ingången oförändrad. Andra värden är linjära multiplikatorer på effekten. Värden på ett belopp över 100% är tillåtna, vilket ger ljusare resultat. Om parametern "mängd" saknas används ett värde på 100%.
kontrast()
filter: contrast(4); /* same as… */ filter: contrast(400%);Justerar ingångens kontrast. Ett värde på 0% skapar en bild som är helt svart. Ett värde på 100% lämnar ingången oförändrad. Värden över beloppet över 100% är tillåtna, vilket ger resultat med mindre kontrast. Om parametern "mängd" saknas används ett värde på 100%.
fläck()
filter: blur(5px); filter: blur(1rem);Tillämpar en Gauss-suddighet på den inmatade bilden. Värdet på 'radie' definierar värdet av standardavvikelsen till den Gaussiska funktionen, eller hur många pixlar på skärmen som smälter in i varandra, så ett större värde kommer att skapa mer suddighet. Om ingen parameter tillhandahålls används ett värde 0. Parametern anges som en CSS-längd, men accepterar inte procentvärden.
drop-shadow ()
filter: drop-shadow((2,3) ?)Tillämpar en skuggeffekt på den inmatade bilden. En skugga är i själva verket en suddig, förskjuten version av inmatningsbildens alfamask ritad i en viss färg, sammansatt under bilden. Funktionen accepterar en typ av parameter (definierad i CSS3-bakgrunder), med undantaget att nyckelordet 'infoga' inte är tillåtet.
Den här funktionen liknar den mer etablerade box-shadow-egenskapen; skillnaden är att med webbläsare erbjuder vissa webbläsare hårdvaruacceleration för bättre prestanda.
Drop-shadow härmar också de avsedda objekten som beskrivs naturligt till skillnad från box-shadowatt endast behandla rutan som dess väg.
Precis som med text-skugga finns det ingen 'spread' -parameter för att skapa en solid skugga som är större än objektet.
url ()
filter: url()Den url()funktionen tar platsen för en XML-fil som anger en SVG filter och kan inkludera ett ankare till ett specifikt filterelement. Här är en handledning som fungerar som en trevlig introduktion till SVG-filter med en rolig demo.
Animera filter
Eftersom filter är animerbara kan det öppna dörrarna för en hel massa roligt.
Anteckningar
Du kan kombinera valfritt antal funktioner för att manipulera återgivningen, men ordning är fortfarande viktig (dvs. att använda grayscale()efter sepia()kommer att resultera i helt grå utdata).
Ett beräknat värde på annat än "inget" resulterar i att skapa ett staplingskontext på samma sätt som CSS-opacitet gör. Filteregenskapen har ingen inverkan på geometrin hos målelementets rutmodell, även om filter kan orsaka målning utanför ett elements kantlinje. Alla delar av målelementet påverkas av filterfunktioner. Detta inkluderar allt innehåll, bakgrund, ramar, textdekoration, konturer och synlig rullningsmekanism för det element som filtret appliceras på och dess efterkommande. Filter kan också appliceras på inbyggt innehåll, till exempel enskilda textomfång.
Specifikationen introducerar också en filter(image-URL, filter-functions)omslagsfunktion för en bild. Det låter dig filtrera vilken bild som helst när du använder den i CSS. Du kan till exempel suddiga en bakgrundsbild utan att suddiga texten. Denna filterfunktion stöds ännu inte i webbläsare. Under tiden kan du tillämpa både bakgrunden och filtret på ett pseudo-element för att skapa en liknande effekt.
IE-filterfilter
Används också filterfastigheten, som:
.half-opacity ( -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); )Används mest för opacitet när du behövde stödja IE 8 och senare.
Mer information
- W3C filtereffektspecifikation
- http://html5-demos.appspot.com/static/css/filters/index.html
- Bennett Feely's Filters Gallery
- MDN-dokument
- Kan jag använda
- http://www.broken-links.com/2013/11/20/cross-browser-filters-css-svg
- https://github.com/Schepp/CSS-Filters-Polyfill
- Förstå CSS-filtereffekter
Webbläsarstöd
Denna webbläsares supportdata kommer från Caniuse, som har mer detaljer. Ett nummer indikerar att webbläsaren stöder funktionen i den versionen och uppåt.
Skrivbord
| Krom | Firefox | IE | Kant | Safari |
|---|---|---|---|---|
| 18 * | 35 | Nej | 79 | 6 * |
Mobil / surfplatta
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4,4 * | 6,0-6,1 * |