Senke preko CSS-a

Jedna od glavnih fora sa dizajnom je i konstantan trud da sve bude savršeno, takozvani „pixel perfect design“. Upravo je to stavka koja odvaja profesionalce od wannabe dizajnera. Lično me nervira kada vidim da ljudi koriste raster i slike gde god im je to lakše. Kao prvo, jpg format nije baš web-friendly, takođe ni Gugl ne voli slike jer ne može da provali tako lako semantiku i značenje sadržaja, a još uvek nije ni zanemarljiva brzina čitavanja stranice (iako je širokopojasni Internet prilično „penetrirao međ’ narod“, sve više se koristi i mobilni Internet, gde opet treba ubrzati load.)

Dakle, umesto da zbog jednog prostog efekta senke komplikuješ sa Photoshopom i radiš neke slike koje posle jedva umuljaš u html, lepo naučiš par linija koda i sve završiš preko CSS-a.

Sama specifikacija tj. dragi nam W3C senke definiše na sledeći način:

.shadow {
	box-shadow: 3px 3px 4px #000;
}

Prva vrednost je offset (udaljenost od objekta) po x osi, druga po y osi dok treća predstavlja poluprečnik širenja senke. Četvrta vrednost je boja senke.

Zbog kompatibilnosti sa pregledačima neta (Chrome, Safari, Firefox, Chrome…) potreban je prefiks koji definiše tehnologiju browsera. Dakle, da bi bili sigurni da sve radi CSS kreirajte na sledeći način:


.shadow {
	-moz-box-shadow: 3px 3px 4px #000;
	-webkit-box-shadow: 3px 3px 4px #000;
	box-shadow: 3px 3px 4px #000;
}

Gde je tu IE?

Uh, najveća pošast inače solidnog OS-a, MIcrosoft XP-a je mrgudni Internet Explorer 6. CSS hakovi su do skoro bila obavezna veština koju su tražili mnogi poslodavci koji su tražili dizajnere. Pa kako sad da IE prikazuje senke?

Drop shadow daje senku koja nema fade-out, a sa druge strane shadow filter potpuno drugačije renderuje senku (koristi strenght & direction). Tek kada ukombinujemo ta dva filtera dobija se efekat senke i za Internet Explorer.


.shadow {
	/* Za Internet Explorer 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
	/* Za Internet Explorer 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}

Odnosno kada se formira združeni CSS kod izgleda na sledeći način:


.shadow {
	-moz-box-shadow: 3px 3px 4px #000;
	-webkit-box-shadow: 3px 3px 4px #000;
	box-shadow: 3px 3px 4px #000;
	/* Za Internet Explorer 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
	/* Za Internet Explorer 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}

Advertisements

Ostavite odgovor

Popunite detalje ispod ili pritisnite na ikonicu da biste se prijavili:

WordPress.com logo

Komentarišet koristeći svoj WordPress.com nalog. Odjavite se / Promeni )

Slika na Tviteru

Komentarišet koristeći svoj Twitter nalog. Odjavite se / Promeni )

Fejsbukova fotografija

Komentarišet koristeći svoj Facebook nalog. Odjavite se / Promeni )

Google+ photo

Komentarišet koristeći svoj Google+ nalog. Odjavite se / Promeni )

Povezivanje sa %s