Web savjeti (1) Naučite CSS 3 na vrijeme

Ovo je prvi od mnogih (nadam se) kratkih web savjeta. Web savjeti su kratki članci u kojima vam dajem – vjerovali ili ne – savjete o mnogobrojnim aspektima web dizajna i programiranja.

Naučite CSS 3 na vrijeme

CSS 3 kuca na vrata, a vi još niste spremni? Znate li da sve više i više browsera svakim danom podržava sve više i više novih mogućnosti. I stvarno se ne pripremate za to? Iako znate da stalno dolaze nove stvari? E pa danas će se to promijeniti. Danas ćete naučiti nekoliko CSS 3 svojstava, za početak.

Sjene

Ne morate više koristiti Photoshop da biste dobili najjednostavniji drop shadow. Za to možete upotrijebiti dva nova CSS property-a.

Box Shadow

Box Shadow primjenjuje se na sve block elemente. Njegovo korištenje veoma je jednostavno . Evo vam jedan jednostavan primjer:

.element{
    -moz-box-shadow: 5px 5px 7px #777; /* Za Gecko browsere */
    -webkit-box-shadow: 5px 5px 7px #777; /* Za Webkit browsere */
    box-shadow: 5px 5px 7px #777; /*  Kada CSS 3 postane standardan, 
                               koristit će se samo ovaj property. */
}

Ovo je rezultat upotrebe box-shadowa. Stavili smo sjenu na DIV element bez ikakve upotrebe Photoshopa, background slika, i ostalih gluposti. Najjednostavnije, kako je uvijek i trebalo biti. Zbog lakše uočljivosti efekta, dodao sam i sivu pozadinu.

Dakle, format za korištenje je box-shadow: x-offset y-offset zamućenje sjene #boja.

Text Shadow

Text Shadow efekt isti je kao i box shadow s razlikom da se ovaj primjenjuje na tekst. Osnovni primjer veoma je sličan.

.element{
    text-shadow: 3px 3px 4px #AF333A;
}

Ovo je tekst sa sjenom. Namjerno nisam stavio crnu običnu sjenu, da vidite da se mogu koristiti i druge boje. Ako probate selektirati ovaj tekst, vidjet ćete da je to obični tekst, a ne slika.

Možete kombinirati i više sjena, pa dobiti još zanimljivije efekte. Samo dodajte još jedan text-shadow i postavite ga drugačije od prvog.

Format za korištenje: text-shadow: x-offset y-offset zamućenje sjene #boja.

Zaobljeni rubovi

OK, znam da vas dosta zna za ovo, ali da ponovimo gradivo. Za zaobljene rubove uvijek se trebalo pomučiti. Photoshop, rezanje, puno DIVova, floatanje, itd. Naravno postojali su i drugi načini tipa da u Photoshopu izrežete zaobljeni vrh i dno DIV elementa, pa onda iznad tog DIVa imate div-header, a ispod imate div-footer ili nešto slično. OK, dosta prisjećanja starih vremena, vrijeme je za nove tehnologije.

.element{
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    background: #ddd; /* Da se primjeti efekt */
}

I evo ga, zaobljeni rubovi, sa samo jednim malim komadićem teksta u CSS-u :)

Prozirnost

Za kraj, jedan od najjednostavnijih – prozirnost. Njime možete “narediti” nekom elementu koliko će biti proziran. Evo i jednostavnog primjera.

.element{
    background-color: #0000FF; /* Čista plava boja */
    opacity: 0.4;
}

Kao što vidite, postavljena je čista plava boja, ali kako je element poluproziran, boja više nije plava. Što je jednostavan dokaz da je element poluproziran.

Ovo nije sve

Dakako, ovo nije sve od CSS-a 3. Proučavajte mogućnosti i pripremajte se za dan kada će IE6 biti skroz zaboravljen, a Microsoft će izraditi browser koji podržava sve ove elemente.

NAPOMENA: Nažalost, svi browseri ne podržavaju prikaz ovih elemenata pa ako ništa ne vidite, nabavite si pristojan browser. :)

Odgovori

Popunite niže tražene podatke ili kliknite na neku od ikona za prijavu:

WordPress.com Logo

Ovaj komentar pišete koristeći vaš WordPress.com račun. Odjava / Izmijeni )

Twitter picture

Ovaj komentar pišete koristeći vaš Twitter račun. Odjava / Izmijeni )

Facebook slika

Ovaj komentar pišete koristeći vaš Facebook račun. Odjava / Izmijeni )

Google+ photo

Ovaj komentar pišete koristeći vaš Google+ račun. Odjava / Izmijeni )

Spajanje na %s

%d bloggers like this: