En gång berode vi rent på Photoshop för att skapa fina bildeffekter. Dessa dagar ändå vänder vi mer och mer till ren CSS för att lägga till ögonljus i våra bilder. Att tillämpa anpassade bildbehandlingar med hjälp av kod ger ett oändligt flexibelt arbetsflöde som är enkelt att tweak när som helst.
Idag går jag igenom dig genom att skapa några extremt enkla och roliga CSS-bilder. Från polaroider till vignetter tror du inte vad vi kan dra av.
Polaroid
demo: Klicka här för att se demo på Tinkerbin.
Vårt första bildtrick är en enkel polaroidteknik. Genom att använda olika gränsstorlekar kan vi enkelt skapa den vita ramen som omger den populära snabbfotostilen från några decennier sedan.
Visserligen är denna effekt super ostlik, men jag är säker på att du kan komma med en anständig applikation.
html
Vår HTML för denna effekt är en div med klassen? Polaroid? applicerad. Då använder vi både en paragraf och en bild för vår kärnmarkering. Jag använder en 200px med 200px bild (det här betyder).
Resultatet ska se ut som två 5px gränsar, en svart och en vit.
CSS
Nu när du känner till hur mycket skuggor fungerar, är det dags att implementera vår faktiska CSS. Den verkliga bummeren är att vi måste använda tre olika versioner av detta, men vi vill definitivt se till att alla möjliga webbläsare är täckta.
Vinjett
demo: Klicka här för att se demo på Tinkerbin.
Den här gången kommer vi att använda en annan typ av boxskugga för att skapa en helt annan effekt. Genom att använda en? Inset? skugga kan vi skapa en fin Photoshop-liknande vignett på en bild med endast CSS. Det är ett ganska snyggt trick som verkligen kan göra att dina bilder sticker ut.
html
Den här gången behöver vi en tom div. Du kan valfritt placera lite text inuti men bilden måste sättas in via CSS. Detta beror på att insatsskuggan faktiskt kommer att visas under innehållet som läggs in via HTML, vilket innebär att en bild skulle gömma den helt.
CSS
För CSS måste vi ställa in en bild i bakgrunden och definiera sedan bredd och höjd för div. När du har skapat din div är det dags att tillämpa skuggorna. Observera att insatsvärdet är implementerat och både vertikal och horisontell förskjutning är inställd på 0.
Det kanske är konstigt att jag implementerade tre versioner av samma exakta insatsskugga för varje webbläsare. Anledningen till att jag gjorde det här är helt enkelt för att jag ville ha en riktigt mörk, intensiv vignett och en skugga bara klippte inte den!
Grungy Photo
demo: Klicka här för att se demo på Tinkerbin.
För att förbereda för den här måste du skapa en transparent grungy bakgrundsbildsöverläggning. Jag använde denna textur för att skapa denna bild. Tricket här är att göra strukturen exakt samma färg som bakgrunden på sidan du ska placera den på.
I grund och botten vad vi ska göra är att utnyttja flera bakgrunder för att applicera en återanvändbar grungestruktur. Vi kunde maskera bilden med texturen, men det skulle inte stödjas utanför Webkit, så det här är ett mycket mer webbläsningsvänligt sätt att ta itu med.
html
Samma borr som förra gången, skapa bara en tom div som vi kan applicera bakgrundsbilder till.
CSS
Bara för att mixa upp saker, låt oss få grungeffekten bara att visas på svävaren. Till att börja med tillämpar vi en bakgrundsbild, storlekar div och skapar en liten vignett som förra gången. Nu är allt vi behöver göra att lägga till vår grunge bakgrundsbild på svävaren.
CSS flera bakgrunder är verkligen lätta att arbeta med. Precis som med skuggorna tidigare, lägg bara till en andra med ett komma för att skilja de två. Grunge bilden går först eftersom vi vill ha det på toppen.
Slutsats
Jag hoppas du njöt av dessa fyra CSS-bilder. Var och en borde bara ta en minut att ansöka, men alla lägger till en bestämd stilhöjning för annars vanliga bilder. Som med alla designtrick, var noga med att använda dessa selektivt och gå inte överbord!
Om du har några snabba CSS-bildeffekter av din egen, låt oss veta i kommentarerna. Också alla demos ovan är levande och redigerbara så var noga med att tweak dem och lämna en länk till din version nedan.