Så här tar du bort en tiltskiftningseffekt med Webkit CSS-filter (CSS)

Tack vare mobila bildredigeringsapplikationer som Instagram verkar faux tilt shift fadden vara i sin höjd. Men varför ska vi låta iPhone ha det roliga? Låt oss byta ut en tilt-shift-effekt med ren CSS.

I den här handledningen lär vi oss alla om de nya CSS-filerna i Webkit och hur du implementerar en bildmask i CSS. Vi använder sedan dessa tekniker för vår slutliga tilt-shift-effekt. Vi kommer att slå på alla slags galna saker så läs vidare och vi kommer ha roligt.

Sneak Peek

Vill du se vad vi bygger? Hoppa framåt och titta på demo, kom tillbaka och se hur du gör det själv.

demo: Klicka här för att starta.

Möt Webkit-filter

Under de senaste åren har CSS någonsin tagit så långsamt över de områden som vi brukade vända sig till Photoshop för: gradienter, avrundade hörn, skuggor etc. Nyligen tog Webkit ett stort steg framåt på detta område med introduktionen av CSS bildfilter.

Vad händer om du kan ändra mättnad, kontrast eller till och med suddning av en bild med ren CSS? Möjligheterna skulle vara fantastiska. Förbered dig själv, för att du kan göra exakt det med en snabb kodkod.

Startbild

Vi behöver en bild för att visa upp alla de tekniker som vi ska spela med, så jag tog tag i New York Aerial Shot nedan från fotografen Nathan Siemers.

ljusstyrka

Ljusstyrkan kan antingen acceptera en procentandel (10%) eller ett decimal (0,1). Noll motsvarar normal ljusstyrka så 5% ökar ljusstyrkan och -5% mörkar faktiskt bilden.

 / * Ljusstyrka * / -webkit-filter: ljusstyrka (-5%);

Fläck

Blurfiltret accepterar ett pixelvärde som liknar oskärpa på en boxskugga. Ju högre pixelvärdet desto tyngre blir suddningen.

 / * Blur * / -webkit-filter: oskärpa (5px);

Kontrast

Kontrast accepterar ett procentbaserat värde. 100% är normalt, något ovanför som lägger till kontrast, allt under minskar kontrasten.

 / * Kontrast * / -webkit-filter: Kontrast (130%);

Gråskale

Gråskala tillåter dig att gradvis desaturera en bild med procentandelar. 0% är fullfärg, 100% är gråskala. Exemplet nedan visar vår bild på 50%.

 / * Gråskala * / -webkit-filter: gråskala (50%);

Hue Rotate

Hue rotera kan du flytta nyans genom metaforen av ett färghjul. Du justerar rotationen i grader med noll som det normala, ej justerade värdet.

 / * Hue Rotate * / -webkit-filter: nyans rotera (30deg);

Invertera

Gör exakt vad det låter som det gör, accepterar en procentandel från noll (standard) till 100%;

 / * Invert * / -webkit-filter: invert (100%);

sepia

Svartvitt gör du inte för dig? Lägg till en viss ålder med Sepia-filtret. Nollprocent innehåller ingen effekt, 100% är full effekt.

 / * Sepia * / -webkit-filter: sepia (100%);

Browser Support

För närvarande finns det inte mycket stöd för CSS3-filter. Enligt CanIUse borde de arbeta i Chrome, Safari 6, iOS Safari 6 och Blackberry Browser 10. Alla dessa kräver? -Webkit? prefix, men för framtida bevis det kanske du vill lägga till de andra:

 -webkit-filter: gråskala (50%); -moz-filter: gråskala (50%); -ms-filter: gråskala (50%); -o-filter: gråskala (50%); filter: gråskala (50%);

Steg 1: Tilt Shift HTML

Nu när vi vet vilka CSS-filter som är tillgängliga för oss, kan vi börja bygga vår tilt-shift-demo. För att börja, lägg ut följande HTML i din favorit kodredigerare:

  <img src="//lesptitesaffairesdemayl.be/img/images_1/how-to-pull-off-a-tilt-shift-effect-with-webkit-css-filters_10.jpg"> <h2><em>Steg 5:</em> Gör bottenbildsgråtonen</h2> <p>För att avsluta, se till att du går tillbaka och lägger till gråskalfiltret i bottenbilden så att de två matchningarna. </p>     <textarea wrap="soft" readonly=""> .tiltshift {background: url (city.jpg); höjd: 425px; bredd: 640px; marginal: 30px auto; gränsen: 10px solid #fff; -webkit-filter: gråskala (100%); -webkit-box-skugga: 5px 5px 10px rgba (0,0,0,0,8); boxskugga: 5px 5px 10px rgba (0,0,0,0,8); }

Se den i aktion

Det är allt det finns! Vi har nu en fin liten ren CSS tilt shift effekt. Kolla in den levande versionen i demo nedan.

demo: Klicka här för att starta.

tiltShift.js

Talangfulla utvecklare Noel Tock och Adam Yanalunas har skapat ett lättanvänt jQuery-plugin som hjälper dig att använda CSS-filter för att skapa en liknande tilt-shift-effekt. Hämta tiltShift.js och ge det ett skott.

Slutsats: Varför stör?

Tutorials som detta ger alltid en stor fråga: borde vi använda Webkit bara egenskaper i arbetsflöden för professionell utveckling? Svaret är alltid detsamma: nej. Detta är ett experiment, ett roligt sätt att lära sig om möjligheterna till framtiden för CSS. En dag kan CSS-filter vara en standardfunktion. För nu är de bara en idé.

Det ledsna är att så många utvecklare skriver bort saker som detta tills de har nått en mer officiell status. Som medlem i webbutvecklingsgemenskapen bör du prova potentiella nya funktioner för att se hur de implementeras och vara stämma om din åsikt. Även om du känner att du är en oväsentlig röst, kom ihåg att din åsikt är viktig och att du är en del av en större helhet som kan och påverkar webens framtid.

På den notisen, vad tycker du om CSS-filter? Lämna en kommentar nedan och låt mig veta. Jag tycker personligen att de är en blast och kan leda till många coola projekt. Ska allt detta verkligen göras med CSS? Du berätta för mig.