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. Implicit, degradeurile liniare pornesc din partea de sus a casetei catre partea de jos, asa ca nu era nevoie sa precizam nici un fel de punct de inceput sau de sfarsit. Pentru a-l face sa functioneze in Firefox, Chrome, Safari, trebuie sa adaugati versiunile -moz si -webkit ale functiei linear-gradient:

#tweets {

width: 250px;

padding: 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: -moz-linear-gradient(#D8F7E5, #FFFFF);

background-image: – webkit-gradient(linear,left,top bottom, from (#D8F7E5) to (#FFFFF);

background-image: -webkit-linear-gradient(#D8F7E5, #FFFFF);

background-image: linear-gradient (#D8F7E5, #FFFFF);

}

 

Veti observa ca am adaugat atat functia -webkit-linear-gradient cat si -webkit-gradient si ca ultima are o sintaxa diferita de toate celelalte. Aceasta deoarece versiunile actuale de browsere bazate pe Webkit folosesc aceasta sintaxa mai veche, non-standard pentru a crea degradeuri. In sintaxa Webkit actuala, trebuie sa precizati tipul de degradeu(linear sau radial), punctul de inceput, punctul de sfarsit, culoarea from() si culoarea to(). In viitor Safari si Chrome vor trece la sintaxa standard in functia -webkit-linear-gradient.

Leave a reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>