Ilgą laiką naudodami CSS prieiname išvadą, jog ši pakopinių stilių kalba nėra itin lanksti ar „protinga“. Mažesniems projektams įprastinė CSS sintaksė puikiai tinka ir didesnių problemų nekelia, tačiau kuriant didelius projektus, kur rašome šimtus eilučių CSS kodo, įklipstame į besikartojančio kodo (angl. „code repetition“) liūną. Tad ar galime kaip nors to išvengti? Džiaugiuosi jums pranešdamas, kad taip, galime to išvengti naudodami lankstesnę CSS sintaksę — LESS.

Ar pažįstamas jausmas, kai koduodamas dizainą susiduri su problema, kuri iš pirmo žvilgsnio atrodo lengvai išsprendžiama, tačiau vėliau pasirodo, jog ją išspręsti yra kur kas sunkiau negu atrodo? Ar neerzina vien mintis, kad, pavyzdžiui, kampų apvalinimui tenka naudoti įvairius metodus, kurie ne visada tinka visoms naršyklėms? Nejaugi visos sudėtingesnės dizaino detalės turi būti pagrįstos paveikslėliais? Regis, šios ir panašios problemos mums kankins dar labai ilgai, tačiau ar iš tikrųjų neturime jokios išeities?

Laimei, žvelgdami į ateitį galime pasidžiaugti, jog W3 kuria CSS3, o tai reiškia, kad mes, tinklalapių dizaineriai ir web „developeriai“, galėsime kurti sudėtingos struktūros dizainus su atokvėpiu.

Naršant internete tikriausiai teko ne vieną kartą pamatyti unikalų dizainą su įdomiais išdėstytais grafikos elementais po visą tinklalapį arba paspaudus ant nuotraukos, ji atsidaro su efektais. Turbūt pasirodė, jog visa tai padaryti sudėtinga ir nesigilinote, kaip visa tai įgyvendinama. Nors gali pasirodyti, kad tai sunku, iš tikrųjų egzistuoja position savybė, kuri labai paprastai leidžia „stumdyti“ blokus po visą tinklalapį.

Daugumai bus girdėta ši savybė, tačiau su ja nedirbote, nes pasirodė, kad per daug painu ją naudoti. Šiek tiek pabandysime pažaisti su position savybe ir pasiaiškinkime jos galimybes.

Naršydami įvairiuose tinklalapiuose tikriausiai pastebėjote, kad vis dažniau yra naudojami užapvalinti kampai (angl. rounded corners): juos galima pamatyti tinklalapio komentarų blokuose, viršutinėse/apatinėse (header/footer), turinio (content) blokuose bei kitose struktūros dalyse.

Apvalintų kampų elementus sukurti galima ne vienu, o keletu būdų. Elementų kampams apvalinti kartais naudojama JavaScript kalba, tačiau rimčiausia priežastis, kodėl šis būdas nelabai populiarus, — išjungtas JavaScript palaikymas kai kurių lankytojų naršyklėje. Taip pat galime sukurti apvalintus elementus panaudoję pakopinių stilių (CSS) savybes ir paveikslėlius. Dar kitas būdas — kuris yra ateities sprendimas — CSS3. Tai nauja pakopinių stilių specifikacija, kuri dar nėra užbaigta, tačiau kai kurios naršyklės jau palaiko keletą naujosios specifikacijos savybių.

Taigi, panagrinėsime dažniausiai taikomus sprendimus elementų kampų apvalinimui: pavyzdžius, pliusus ir minusus; palyginsime aptariamus sprendimus.

Paprastai meniu punktus stilizuojame pritaikydami tam tikras pakopinių stilių (angl. Cascading Style Sheets — CSS) savybes: pridedame rėmelį, nustatome atitraukimus (margin ir padding), keičiame teksto, fono spalvą. Kitais atvejais meniu punktų fonui priskiriame paveikslėlį, kuris kartojamas horizontaliai ar vertikaliai, arba kiekvienam meniu punktui naudojame atskirą paveiksliuką, norėdami dar labiau pagražinti tinklalapio dizainą.

Tačiau ar nustebtumėte sužinoję, kad galime į vieną paveikslėlį sudėti visus reikiamus, grafine programa paruoštus, meniu elementus ir pritaikyti reikiamą paveikslėlio dalį atitinkamai pagal meniu punktą? Taip? Tada skaityk toliau šį straipsnį ir sužinosi, kaip tai padaryti. Ne? Na, gerai, tačiau galbūt vis tiek sužinosi kažką naujo? Nesupranti, ką aš čia aukščiau parašiau? Atsakingai perskaityk straipsnį — užtikrinu, viskas paaiškės. ;)