Filter effects - CSS

Noget om CSS filter effects der kan bruges til at lave grafiske effekter som blur, invert, grayscale osv.

Introduktion

CSS filter effects kan bruges til at lave grafiske effekter på hjemmesiden.

Man kan for eksempel tilføje skygge på et billede, blødgøre billedet eller vise det med grå eller omvendte farver.

Demoer





terninger
Hold markøren over knapperne for at bruge filter effects på billedet ovenfor




filter: none;
filter: blur(3px);
filter: grayscale(100%);
filter: invert(100%);
filter: drop-shadow(30px 10px 2px rgba(0, 0, 0, 0.3));
filter: brightness(50%);
filter: contrast(50%);
filter: hue-rotate(180deg);
filter: sepia(100%);
filter: saturate(50%);
filter: opacity(50%);


filter: url(*.svg#none);
filter: url(*.svg#blur);
filter: url(*.svg#grayscale);
filter: url(*.svg#invert);
filter: url(*.svg#drop-shadow);
filter: url(*.svg#brightness);
filter: url(*.svg#contrast);
filter: url(*.svg#hue-rotate);
filter: url(*.svg#sepia);
filter: url(*.svg#saturate);
filter: url(*.svg#opacity);

Browserunderstøttelse af CSS filter effects

Browser CSS filter effects CSS kode JavaScript kode
Firefox logo
Firefox 35
ja filter:
filter: url([...])
element.style.filter = [...]
Opera logo
Opera 12.15
nej
Safari logo
Safari 5.1.7
nej2
Chrome logo
Chrome 25.0.1364.172 m
ja3 -webkit-filter: element.style.webkitFilter = [...]
Internet Explorer logo
Internet Explorer 10.0.9200.16540
4
Alle tests er udført på Windows 7 (64-bit)


1 Understøtter kun filter: url() som bruges til at indlæse en XML fil med filtre men er mere besværlig at bruge end filter: grayscale(100%); osv. som ikke er understøttet.

2 Skulle virker fra Safari 6.0 men jeg har ikke testet det.

3 Brug eventuelt --enable-accelerated-filters når Chrome startes eller besøg about:flags og aktiver "Enable CSS Shaders" / "Aktivér CSS Shaders" for at aktiver CSS filter effects.
Af en eller anden grund forsvinder et billede hvis man i Chrome sætter en effekt også bagefter skrifter til filter: none;.

4 Se http://blogs.msdn.com/b/ie/archive/2011/10/14/svg-filter-effects-in-ie10.aspx.
Browserunderstøttelse fra caniuse.com :

Syntax

Skriv din kommentar

Spørg mig om hvad som helst
Du kan også skrive direkte til mig på
Stem
Søg
Language

Select English to navigate the website in English. Things like the navigation menu and contact form will be in English, but the main content on each page will not be translated.