U ovom tekstu obradit ćemo neke korisne načine oblikovanja u CSSu koje ste sigurno do sada već vidjeli u primjeni na mnogim stranicama. Nemaju neki zajednički nazivnik, no ako ih pažljivo dozirate i primjenite, učinit će vašu stranicu atraktivnijom i ljepšom :-)!
Primjere nećemo davati za svaki trik zasebno, no pri kraju teksta pronaći ćete primjer koji ilustrira nekoliko tehnika koje će biti spomenute.
Krenimo!
Fontovi na stranici
Negdje na samim počecima učenja CSSa sigurno ste čuli da na web stranici smijete koristiti samo uobičajene fontove - one koje na svom računalu ima instalirana većina korisnika. To je razlog zašto font obično zadajemo pomoću svojstva font-family gdje zadajemo više fontova odjednom, ako korisnik nema instaliran prvi font sa liste, onda probajmo s drugim itd...
Potpuna istina je ipak malo drugačija: već dosta dugo možemo koristiti i egzotične i rijetke fontove, no to ima svoju cijenu.
Kako dakle uključiti neki font na stranicu i zadati stil pomoću tog fonta?
Stvar je zapravo prilično jednostavna: kao prvo morate povezati datoteku fonta sa svojim dokumentom pomoću pravila @font-face, npr:
@font-face {
font-family: 'bebas_neuebook';
src: url('../fonts/BebasNeue Book-webfont.ttf');
font-weight: normal;
font-style: normal;
}
Tu zapravo deklariramo novi font, pomoću svojstva font-family zadajemo ime koje ćemo kasnije koristiti u CSSu, a pomoću svojstva url zadajemo lokaciju datoteke fonta. Ta lokacija može biti relativna (što znači da se datoteka nalazi na našem poslužitelju te je moramo tamo i postaviti), ili apsolutna s nekog drugog poslužitelja.
Deklaraciju je najbolje napraviti na samom početku CSS dokumenta ili čak u zasebnom CSS dokumentu.
U deklaraciju možemo uključiti i dodatne parametre (font-stretch, font-style, font-weight, unicode-range) kojima možemo zadati osnovni izgled fonta, no to nije obavezno.
Kada želimo tako deklariranim fontom oblikovati neki element, jednostavno koristimo ime iz deklaracije (font-family), na primjer:
h1, h2, h3 {
font-family: bebas_neuebook;
}
Ipak, uklučivanje fontova na stranicu ima određenu cijenu.
Kao prvo, zbog nasljeđenih razlika u standardima između web preglednika i operacijskih sustava jedan font najčešće nije dovoljan. Da bismo bili sigurni da će većina preglednika na različitim operacijskim sustavima ispravno prikazati određeni font, moramo ISTI FONT pohraniti u nekoliko različitih formata i uključiti u deklaraciju.
Primjer iz prakse izgledao bi otprilike ovako:
@font-face {
font-family: 'bebas_neuebook';
src: url('../fonts/BebasNeue Book-webfont.eot');
src: url('../fonts/BebasNeue Book-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/BebasNeue Book-webfont.woff2') format('woff2'),
url('../fonts/BebasNeue Book-webfont.woff') format('woff'),
url('../fonts/BebasNeue Book-webfont.ttf') format('truetype'),
url('../fonts/BebasNeue Book-webfont.svg#bebas_neuebook') format('svg');
font-weight: normal;
font-style: normal;
}
Dakle, osim fonta u uobičajenom ttf formatu dodajemo još neke formate kako bismo bili sigurni da će font biti svugdje ispravno prikazan.
Važno je znati i da datoteke fonta nisu uvijek zanemarive veličine, ona može biti od nekoliko desetaka kilobajta do nekoliko stotina kilobajta. Zato treba biti oprezan s količinom web fontova na stranici jer bi mogli značajno produžiti učitavanje stranice.
Dobra strana je to što će se fontovi pohraniti u privremenoj memoriji preglednika i učitavat će se s weba samo prilikom prvog učitavanja stranice, a prilikom slijedećih posjeta iz privremene memorije.
Ako ste mislili da su fontovi neko opće dobro ili da ste ih kupili zajedno sa svojim operacijskim sustavom ili nekim programom, tad ste se prevarili.
Fontovi su autorsko djelo poput fotografije te postoje određena pravila korištenja fontova na webu. U principu, želite li neki font koristiti na stranici, trebali biste platiti licencu. Naravno, postoje i besplatni fontovi koji ne zahtijevaju plaćanje licence i preporučamo da koristite upravo takve, iako će vam to znatno suziti izbor.
Otkud mi fontovi?
Do kvalitetnih fontova s licencom za korištenje na web stranicama nije uvijek jednostavno doći. Dodajte tome i potrebu eksportiranja u nekoliko različitih formata i mogli biste pomisliti da je to kompliciran i skup posao.
Upravo zato postoji nekoliko različitih web stranica / usluga specijaliziranih za web fontove koje vam mogu jako olakšati posao. Spomenut ćemo dvije najpoznatije:
Nakon što pronađete font koji vam se sviđa, isprobajte ga izravno na stranici. Pri tome isprobajte i hrvatske znakove jer ih mnogi fontovi ne podržavaju!
Nakon toga preuzmite tzv. @font-face kit koji je komprirmirana datoteka koja sadrži font u različitim formatima, primjere, sav potreban css pa čak i uputstva za uporabu.
Pomoću iste stranice možete čak i postojeći font sa svog računala pretvoriti u web font i generirati ostale potrebne formate.
Googleova usluga čini uporabu fontova još jednostavnijom jer nema potrebe za preuzimanjem fontova i postavljanjem na vlastiti poslužitelj. Umjesto toga koristite font izravno sa Googleovog poslužitelja. Nakon što odaberete (i isprobate) neki font, odaberite opciju Quick-use i dobit ćete sav potreban kod za ubacivanje na stranicu i korištenje.
Efekt sjene primjenjen na tekst
Želite li na određeni tekst primjeniti efekt sjene, to možete vrlo jednostavno zadati u CSSu. Sintaksa je slijedeća:
text-shadow: h-shadow v-shadow blur-radius color;
Pri tome su značenja parametara slijedeća:
- h-shadow: horizontalna sjena, zadaje se u pikselima, obavezno zadati
- v-shadow: vertikalna sjena, zadaje se u pikselima, obavezno zadati
- blur-radius: radijus zamućenja, što veći - to mekša sjena
- color: boja sjene, može se zadati heksadekatski ili RGBa načinom što je posebno zanimljivo ovdje
Primjer koji možete isprobati:
p.sasjenom { text-shadow: 1px 3px 3px rgba(200, 230, 255, 0.9); }
Ukoliko vam se neda isprobavati, postoje i online editori gdje to možete isprobati, te kopirati generirani stil na svoju stranicu. Jedan od njih je ovdje.
Svojstvo text-shadow je dobro podržano u svim modernim preglednicima.
Efekt sjene primjenjen na elemente
Gotovo svim HTML elementima može se zadati svojstvo box-shadow pomoću kojega možemo zadati efekt sjene za taj cijeli element. Najčešće se primjenjuje na div oznake ili elemente obrazaca, ali i druge elemente.
Sintaksa je relativno jednostavna:
box-shadow: h-shadow v-shadow blur spread color inset|initial|inherit;
Značenja pojednih vrijednosti su ista kao i za text-shadow, ali ovdje imamo još i parametar spread koji omogućuje da povećamo ili smanjimo sjenu u odnosu na element koji "baca sjenu". Moguće su pozitivne vrijednosti (povećanje sjene) i negativne vrijednosti (smanjivanje sjene).
Na kraju možete (a ne morate, nije obavezno) dodati jedan od tri poslijednja parametra: inset znači da je sjena unutar, a ne izvan elementa, initial postavlja osnovno svojstvo elementa, a inherit znači da element nasljeđuje to svojstvo od roditeljskog elementa (onog unutar kojeg se nalazi).
Naravno, i za box-shadow postoji niz online generatora koji omogućuju eksperimentiranje, jedan od njih je ovdje.
Zaobljeni rubovi
Da biste umjesto "oštrih" kuteva napravili zaobljene je sve do pojave CSS3 standarda bilo potrebno puno kompliciranog i semantički ne baš ispravnog koda. Danas se zaobljeni kutevi naprave vrlo jednostavno pomoću svojstva border radius, potrebno je samo zadati polumjer zaobljenja, npr:
.zaobljeni { border-radius: 25px; }
Gradijenti
Gradijent je postupni prijelaz iz jedne u drugu boju koji se na web stranicama koristi kao pozadina nekog elementa. Sve do nedavno su se u dizajnu stranice mogli ostvariti jedino pomoću slikovnih datoteka, a danas ih možete zadati CSSom što je puno fleksibilnije i jednostavnije.
Gradijenti se mogu koristi na različite načine i za razne elemente web stranice, no najčešće ih srećemo kao pozadine div oznaka ili elemenata obrazaca.
Postoje dvije vrste gradijenata: linearni (prijelaz iz jendne u drugu boju je uzduž nekog pravca) i radijalni (kružni, boje se šire koncentrično iz neke točke).
Kao i za mnoge druge stvari, postoje web stranice koje nam daju mogućnost vizualnog zadavanja gradijenta i generiraju potreban css, kojeg onda možemo kopirati i prilagoditi svojoj stranici. Jedna od takvih stranica je i Colorzilla pomoću koje smo zadali slijedeći primjer:
background: #005588; /* Old browsers */
background: -moz-linear-gradient(-45deg, #005588 0%, #0094d8 85%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #005588 0%,#0094d8 85%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #005588 0%,#0094d8 85%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#005588', endColorstr='#0094d8',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
Analizom koda vidimo da je zadan gradijent pod kutom od 45 stupnjeva koji na svom početku (0%) ima boju #005588, a na 85% udaljenosti do krajnje desne donje točke ima boju #0094d8.
Vidimo i to da je sintaksa dosta neujednačena za različite preglednike pa je zgodno poslužiti se ovakvim generatorima.
Primjer
Primjer koji ilustrira više spomenutih tehnika možete pogledati ovdje.
Analizirajte kod stranice iz primjera (desni klik -> pregled izvornog koda) i pokušajte izmijeniti pojedine postavke
Napomene i zaključak
CSS3 je donio mnoštvo novih mogućnosti za oblikovanje stranice, neke od njih ste upoznali ovdje. Ipak, budite oprezni u njihovom korištenju jer gotovo sve imaju svoju cijenu: web-fontovi mogu pridonijeti duljini učitavanja stranice, stranice koje koriste puno sjena i gradijenata zahtjevaju znatnu procesorsku snagu i ukoliko pretjerate bit će spore, na lošijim računalima čak i neupotrebljive.
Sintaksa nije teška, a umjesto samostalnog pisanja koda možete se poslužiti i online generatorima.
Još neko vrijeme potrebno je voditi računa o raličitim implementacijama pojedinih pravila u različitim preglednicima i pisati višestruke definicije, ali potreba za time ubrzo će nestati.
