Acasă › Navigatori › Cum a transformat Apple designul într-un cuvânt murdar

Cum a transformat Apple designul într-un cuvânt murdar

Salutare dragi cititori a! Designul web și dezvoltarea web evoluează într-un ritm foarte rapid. În fiecare zi vedem din ce în ce mai multe noutăți, fie că sunt aplicații sau servicii noi care ne fac viața online mai productivă și mai convenabilă. Iar web design-ul este doar un spațiu nemărginit, limitat doar de talentul și aptitudinile „artistului” (designer). Deci, astăzi vom vorbi despre MAI PUȚIN- un limbaj de marcare a stilurilor dinamice care va simplifica scrierea stilurilor CSS.

Ce este LESS?

LESS este un supliment pentru CSS. Aceasta înseamnă că orice cod CSS este valid LESS, dar elementele LESS suplimentare nu vor funcționa în codul CSS simplu. Acest lucru este grozav deoarece CSS-ul existent este deja un cod LESS funcțional, ceea ce reduce bariera de intrare în noua tehnologie.

LESS adaugă multe proprietăți dinamice utile la . Introduce variabile, operații, elemente și mixuri. Posibilitatea de a scrie foi de stil într-un mod modular vă scutește de multe bătăi de cap.

LESS face stilurile de scriere mult mai ușoare. De exemplu, folosind mixin-uri, creăm ceva de genul funcțiilor care pot lua argumente. Mixine- vă permit să includeți toate proprietățile unei clase într-o altă clasă prin simpla includere a numelui clasei ca valoare a uneia dintre proprietăți.

1
2
3
4
5
6
7
8
9
10
11

Colțuri rotunjite (@radius : 5px ) (
border-radius : @raza;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}
#antet(
.colturi rotunjite;
}
#subsol (
.colțuri rotunjite(10px ) ;
}

Și CSS-ul compilat va arăta astfel:

1
2
3
4
5
6
7
8
9
10

#antet(
raza-chenar : 5px ;
-webkit-border-radius: 5px ;
-moz-border-radius: 5px ;
}
#subsol (
raza-chenar : 10px ;
-webkit-border-radius: 10px ;
-moz-border-radius: 10px ;
}

Încărcați biblioteca prefix-free.js și conectați-o la index.html:

< script src= "prefix-free.js" type= "text/javascript" >

Cu aceasta, vom termina cu pregătirea și vom trece direct la crearea unui meniu în stil Apple.com.

Marcaj HTML

Dispunerea meniului este destul de simplă. Meniul se bazează pe o listă neordonată. Deschideți un editor HTML și inserați următorul cod:

1
2
3
4
5
6
7
8
9

MAI puține stiluri

În această secțiune, vom începe să codificăm meniul în limba LESS. Pentru cei care sunt începători în programare, atât în scris, cât și în sintaxa LESS, nu vă faceți griji, voi încerca să pun totul pe rafturi ca să fie clar. Poate chiar cuiva îi va plăcea acest mod de a scrie stiluri pentru site, pentru că este cu adevărat mai productiv.

Să ne uităm la ce componente va consta meniul:

După cum putem vedea în captura de ecran de mai sus, navigarea Apple.com are următoarele 6 părți principale:

Se folosește umbra;
Frontieră;
Separator între elementele de meniu;
gradient de fundal;
Efectul de estompare la trecerea mouse-ului;
Textul meniului.

Stilurile pot fi folosite în două moduri:

Crunch

Important: atunci când utilizați prima metodă, astfel încât styles.less să fie inclus înainte ca biblioteca less.js să fie inclusă! De asemenea, nu uitați să vă conectați fără prefixe.
Deci foaia de stil arată astfel:

1
2
3
4
5

Popular în categorie: