Variatiuni in browsere

Ca in cazul oricarei caracteristici CSS, si degradeurile CSS vin cu partea lor de bug-uri si inconsecvente de implementare. Unele dintre cele mai mai comune pe care le-ati putea intalni sunt:

  • Firefox, din pacate nu accepta degradeuri radiala de dimensiuni explicite.
  • Google Chrome nu suporta deocamdata degradeuri radiale eliptice, desi nu elimina declaratia.
  • Cand folosim tehnica descrisa la figura 6 pentru realizarea de dungi, firefox are nevoie de o ultima intererupere de culoare aditionala pentru a le afisa corect(cu aceeasi culoare ca si cea folosita ultima data).
  • In webkit, triunghiurile folosite pentru a realiza tabla de sah din figura 8.1 sunt finalizate la o marime putin mai mica decat cea necesara, de aceea e bine sa lasati un spatiu de 1px intre ele.
  • Cercurile create folosind degr...
Vezi articol

Compass

Sass va ofera o noua putere si expresivitate pentru fisierele de stiluri. Abilitatea deĀ  a crea concepte bogat decorate aproape fara a fi nevoie de ajustarea markupului inseamna ca puteti partaja biblioteci cu fisiere de stiluri in mai multe proiecte. Intra in scena Compass.

Compass este un framework de creare a fisierelor de stiluri bazat pe Sass care ofera o bogatie de instrumente pe care sa le folositi atunci cand gestionati proiectele de design. Se integreaza cu orice framework de aplicatii si poate fi folosit si de sine statator.

Compass ofera:

  • Intregul Framework Blueprint sub forma de mixinuri in loc de nume urate de clase.
  • Zeci de plugin-uri pe care le puteti folosi, inclusiv plugin-uri pentru frameworkuri populare ca 960.gs, Susy, OOCSS si HTML5 Boilerplate.
  • Template-uri de proie...
Vezi articol

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