Categorie: CSS

Servicii de fonturi personalizate

Font Squirrel este un serviciu web care foloseste un TTF si va ofera toate formatele de care aveti nevoie. Poate elimina, de asemenea, caracterele de care nu aveti nevoie. Va recomand Keep Existing pentru hinting, din moment ce solutia automata a avut reuzltate slabe pe sistemele Windows XP. Daca realizati un subset al unui font, asigurati-va ca veti include un caracter spatiu, astfel, spatiile vor fi afisate ca mici casete, in unele browsere pe Windows.

Evitati Style Linking; este o mare facilitate in specificatii, dar mai avem inca de asteptat pentru a vedea un browser ca o foloseste asa cum trebuie.

FontForge este o aplicatie open source pentru a crea si edita fonturi. Ruleaza in X, astfel incat este usor de instalat pe Linux si OS x...

Vezi articol

Animatii CSS

O alta tehnica similara cu tranzitiile este reprezentata de animatiile CSS. Dupa cum le spune si numele, animatiile CSS sunt definite folosind doar CSS. Aceasta inseamna ca ca si ele pot profita de accelerarea hardware din browserele suportate.

Iata un exemplu de o animatie simpla:

/*o animatie denumita simpleanim*/

@-webkit-keyframes simpleanim

{

0%

{

opacity:1;

-webkit-transform:scale(1);

}

25%

{

-webkit-transform:scale(1.1);

}

100%

{

opacity:0,6;

-webkit-tranform:scale(1.5);

}

}

Sa spunem ca dorim sa aplicam aceasta animatie unui link atunci cand utilizatorul sta cu mouse-ul deasupra lui. Iata cum am obtine acest lucru:

a:hover

{

-webkit-animation-name:simpleanim;

-webkit-animation-duration:500ms;

-webkit-animation-timing-function:ease-in;

}

Animatiile CSS ofera o modalitate foarte pute...

Vezi articol

Degradeul de fundal – Lista de mesaje Twitter

Daca doriti sa evidentiati si mai tare aspectul progresiei, puteti aplica un degradeu fundalului listei de mesaje Twitter folosind degradeurile CSS3 fara imagini. Pentru a crea un degradeu de fundal liniar(mai degraba decat radial), adaugati proprietatea background-image la regula #tweets declarata in css avand ca valoare functia linear-gradient:

#tweets {

width 280px;

padding: 0 0 0 1px 0;

-moz-border-radius: 0 20px 0 0;

-webkit-border-top-right-radius: 20px;

border-radius: 0 20px 0 0;

background: #D8F7E5;

background-image: linear;

gradient(#D8F7E5, #FFFFF);

}

Am precizat #D8F7E5 drept culoare de inceput si #FFFFFF(alb) drept culoare de sfarsit...

Vezi articol

Folositi selectorii CSS de cate ori puteti

Reduc masiv markupul/atributele de prezentare, lucru care poate oferi avantaje in ceea ce priveste marimea fisierului si prin faptul ca screen-readerele si alti internauti non-umani vor naviga mai usor prin pagina. De asemenea, ofera un grad mai mare de control si flexibilitate, precum si mai putine batai de cap cu intretinerea. nth-child pentru randuri de culori alternative este clasic: comparati aceasta cu folosirea atributelor de clase suplimentare pentru crearea unor stiluri diferite, care ar trebui schimbate manual de fiecare data cand adaugati date in tabel pentru a pastra stilul asa cum doriti. Dezavantajele sunt destul de putine...

Vezi articol

Selectivzr

Selectivzr este o biblioteca JavaScript realizata de Keith Clark care simuleaza pseudo-clasele CSS3 si selectorii de atribute in versiunile de la 6 la 8 ale IE. Printre multitudinea de utilizatori sunt site-uri celebre precum Dixons, Audio-Boo si MagCloud.

Pentru a configura Selectivzr, trebuie sa incarcati o biblioteca JavaScript existenta ca jQuery, MooTools sau Dojo si sa amplasati scriptul in elementul head al paginii intr-un comentariu conditional astfel incat sa fie incarcat doar pentru Internet Explorer. Avand 5kb compresat nu o sa adauge mult paginii dumneavoastra, insa ganditi-va ce inseamna sa includeti si o biblioteca daca nu aveti una incarcata.

Din nefericire, la momentul actual, nu simuleaza toti selectorii sau combinatorii de atribute pe care i-am discutat in acest articol a...

Vezi articol