Categorie: CSS

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

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