Gradient, zaobljeni ćoškovi i senke koristeći samo CSS

Nemanja Todorovski · 10. 9. 2010.

Baš nedavno sam gledao na WayBack Machine tu neku evoluciju najpoznatijih web sajtova koji su dostupni 15 i više godina i zaista je zanimljivo videti kako je tekao razvoj interneta uopšte. Mnoštvo novih tehnologija koje su se razvijale iz dana u dan i mi danas imamo neke sasvim nove standarde. Kada je konkretno web dizajn u pitanju on danas ima neuporedivo mnogo više mogućnosti nego pre 15 godina. Do pre samo par godina dizajneri su težili da korišćenjem što više slika sa efektima inpresioniraju posetioca i to se u velikoj meri koristi i danas ali evolucija se nastavlja i sada se teži ka tome da se u što većoj meri izbegne upotreba slika a isti ili slični efekti dobiju korišćenjem CSS.

Evo nekoliko mogućnosti kako da zamenite upotrebu slika CSS tehnologijom.

ZAOBLJENI UGLOVI

Kada su zaobljeni uglovi u pitanju onda većina ljudi pribegava upotrebi Photoshopa kako bi pomoću male sličice koja bi se prilepila na željenu lokaciju dobio efekat zaobljenih uglova. Ovaj efekat zaobljenih uglova možete uraditi koristeći isključivo CSS. Pogledajte u primeru ispod kako da napravite pomoću CSS neki od navedenih oblika.

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

Gradient kako se to već zove na englesku je prelivajuća pozadina stranice ili nekog elementa koja iz početne jedne boje se završava u nekoj drugoj bilo po horizontali ili vertikali. Gradient u CSS nije novina, ovu opciju podržava čak i Internet Explorer 5.5 ali dosta dugo nije bilo moguće na novijim browserima sa Gecko/Webkit rednerima napraviti prelivajuću pozadinu bez slika, tj. koristeći isključivo CSS. Nažalost da bi ovlo uradili morate uneti poptuno različite parametre kako bi svi tipova browsera mogli da izvrše stilizovanje.

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

Seneke su pored prelivajućih pozadina i zaobljenih uglova jedna od stvari kod kojih dizajneri najčešće pribegavaju rešenju u obliku slike. Naravno senke takođe možete da napravite koristeći samo CSS a u primeru ispod pogledajte kako.

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.