CSS savybė „position“
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.
2010-01-10 13:53:53
Gairės:
Spalvos dizaine
Nekyla nė abejonės, kad spalvos tiek spaudos, tiek tinklalapio dizaine yra vienas iš svarbiausių rodiklių, lemiančių gražų dizainą. Atrodo, jog spalvas galima rinktis pagal nuožiūrą, tačiau, deja, tai ne visada pasiteisina. Pastaruoju metu pastebėjau, kokias klaidas daro pradedantieji savamoksliai dizaineriai, todėl galiausiai nusprendžiau aprašyti tas klaidas ir paaiškinti, kaip jų išvengti.
Esminė problema yra ta, kad kai kurie žmonės sugeba sukurti patrauklius dizaino elementus, juos tvarkingai išdėstyti, tačiau neteisingų spalvų pasirinkimas sugadina, sudarko vaizdą, o tai nulemia galutinį sukurto dizaino rezultatą.
Todėl pasistengsiu kuo detaliau išnarplioti dažnai pasitaikančias spalvų derinimo klaidas, šiek tiek apžvelgsiu bendrąją spalvos teoriją ir, žinoma, pateiksiu tiek tinkamų, tiek netinkamų spalvų derinių pavyzdžių.
Technikos apvalintų kampų elementams kurti
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.
Meniu kūrimas, naudojant vieną paveikslėlį
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. ;)
Martyna
