Bună ziua, dragi cititori ai XoZblog a! Web design-ul și dezvoltarea web-ului se dezvoltă foarte repede. Noi vedem tot mai multe produse noi în fiecare zi, indiferent dacă acestea sunt aplicații sau noi servicii care ne fac viața pe web mai productivă și mai convenabilă. Și designul web este pur și simplu un spațiu infinit, limitat doar de talentul și abilitățile artistului (designer). Deci, hai să vorbim despre LESS - un limbaj dinamic de marcare a stilului, care va simplifica scrierea stilurilor CSS.
Ce este mai puțin?
Mai puțin este o superstructură peste CSS. Acest lucru înseamnă că orice cod CSS este o valoare LESS mai mare, dar elementele LESS suplimentare nu vor funcționa într-un cod CSS simplu. Acest lucru este remarcabil, deoarece CSS existent este deja un cod LESS funcțional, ceea ce reduce pragul de intrare în noua tehnologie.
Mai puțin adaugă multe proprietăți dinamice necesare pentru CSS. Acesta introduce variabile, operațiuni, elemente și impurități. Abilitatea de a scrie foi de stil în mod modular vă va economisi multe probleme.
LESS face stilurile de scriere mult mai usor. De exemplu, prin aplicarea mixinelor, creăm ceva similar cu funcțiile care pot lua argumente. Mixins - permite includerea tuturor proprietăților unei clase într-o altă clasă prin includerea pur și simplu a clasei ca valoare a uneia dintre proprietăți.
rotunjite colțuri # 40; @radius. 5px # 41; # 123;
border-radius. @radius;
-webkit-border-radius. @radius;
-Moz-border-radius. @radius;
# 125;
#header # 123;
.rotunjite colțuri;
# 125;
#footer # 123;
.rotunjite colțuri # 40; 10px # 41; ;
# 125;
Un CSS compilat va arăta astfel:
#header # 123;
border-radius. 5px;
-webkit-border-radius. 5px;
-Moz-border-radius. 5px;
# 125;
#footer # 123;
border-radius. 10px;
-webkit-border-radius. 10px;
-Moz-border-radius. 10px;
# 125;
Pregătirea
Înainte de a începe să scriem cod, să analizăm ce avem nevoie:
2. Less.Js
3. Prefix-Free
De asemenea, vom folosi mai multe efecte CSS3 care includ prefixele furnizorilor (-moz-. -o-. -webkit-) pentru a face efectul la fel de corect în diferite browsere.
Încărcăm biblioteca prefix-free.js și le conectăm la index.html:
Aceasta se încheie cu pregătirea și vom continua direct la crearea meniului în stilul Apple.com
Marcaj HTML
Mai puține stiluri
Să ne uităm la elementele constitutive ale meniului:
După cum vedem în captura de ecran de mai sus, navigarea Apple.com are următoarele 6 părți principale:
- Se folosește o umbră;
- frontieră;
- Separator între elementele de meniu;
- Gradient pentru fundal;
- Efectul de întunecare când se mișcă mouse-ul;
- Textul meniului.
Puteți utiliza stilurile scrise în două moduri:
- conectați stiles.less și biblioteca less.js;
- sau să compilați stiluri în programul Crunch și să atașați deja la pagină stilul obișnuit styles.css
Important: atunci când utilizați prima metodă pentru a conecta stiluri fără a avea loc înainte de a conecta biblioteca less.js. De asemenea, nu uitați să vă conectați fără prefix.
Astfel, legătura dintre stiluri arată astfel:
Definirea unei variabile de bază
Vom folosi 2 fișiere: config.less în acesta vom defini toate variabilele, amestecurile și așa mai departe. apoi îl importăm în al doilea (stiles.less) în care creăm deja stilurile pentru elementele de meniu.
Acum, să examinăm codul în config.less. Definiți culoarea de bază a meniului utilizând variabilele. O variabilă în LESS este declarată cu simbolul @.
Această variabilă @theme stochează culoarea de bază a meniului, vom face referire adesea la această culoare, deci este recomandabil să o puneți într-o variabilă.
Definiți umbra pentru meniu amestecând (mixins)
Una dintre caracteristicile LESS este amestecurile. Permiteți includerea tuturor proprietăților unei clase într-o altă clasă.
umbră # 123;
box-shadow. 0 1px 2px 0 @theme;
# 125;
În codul de mai sus, nu am inclus prefixul pentru box-shadow. biblioteca fără prefix va adăuga automat. În plus, culoarea umbrei este moștenită de la culoarea variabilei @theme.
Definiți stilul pentru limitele meniului utilizând mixins cu parametrul
Pentru meniul nostru, aveți nevoie de o margine cu colțuri rotunjite. Mixins cu un parametru - de fapt, are aceeași funcționalitate ca o simplă amestecare, singura diferență fiind că are și un parametru variabil.
frontieră # 40; @radius. 3px # 41; # 123;
border-radius. @radius;
de frontieră. 1px solidă @ - # 050505;
# 125;
În exemplul de mai sus, setăm rotunjirea implicită la @radius la 3 pixeli și, așa cum am spus, această valoare poate fi modificată.
Definiți gradientul, separatorul și stilul când plasați mouse-ul cu operațiuni
În LESS, utilizând operațiile, puteți mări, reduce, împărți și multiplica atât valorile, cât și culorile proprietăților, permițându-vă să specificați relații complexe între proprietăți pentru a obține rezultatul dorit. Să aruncăm o privire la următorul cod, care stabilește proprietățile delimitatorului din meniu:
compas # 123;
Stil de frontieră. solid;
border-width. 0 1px 0 1px;
border-color. temă transparentă ## temă transparentă # # # 333;
# 125;
În exemplul de mai sus, scădem numărul # 111 din variabila @theme. Astfel, partea stângă a separatorului va fi ușor mai închisă decât culoarea de bază, iar cea dreaptă este mai ușoară. Putem face astfel de manipulări cu culoarea HEX.
Pentru o mai mare claritate a manipulării culorilor, să ne uităm la schema de culori:
Culoarea închisă maximă este de # 000 (negru), iar culoarea luminii maxime este #FFF (alb), iar culoarea de bază este # 555. Deci, dacă vrem să obținem culoarea cu trei nivele mai întunecate, scădeți apoi numărul # 333.
Acum stilurile de gradient:
gradient # 123;
fundal. liniar gradient # 40; spre fund. @theme + # 252525 0%. @theme + # 171717 50%. @theme - # 010101 51%. @theme + # 151515 100% # 41; ;
# 125;
.hovereffect # 123;
fundal. liniar gradient # 40; spre fund. @theme - # 010101 0%. @theme - # 121212 50%. @theme - # 222222 51%. @theme - # 050505 100% # 41; ;
# 125;
Definițiile stilului textului meniului pe amestecuri (amestecuri) cu încuietori de siguranță
Planificăm să folosim 2 culori text și culoarea umbrelor textului. O opțiune este utilizată dacă fundalul meniului este luminos, atunci culoarea textului este întunecată și invers.
În primul rând, dacă culoarea textului are o luminozitate egală sau mai mare de 50%, atunci umbra ar trebui să se întunece, în acest caz, să ia culoarea # 000000.
textcolor # 40; @txtcolor # 41; când # 40; lumină # 40; @txtcolor # 41;> = 50% # 41; # 123;
culoare. @txtcolor;
text-umbră. 1px 1px 0px # 000000;
# 125;
Și a doua opțiune, atunci când luminozitatea textului este mai mică de 50%, atunci umbra va deveni albă.
textcolor # 40; @txtcolor # 41; când # 40; lumină # 40; @txtcolor # 41; <50% ) {
culoare. @txtcolor;
text-umbră. 1px 1px 0px #ffffff;
# 125;
În acest moment, terminăm crearea fișierului config.less și continuăm să creăm stilurile de fișiere
Importați config.less
Să creăm un fișier numit styles.less și, în primul rând, să atașăm config.less la acesta. în modul următor:
Stil pentru corpul satului
Acum, setăm culoarea de fundal a paginii (care ar trebui să fie mai ușoară decât culoarea de bază) și specifică și familia de fonturi și dimensiunea fontului. Cu ajutorul funcției, să lăsăm culoarea de fundal a paginii mai ușoară decât culoarea de bază cu 30%:
corp # 123;
fundal. ușura # 40; @theme. 30% # 41; ;
font-family. AsapRegular. sans-serif;
font-size. 11pt;
# 125;
În prezent, rezultatul muncii noastre arată așa.
Până acum nu este foarte atractiv. Dar încă înainte.
Stilul de bază pentru meniuri cu reguli imbricate
În LESS, putem încorpora stilurile unui element direct în stilul părintelui. Navigarea etichetei nav este o specificație HTML5 care conține toate elementele necesare pentru navigare. Iată stilurile sale:
nav # 123;
marjă. 50px auto 0;
lățime. 788px;
înălțime. 45px;
.frontieră;
.umbra;
# 125;
Rețineți că, în loc de a trebui să scrie o grămadă de reguli CSS, definite doar înălțimea, lățimea și padding. În timp ce în străinătate, și stilul ei, precum umbra ne preia cu ajutorul amestecare (mixins), specificați numele clasei și .shadow .border și regulile clasei nav adăugate ale acestor clase, pe care am scris despre în fișierul config.less.
Apoi, vom adăuga un stil pentru lista ul în nav. În CSS simplu, aceasta ar arăta astfel:
Cu toate acestea, în moștenirea mai mică se întâmplă altfel, voi înțelege mai ușor și mai logic:
nav # 123;
marjă. 50px auto 0;
lățime. 788px;
înălțime. 45px;
.frontieră;
.umbra;
ul # 123;
umplutură. 0;
marjă. 0;
# 125;
# 125;
După cum puteți vedea în imagine, elementele listului li sunt aranjate vertical și avem nevoie ca ele să fie plasate orizontal. Pentru aceasta, setați proprietatea afișajului: inline;
nav # 123;
marjă. 50px auto 0;
lățime. 788px;
înălțime. 45px;
.frontieră;
.umbra;
ul # 123;
umplutură. 0;
marjă. 0;
Li # 123;
afișare. inline;
# 125;
# 125;
# 125;
Acum, să descriem stilurile pentru link-ul din elementul listă și să adăugăm stilurile terminate. textcolor. divizor. gradientului.
nav # 123;
marjă. 50px auto 0;
lățime. 788px;
înălțime. 45px;
.frontieră;
.umbra;
ul # 123;
umplutură. 0;
marjă. 0;
Li # 123;
afișare. inline;
o # 123;
text-decor. nici unul;
afișare. inline-block;
float. stânga;
lățime. 156px;
înălțime. 45px;
text-align. centru;
line-height. 300%;
.textcolor # 40; # f2f2f2 # 41; ;
.divizor;
.gradientului;
# 125;
# 125;
# 125;
# 125;
În exemplul de mai sus, aplicăm culoarea hexazecimală # f2f2f2. Această culoare are o luminozitate mai mare de 50%, astfel încât umbra va fi setată automat în negru. Restul codului sunt sigur că este evident.
Cu toate acestea, dacă privim rezultatul curent de mai sus, ultimul element părăsește panoul. Pentru a scăpa de acest lucru, scoatem marginea din stânga din primul element de meniu și chenarul din dreapta din ultimul element din meniu.
nav # 123;
marjă. 50px auto 0;
lățime. 788px;
înălțime. 45px;
.frontieră;
.umbra;
ul # 123;
umplutură. 0;
marjă. 0;
Li # 123;
afișare. inline;
o # 123;
text-decor. nici unul;
afișare. inline-block;
float. stânga;
lățime. 156px;
înălțime. 45px;
text-align. centru;
line-height. 300%;
.textcolor # 40; # f2f2f2 # 41; ; // Puteți schimba această linie
.divizor;
.gradientului;
# 125;
# 125;
Li. primul copil a # 123;
-Chenarul din stânga. nici unul;
# 125;
Li. ultimul copil a # 123;
-Chenarul din dreapta. nici unul;
# 125;
# 125;
# 125;
Stilul efectului de hover
În ultima etapă, adăugăm efectul când plasăm cursorul pe cursă. În LESS, putem adăuga un pseudo-element, cum ar fi: hover folosind simbolul # 038; .
nav # 123;
marjă. 50px auto 0;
lățime. 788px;
înălțime. 45px;
.frontieră;
.umbra;
ul # 123;
umplutură. 0;
marjă. 0;
Li # 123;
afișare. inline;
o # 123;
text-decor. nici unul;
afișare. inline-block;
float. stânga;
lățime. 156px;
înălțime. 45px;
text-align. centru;
line-height. 300%;
.textcolor # 40; # f2f2f2 # 41; ; // Puteți schimba această linie
.divizor;
.gradientului;
. planare # 123;
.hovereffect;
# 125;
# 125;
# 125;
Li. primul copil a # 123;
-Chenarul din stânga. nici unul;
# 125;
Li. ultimul copil a # 123;
-Chenarul din dreapta. nici unul;
# 125;
# 125;
# 125;
Ne compilam mai puțin în CSS
Ei bine, asta e tot, scrierea unui meniu apple.com pe aceasta poate fi finalizată. Rămâne să decidem modul în care vom atașa stilurile scrise pe pagina web. După cum am menționat mai sus, puteți utiliza stilurile scrise în două moduri:
- conectați stiles.less și biblioteca less.js;
- sau să compilați stiluri în programul Crunch și să atașați deja la pagină stilul obișnuit styles.css
Desigur, a doua opțiune este mai bună, de ce atașați două fișiere și faceți o dublă activitate pe partea clientului, așa că vom compila stilurile LESS scrise în CSS static normal.
Pentru a face acest lucru, faceți clic pe butonul mare Crunch It. Și păstrează stiles.css obișnuite
În această privință, închei lecția.
Pentru a fi la curent cu cele mai recente articole și lecții, abonați-vă la lista săptămânală de corespondență sau la RSS feed-ul de știri. Mulțumesc!