CSS3

CSS3 prinaša kup novosti na področje spletnega oblikovanja in skupaj s HTML5 naj bi predstavljala pravo spletno revolucijo. Na kratko vam bomo predstavili, kaj vse lahko že danes naredite na svojih straneh samo z uporabo CSS3 standardov pri oblikovanju spletnih strani. Trenutno je največji problem to, da CSS3 podpirajo le novejši brskalniki, v starejših verzijah pa je spletna stran vseeno dobro vidna, le da je prikazana brez novosti. Trenutno (julij 2010) je CSS3 podprt v brskalnikih Firefox, Safari, Konqueror in Opera.

Obrobe (border)

En izmed večjih napredkov se je zagotovo zgodil pri možnostih obrobljanja, ki jih označujemo z angleško besedo border. Poleg starih možnosti, lahko sedaj pri obrobah nastavljamo tudi okrogle robove (border radius), sence robov (box-shadow), večbarvne robove (border color) in slike kot ozadje robov (border image).

Pred tem je bilo potrebno za tako oblikovanje uporabiti sliko kot ozadje. Ta novost bo zagotovo prihranila ogromno časa pri razvoju, poleg tega pa se s tem zaradi neuporabe slikovnega materiala zmanjša tudi število HTTP zahtevkov (HTTP requests) in količina prenešenih podatkov, kar lahko pri grafično bogati strani pomeni kar nekaj kB manj za vsak prikaz strani.

Ozadja (background)

Pri ozadjih je najbolj dobrodošla novost uporaba večih ozadjih hkrati (multiple backgrounds), kar omogoča, da enemu elementu določimo več slikovnih oz. barvnih ozadij, ne da bi za to morali uporabiti več divov. Ozadja pri pisanju CSS kode enostavno ločimo z vejico.

Barve (color)

Poleg heksadecimalnega (hexadecimal) načina, lahko sdaj barve določamo tudi na HSL, HSLA in RGBA način

HSL (Hue, Saturation, Lightness)  je določen s tremi vrednostmi. Najprej določimo odtenek (hue), po principu barvnega kolesa, kjer 0 ali 360 predstavlja rdečo, 120 zeleno in 240 modro. Številke vmes predstavljajo odtenke. Določimo tudi intezivnost (saturation) in sicer v procentih, kjer 100% pomeni polno barvo. Svetlost (lightness) prav tako določimo v procentih in sicer 0% pomeni črno, 100% belo, 50% pa povprečno vrednost.

HSLA je precej podoben HSL načinu, vendar nam omogoča nastavljanje še četrte vrednosti, motnosti (opacity) preko Alpha kanala (Alpha Channel)

RGBA tako kot HSLA pri HSL načinu omogoča nastavljanje RGB barv z dodatno možnostjo nastavljanja motnosti.

Učinki besedila (text effects)

Sence besedila (text shadow) so bile predstavljene že pri CSS2, a je sedaj CSS3 končno omogočil enostavno dodajanje senc brez uporabe Photoshopa ali drugih grafičnih programov. Sence se nastavljajo zelo enostavno, naredite pa lahko tudi večbarvne!

Druga novost na tem področju, ki tudi prihrani kar nekaj dela in omogoča oblikovanje brez programiranja je tekstovna prekoračitev (text overflow). To možnost uporabimo kadar želimo prikazati le nekaj znakov besedila in da se besedilo konča na za uporabnika bolj logičen način na koncu dodamo tropičje ali podoben znak, ki nakauje da gre le za povzetek. Ta problem se je prej reševal na bolj zamuden in potraten programerski način v PHPju, JavaScriptu ali drugem jeziku na katerem je bila stran osnovana.

Prelom besed (word wrap) prelomi dolge besede, da se nadaljujejo v naslednji vrstici. Prej so besede, daljše od širine kvadrata kjer so se nahajale rade uhajale čez rob.

CSS oblikovanje

Če potrebujete pomoč pri oblikovanju spletnih strani se lahko obrnete na našo oblikovalsko ekipo, ki je dobro seznanjena z novostmi. Nekaj zadev iz novega standarda CSS3 pa smo tudi že uporabili na strani Poslusaj.net.

Za vse tiste, ki ste pripravljeni že sedaj stopiti v korak s časom in svoje nove strani oblikovati v skladu z novimi standardi pa v kratkem pripravljamo prav poseben popust. Za več informacij nas lahko kadarkoli kontaktirate.