Baguje.COM

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

Nemanja Todorovski
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

A

CSS kod za Webkit rendere poput Google Chrome, Safari, Konqueror itd:
[code language=”css”]-webkit-border-radius-topleft:10px;
-webkit-border-radius-topright:10px;
-webkit-border-radius-bottomleft:10px;
-webkit-border-radius-bottomright:10px;[/code]
CSS kod za Gecko rendere poput Mozilla Firefox, Flock, Camino itd:
[code language=”css”]-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;[/code]
CSS kod za Internet Explorer i Opera Čitače
[code language=”css”]border-top-left-radius:10px;
border-top-right-radius:10px;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;[/code]
Kombinovan CSS kod primera A za sve browsere:
[code language=”css”]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;
}[/code]
PRIMER B

B

CSS kod za Webkit rendere poput Google Chrome, Safari, Konqueror itd:
[code language=”css”]-webkit-border-radius-topleft:50px;
-webkit-border-radius-topright:50px;
-webkit-border-radius-bottomleft:50px;
-webkit-border-radius-bottomright:50px;[/code]
CSS kod za Gecko rendere poput Mozilla Firefox, Flock, Camino itd:
[code language=”css”]-moz-border-radius-topleft:50px;
-moz-border-radius-topright:50px;
-moz-border-radius-bottomleft:50px;
-moz-border-radius-bottomright:50px;[/code]
CSS kod za Internet Explorer i Opera Čitače
[code language=”css”]border-top-left-radius:50px;
border-top-right-radius:50px;
border-bottom-left-radius:50px;
border-bottom-right-radius:50px;[/code]
Kombinovan CSS kod primera B za sve browsere:
[code language=”css”]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;
}[/code]
PRIMER C

C

CSS kod za Webkit rendere poput Google Chrome, Safari, Konqueror itd:
[code language=”css”]-webkit-border-radius-topleft:0px;
-webkit-border-radius-topright:50px;
-webkit-border-radius-bottomleft:50px;
-webkit-border-radius-bottomright:0px;[/code]
CSS kod za Gecko rendere poput Mozilla Firefox, Flock, Camino itd:
[code language=”css”]-moz-border-radius-topleft:0px;
-moz-border-radius-topright:50px;
-moz-border-radius-bottomleft:50px;
-moz-border-radius-bottomright:0px;[/code]
CSS kod za Internet Explorer i Opera Čitače
[code language=”css”]border-top-left-radius:0px;
border-top-right-radius:50px;
border-bottom-left-radius:50px;
border-bottom-right-radius:0px;[/code]
Kombinovan CSS kod primera C za sve browsere:
[code language=”css”]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;
}[/code]
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:
[code language=”css”]background: -webkit-gradient(linear, center top, center bottom, from(#404040), to(#777777), color-stop(1, #464646));[/code]
CSS kod za Gecko rendere poput Mozilla Firefox, Flock, Camino itd:
[code language=”css”]background: -moz-linear-gradient(top, #404040, #777777 70%);[/code]
CSS kod za Internet Explorer 5.5, 6 i 7
[code language=”css”]filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#FF404040, endColorStr=#FF707070, GradientType=0);[/code]
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
[code language=”css”]-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF404040, endColorstr=#FF707070, GradientType=0)";[/code]
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:
[code language=”css”]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)";
}[/code]
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:
[code language=”css”]background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 200, from(#dbdbdb), to(#404040));[/code]
CSS kod za Gecko rendere poput Mozilla Firefox, Flock, Camino itd:
[code language=”css”]background: -moz-radial-gradient(50% 50%, farthest-side, #dbdbdb, #404040);[/code]
NAPOMENA: Redial efekat ne radi u Internet Explorer i Opera čitačima.

Kombinovani CSS kod za Gecko/Webkit rendere:
[code language=”css”]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 */
}[/code]
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
[code language=”css”]-webkit-box-shadow: 3px 3px 4px #404040;[/code]
CSS kod za Firefox Flock, Camino itd i druge browsere sa Gecko renderom:
[code language=”css”]-moz-box-shadow: 3px 3px 4px #404040;[/code]
CSS kod za Operu
[code language=”css”]box-shadow: 3px 3px 4px #404040;[/code]
CSS kod za Internet Explorer 5,5, 6 i 7
[code language=”css”]filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color=’#404040′);[/code]
CSS kod za Internet Explorer 8
[code language=”css”]-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color=’#404040′)";[/code]
Kombinovani CSS kod za sve browsere:
[code language=”css”]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′);
}[/code]
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.

Exit mobile version