Mrrrr
Moderator
 Din: boschetzi
Inregistrat: acum 18 ani
Postari: 1368
|
|
Lumea in care traim inclina din ce in ce mai mult inspre superficialitate si individualism. Pe de-o parte, vedem stratul superficial al lumii la MTV si in sutele de top 10-uri care s-au facut pana acum. Pe de alta parte, avem placerea sa remarcam individualismul fiecaruia dintre noi in faptul ca fiecare are propriul lui set de top 10-uri, radical diferit de toate celelalte. Nu este un lucru rau: toti suntem diferiti si e normal sa avem preferinte diferite, nu-i asa?
Acestea fiind spuse, vreau si eu propriul meu top 10 si il vreau legat de CSS. M-am gandit sa pun la un loc metodele CSS pe care le folosesc cel mai des si sa le impartasesc cu voi aici. Desigur, fiecare va putea avea propriul lui top 10 in sectiunea de comentarii.
1. Opacitate
Nu neaaparat primul trick pe lista, insa primul de care imi aduc aminte. De-a lungul timpului, a rezolvat o multime de probleme legate de rollovere.
.opaque {
opacity: .5; /* Firefox et al */
filter: alpha(opacity=50); /* IE */
}
Este vorba de opacitatea unui obiect. Prin aceste doua reguli poti face un element de DOM cat de opac vrei tu. IE 5/Win nu recunoaste aceste reguli, dar este deja prea vechi ca sa ne mai intereseze. De asemenea, pe orice IE, respectivul element trebuie sa aiba specificat una din proprietatile de dimensiune, fie width, fie height. Aceasta este o consecinta nefolositoare a modului in care IE implementeaza filtrele.
Daca folositi rgb pentru a scrie culori in css, puteti scrie si asa: color: rgba(0,0,255,0.25), unde a vine de la alpha channel.
Ce se poate face? Vedeti pentru niste rollovere. articol de pe ALA si este singurul mod pe care il voi folosi de acum incolo. El implica liste:
<ul>
<li>
<label>Name:</label>
<input>
</li>
</ul>
Nu-i asa ca e frumos? Fiecare element al formularului are labelul sau, iar duetul acesta este plasat intr-un container li. Labelurile vor avea mereu urmatoarele reguli:
text-align:right;
float: left;
clear: left;
iar containerul ol/ul va fi setat pe display:block.
Metoda este exemplificata de mine pe itzone. Daca doriti ceva mai in-depth, mergeti la articolul ALA.
Mentionez ca toate meniurile le fac asemanator. De fapt, exista si un articol pe aceasta tema, tot pe itzone.
3. Colour contrast analyzer
Este o extensie pentru Firefox care analizeaza contrastul unei pagini aplicand o formula fiecarui set de culori font/background setate din css. Daca nu doriti sa instalati extensia, puteti analiza contrastul manual, folosind formula.
Extensia va va spune rata de contrast a fiecarei perechi de culori din pagina voastra, fiind foarte folositoare pentru a realiza un stylesheet cu contrast ridicat pentru cei ce nu vad bine sau au monitoare proaste si intunecate. Chiar daca nu credeti, diferenta de luminozitate dintre monitorul vostru si cel al userilor siteului vostru poate fi foarte mare, mai ales in cazul LCD versus CRT mai vechi. In plus, unora nu le place ca ecranul lor sa fie prea luminos. Pe LCD-ul meu super-luminos am contrastul si brightnessul la zero 80% din timp.
Un alt exemplu: multe siteuri de content prefera fundale inchise. Caz in care contrastul nu mai este atat de intuitiv. Exista riscul ca textele sa nu poata fi citite. Am incercat o tema de forum in care utilizam verde pe negru, nu o alegere tocmai fericita, insa verdele era culoarea ce trebuia folosita din motive de brand. Pe LCDul meu se vedea extraordinar. Pe CRTul amicului meu nu se putea citi nimic, iar Contrast Analizerul m-a convis repede.
O ultima observatie: extensia nu este compatibila cu Firefox 2.0. Din fericire, exista o varianta online. Ea se numeste GrayBit si este un analyzer vizual: va converti orice pagina in grayscale, pentru ca noi sa putem analiza contrastul.
4. em
Da, em. Em-ul este unitatea de baza pentru a masura pe ecran in mod relativ. Un Em reprezinta latimea standard a literei M pe care browserul o afiseaza (teoretic) cu fontul standard, la marimea standard. Astfel, Em-ul depinde atat de browser/OS cat si de rezolutie/spatiu de randare. Apropo de spatiul de randare, exista un studiu extrem de folositor care elucideaza misterul maximei latimi pe care trebuie sa o aiba siteul nostru pentru a fi vazut corect (a se citi fara scrollbarul orizontal) de 95% din populatie.
Daca folosim em-ul peste tot putem obtine efecte deosebit de interesante, oferind userilor posibilitatea de a mari textul dupa plac. Din nou, exista un studiu care exemplifica diferentele dintre px si em. Uneori sunt chiar mari, si pentru cineva chiar conteaza.
5. Text
Daca tot suntem la text, css poate face minuni in domeniul numit typography. Va puteti alege fontul dupa plac, insa aveti in vedere ca, pe ecran, sans-serif se citeste mai bine decat serif. Stim ca pe foaie este exact invers. Apoi va puteti alege culoarea si dimensiunea (in em :P ). Insa mai sunt si alte lucruri.
De obicei imi includ tot contentul de tip text in tag-uri de paragraf (p) si le stilez astfel:
font: 1.2em/1.8em helvetica sans-serif
Este un shorthand. Prima valoare numerica o reprezinta valoarea font-size, iar a doua line-height. Daca prima va e cunoscuta cu siguranta, a doua s-ar putea sa puna ceva probleme. Ea se refera la spatiul dintre randuri, foarte folositor pentru a spori lizibilitatea.
Inca un lucru pe care il folosesc des cand vine vorba de text este text-transform. Acest atribut poate lua valorile: none, capitalize,uppercase sau lowercase. Este bine sa precizezi aceste lucruri in css mai degraba decat in html, pentru ca poti schimba mult mai repede stilul.
6. Layouturi
O colectie de layouturi de baza a devenit necesara o data ce tabelele au murit definitiv. Din fericire, am dat peste un mic site care face exact acest lucru. Prefer sa las exemplele lui Owen Briggs sa vorbeasca, decat sa ofer o lista de linkuri catre diferite modele de layouting.
Autor Vlad Fratila
_______________________________________
Multe Instrumentale - 1000++
|
|
