Gradient, zaobljeni ćoškovi i senke koristeći samo CSS
|
Evo nekoliko mogućnosti kako da zamenite upotrebu slika CSS tehnologijom.
ZAOBLJENI UGLOVI
PRIMER A
CSS kod za Webkit rendere poput Google Chrome, Safari, Konqueror itd:
-webkit-border-radius-topleft:10px; -webkit-border-radius-topright:10px; -webkit-border-radius-bottomleft:10px; -webkit-border-radius-bottomright:10px;
CSS kod za Gecko rendere poput Mozilla Firefox, Flock, Camino itd:
-moz-border-radius-topleft:10px; -moz-border-radius-topright:10px; -moz-border-radius-bottomleft:10px; -moz-border-radius-bottomright:10px;
CSS kod za Internet Explorer i Opera Čitače
border-top-left-radius:10px; border-top-right-radius:10px; border-bottom-left-radius:10px; border-bottom-right-radius:10px;
Kombinovan CSS kod primera A za sve browsere:
div.zaobljeniuglovi { /* Opis za Safari, Google Chrome i druge browsere sa Webkit renderom */<strong> </strong>-webkit-border-radius-topleft:10px; -webkit-border-radius-topright:10px; -webkit-border-radius-bottomleft:10px; -webkit-border-radius-bottomright:10px; /* Opis za Firefox, Flock, Camino i druge browsere sa Gecko renderom */ -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px; -moz-border-radius-bottomleft:10px; -moz-border-radius-bottomright:10px; /* Opis za Internet Explorer i Operu */ border-top-left-radius:10px; border-top-right-radius:10px; border-bottom-left-radius:10px; border-bottom-right-radius:10px; /* Opis diva */ width: 100px; height: 100px; background: #dbdbdb; float:left; text-align: center; }
PRIMER B
CSS kod za Webkit rendere poput Google Chrome, Safari, Konqueror itd:
-webkit-border-radius-topleft:50px; -webkit-border-radius-topright:50px; -webkit-border-radius-bottomleft:50px; -webkit-border-radius-bottomright:50px;
CSS kod za Gecko rendere poput Mozilla Firefox, Flock, Camino itd:
-moz-border-radius-topleft:50px; -moz-border-radius-topright:50px; -moz-border-radius-bottomleft:50px; -moz-border-radius-bottomright:50px;
CSS kod za Internet Explorer i Opera Čitače
border-top-left-radius:50px; border-top-right-radius:50px; border-bottom-left-radius:50px; border-bottom-right-radius:50px;
Kombinovan CSS kod primera B za sve browsere:
div.zaobljeniuglovi35 { /* Opis za Safari, Google Chrome i druge browsere sa Webkit renderom */<strong> </strong>-webkit-border-radius-topleft:50px; -webkit-border-radius-topright:50px; -webkit-border-radius-bottomleft:50px; -webkit-border-radius-bottomright:50px; /* Opis za Firefox i druge browsere sa Gecko renderom */ -moz-border-radius-topleft:50px; -moz-border-radius-topright:50px; -moz-border-radius-bottomleft:50px; -moz-border-radius-bottomright:50px; /* Opis za Internet Explorer i Operu */ border-top-left-radius:50px; border-top-right-radius:50px; border-bottom-left-radius:50px; border-bottom-right-radius:50px; /* Opis diva */ width: 100px; height: 100px; background: #dbdbdb; float:left; text-align: center; }
PRIMER C
CSS kod za Webkit rendere poput Google Chrome, Safari, Konqueror itd:
-webkit-border-radius-topleft:0px; -webkit-border-radius-topright:50px; -webkit-border-radius-bottomleft:50px; -webkit-border-radius-bottomright:0px;
CSS kod za Gecko rendere poput Mozilla Firefox, Flock, Camino itd:
-moz-border-radius-topleft:0px; -moz-border-radius-topright:50px; -moz-border-radius-bottomleft:50px; -moz-border-radius-bottomright:0px;
CSS kod za Internet Explorer i Opera Čitače
border-top-left-radius:0px; border-top-right-radius:50px; border-bottom-left-radius:50px; border-bottom-right-radius:0px;
Kombinovan CSS kod primera C za sve browsere:
div.zaobljeniuglovi45m { /* Opis za Safari, Google Chrome i druge browsere sa Webkit renderom */<strong> </strong>-webkit-border-radius-topleft:0px; -webkit-border-radius-topright:50px; -webkit-border-radius-bottomleft:50px; -webkit-border-radius-bottomright:0px; /* Opis za Firefox i druge browsere sa Gecko renderom */ -moz-border-radius-topleft:0px; -moz-border-radius-topright:50px; -moz-border-radius-bottomleft:50px; -moz-border-radius-bottomright:0px; /* Opis za Internet Explorer i Operu */ border-top-left-radius:0px; border-top-right-radius:50px; border-bottom-left-radius:50px; border-bottom-right-radius:0px; /* Opis diva */ width: 100px; height: 100px; background: #dbdbdb; float:left; text-align: center; }
PRELIVAJUĆA POZADINA
Primer kako da napravite veoma sličnu prelivajuću pozadinu za sve browsere.
LINEARNO
CSS kod za Webkit rendere poput Google Chrome, Safari, Konqueror itd:
background: -webkit-gradient(linear, center top, center bottom, from(#404040), to(#777777), color-stop(1, #464646));
CSS kod za Gecko rendere poput Mozilla Firefox, Flock, Camino itd:
background: -moz-linear-gradient(top, #404040, #777777 70%);
CSS kod za Internet Explorer 5.5, 6 i 7
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#FF404040, endColorStr=#FF707070, GradientType=0);
Trenutno podešavanje označava da se boja preliva od gore do prema dole, ukoliko želite efekat prelivanja sa leva na desno promenite vrednost GradientType na 1
CSS kod za Internet Explorer 8
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF404040, endColorstr=#FF707070, GradientType=0)";
Trenutno podešavanje označava da se boja preliva od gore do prema dole, ukoliko želite efekat prelivanja sa leva na desno promenite vrednost GradientType na 1
Kombinovan CSS kod za sve browsere:
div.nekiklas { /* Opis diva */ width: 300px; height: 100px; color: #ffffff; padding: 10px; /* Opis za Safari, Google Chrome i druge browsere sa Webkit renderom */ background: -webkit-gradient(linear, center top, center bottom, from(#404040), to(#777777), color-stop(1, #464646)); /* Opis za Firefox, Flock, Camino i druge browsere sa Gecko renderom */ background: -moz-linear-gradient(top, #404040, #777777 70%); /* Opis za Internet Explorer 5.5, 6 i 7 */ filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#FF404040, endColorStr=#FF707070, GradientType=0); /* Opis za Internet Explorer 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF404040, endColorstr=#FF707070, GradientType=0)"; }
REDIAL (Primer ispod će videti samo korisnici nekog od browsera sa Webkit ili Gecko renderom poput Google Chrome, Firefox, Safari itd)
CSS kod za Webkit rendere poput Google Chrome, Safari, Konqueror itd:
background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 200, from(#dbdbdb), to(#404040));
CSS kod za Gecko rendere poput Mozilla Firefox, Flock, Camino itd:
background: -moz-radial-gradient(50% 50%, farthest-side, #dbdbdb, #404040);
NAPOMENA: Redial efekat ne radi u Internet Explorer i Opera čitačima.
Kombinovani CSS kod za Gecko/Webkit rendere:
div.nekiklas2 { color: #ffffff; width: 300px; height: 100px; padding: 10px; /* For WebKit (Safari, Google Chrome etc) */ background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 200, from(#dbdbdb), to(#404040)); /* For Mozilla/Gecko (Firefox etc) */ background: -moz-radial-gradient(50% 50%, farthest-side, #dbdbdb, #404040); /* Ne radi za Internet Explorer i Operu */ }
SENKE
PRIMER
CSS kod za Safari, Google Chrome i druge browsere sa Webkit renderom
-webkit-box-shadow: 3px 3px 4px #404040;
CSS kod za Firefox Flock, Camino itd i druge browsere sa Gecko renderom:
-moz-box-shadow: 3px 3px 4px #404040;
CSS kod za Operu
box-shadow: 3px 3px 4px #404040;
CSS kod za Internet Explorer 5,5, 6 i 7
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#404040');
CSS kod za Internet Explorer 8
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#404040')";
Kombinovani CSS kod za sve browsere:
div.senke { width: 300px; height: 100px; background: #dbdbdb; /* Opis za Safari, Google Chrome i druge browsere sa Webkit renderom */ -webkit-box-shadow: 3px 3px 4px #404040; /* Opis za Firefox i druge browsere sa Gecko renderom */ -moz-box-shadow: 3px 3px 4px #404040; /* Opis za Operu */ box-shadow: 3px 3px 4px #404040; /* For IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#404040')"; /* For IE 5.5 - 7 */ filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#404040'); }
Za sam kraj još da dodam da su ovo samo primeri, kombinacija je jako mnogo kako možete da koristite CSS za ovu potrebu. Probajte sami da kombinujete, menjate dok ne dobijete ono što vam je potrebno.