Degradeuri angulare in CSS?

Degradeurile din CSS sunt grozave, dar nu sunt la fel de diverse ca cele din Photoshop. Poate cel mai vizibil absent este gradientul angular, care este adesea folosit pentru a crea un efect de metal lustruit – de aceea, acum inca trebuie sa-l simulam.

Acest efect se bazeaza foarte mult pe transformari 3D care din pacate au la acest moment o implementare foarte limitata in browsere. Arata nemaipomenit in Safari, dar ridicol in Firefox. Veti vrea probabil sa folositi Modernizr pentru a va ajuta sa construiti o varianta de rezerva pentru browserele mai putin capabile. Am pus la punct recent aceasta tehnica pentru a crea un buton de volum mult mai complex. Degradeul este compus din doua degradeuri liniare distincte, care au fost transformate in spatiul 3D astfel incat una din marginile lor sa se indoaie si sa se imbine pentru un efect fara probleme. In primul rand, baza trebuie stabilita la:

#volume-knob {

background: -webkig-gradient(linear, 10%

top, 90% top, from(#ddd),

color-stop(5, #888), to(#ddd);

-webkit-perspective:100px;

-webkit-mask:url(circle.svg);

-webkit-border-radius:250px;

-webkit-box-shadow:inset 4px 0 0

rgba(255,255,255,1), inset 0 0 60px

rgba(0, 0, 0, 3), inset -3px 0 0 rgba(0, 0, 0,5), 0 0 5px rgba(255, 255, 255, 9);

}

In plus fata de un simplu degradeu de fundal si o stiva de umbre, doua proprietati foarte importante au nevoie de configurare: perspectiva si masca. Proprietatea perspectivei va controla dimensiunile relative ale elementelor suprapuse si va determina pseudo-elementele sa se transforme in mod corespunzator. Proprietatea mask utilieaza un fisier SVG care constrange pseudo-elementele la aceeasi forma ca si butonul in sine. Pur si simplu adaugarea proprietatii overflow:hidden va constrange pseudo-elementele la limitele rectangulare ale butonului, dar nu va lua in calcul border-radius-ul aplicat.

Acum, magia. Un pseudo element :before si unul :after sunt create, si fiecare are un degradeu liniar, cu numeroase intreruperi de culoare. Transformarile 3D sunt apoi folosite pentru a roti elementele lor, pe axa y. Deoarece o astfel de perspectiva a fost folosita la #seek-knob, pseudo-elementele ajung la o destinatie atunci cand se rotesc. Formele sunt acum prea inalte, astfel incat o alta transformare este aplicata pentru a le reduce pe axa y.

#volume-knob:before{

background: -webkit-gradinet(linear, left, top, left bottom, from(rgba(255,255,255,0)), color-stop(.35,rgba(0,0,0, .1)),

color-stop(.41, rgba(0,0,0,0)), color-stop(.43, rgba(255,255,255,0)), color-stop(.44, rgba(255,255,255, .4)), color-stop(.46, rgba(255,255,255,0)), color-stop(.5, rgba(255,255,255, .85), color-stop(54, rgba(255,255,255,0)), color-stop(.56, rgba(255,255,255, .4)), color-stop(.57, rgba(255,255,255,0)), color-stop(.59, rgba(0,0,0)), color-stop(.65, rgba(0,0,0, .1), to(rgba(255,255,255,0)));

-webkit-transform:rotateY(92deg)

scaleY(.3);

-webkit-transform-origin: 50% 50%;

}

Pseudo-elementele sunt apoi plasate unul langa celalalt pentru a crea gradientul angular complet de 360 grade. Este destul de mult de lucru pentru un asemenea efect cu aspect simplu. Speram ca vom vedea degradeuri angulare CSS in viitorul apropiat.

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>