Manjša vadba CSS Oblikovanje Slick Menu Navigacijske vrstice

Ta članek je del našega "Serija vadnic HTML5 / CSS3" - namenjen vam je za boljšega oblikovalca in / ali razvijalca. Klikni tukaj da si ogledate več člankov iz iste serije.

Spletno oblikovanje in razvoj se hitro razvija. To lahko vidimo v številnih novih stvareh, ki se vsak dan pojavljajo v skupnosti (skoraj) vsak dan, pa naj bo to v aplikacijah ali novih okvirih, ki nam pomagajo izboljšati učinkovitost našega vsakodnevnega dela kot spletni oblikovalci ali razvijalci..

Tisto, ki mi je pritegnilo pozornost od razvoja spletnega oblikovanja, je LESS, programabilni jezik slogov, ki razširja način pisanja sintakse CSS z združevanjem nekaterih programskih konceptov, kot so spremenljivke, Mixins, Funkcije in operacije..

Odpre nove zmožnosti v pisanju sintakse CSS. Na primer, z uporabo Mixins v CSS, kot je to, kar počnemo v programu, lahko zdaj shranimo privzete sloge in vrednosti, ki jih lahko uporabimo v celotni datoteki, kadar je to mogoče. S tem ne bomo več morali večkrat pisati istih stilov.

No, naredimo nekaj vaj z MANJEM, da bi dobili boljši vpogled v to, kar lahko ponudi.

Oblikovanje z MANJŠIM

V tej vadnici bomo skušali oblikovati gladko navigacijsko vrstico z menijem, ki jo navdihuje tista v Apple.com. Ker je izvirni izdelek le navdihnjen, upoštevajte, da naš končni izdelek vadnice ne bo popolnoma enak originalnemu izdelku.

Če želite začeti, boste najprej želeli prebrati naslednje koristne vire. Pojasnjujejo nekatere osnovne izvedbe jezika LESS, ki vam bodo v pomoč, preden boste nadaljevali z učenjem.

• LESS je več: naredite CSS kodiranje lažje z MANJŠIM
• Napišite boljši CSS z manj
• Uvod v manjše in primerjavo s Sass

Priprava

Prvič, za ta majhen projekt potrebujemo nekaj bistvenih stvari:

1. LESS Text Editor

Za kodiranje navigacijskega menija potrebujemo urejevalnik besedila. Vendar pa večina urejevalnikov besedila, ki so danes na voljo na trgu (kot so Dreamweaver, Notepad ++, InType, Sublime Text 2), še ni podprta. .manj razširitve datotek privzeto, tako da skladnja morda ni dobro označena.

Zato bomo za namen te vadnice uporabili poseben urejevalnik besedila za LESS z imenom ChrunchApp. Odpremo in uredimo .manj razširitvenih datotek in jih sestavi v statični CSS s to aplikacijo. Ker gre za aplikacijo Adobe Air, jo lahko namestite v vse večje operacijske sisteme (Win, OSX in Linux)..

Za urejevalnik HTML lahko uporabite kateri koli urejevalnik, ki ga že uporabljate. Osebno mi je všeč sublimno besedilo 2.

2. Less.js

Nato prenesite knjižnico LESS JavaScript z njihove uradne spletne strani, trenutna različica je 1.2.1. Postavite jo v mapo za vadbo za to.

Nato povežite datoteko z dokumentom HTML.

3. Brez predpone

Uporabili bomo tudi nekaj funkcij CSS3 za doseganje nekaterih učinkov v navigacijskem meniju, ki bodo vsebovali predpone prodajalca (-moz-, -o-, -webkit-) za pravilno upodabljanje v različnih brskalnikih. Vendar pa osebno ne podpiram uporabe predpon, saj bo napihnil CSS datoteko.

Zato sem se odločil, da uporabim knjižnico JavaScript brez predpone, ki jo je ustvarila Lea Verou in ki bo samodejno obdelala predpone prodajalca v ozadju. Zato bomo morali pisati uradno sintakso iz W3C.

Prenesite datoteko in jo povežite z datoteko HTML.

V redu, vsi smo pripravljeni; zdaj začnimo s strukturiranjem oznake HTML.

Oznaka HTML

Navigacija je precej preprosta. Imela bo pet menijev, ki so zaviti v neurejeno seznamsko oznako. Odprite svoj priljubljeni urejevalnik HTML in vnesite naslednje oznake:

LESS Styling

V tem razdelku bomo začeli oblikovati navigacijo z jezikom LESS. Za tiste, ki so novi v programskem jeziku, pisanje sintakse CSS z MANJŠIM bi se počutilo malo čudno in nerodno. Ampak ne skrbite, ko boste imeli nekaj prakse, bo zagotovo bolj prijetno kot način, kako napišemo čisti CSS (to je moja izkušnja, je tudi malce zasvojenost).

Oglejmo si navigacijski slog iz našega vira navdiha.

Kot lahko vidimo na zgornji sliki zaslona, ​​ima navigacija Apple.com naslednjih 6 glavnih skupnih slogov:

• senca
• meje
• delilec
• nakloni
• učinek
• besedilo

Te sloge bomo shranili in jih shranili znotraj config.less kot privzeti slog Konfiguracija; nekateri oblikovalci bi ga lahko tudi poimenovali lib.css to pomeni Knjižnica. Povežite to datoteko z našim dokumentom.

Prepričajte se, da ste ga postavili pred knjižnico LESS JavaScript.

Določite barvno osnovo s spremenljivkami

V tem koraku bomo določili osnovno barvo navigacije z uporabo spremenljivk. Spremenljivka LESS je deklarirana z uporabo @ simbol.

@theme: # 555;

To @theme spremenljivka je naša standardna barva; uporabili jo bomo na vse možne načine, da bi sledili popolni barvni shemi in tako pričakovali, da bo barvna sestava bolj dosledna.

Določite privzeti slog senc z Mixins

Ena od funkcij, ki jih ljubim LESS, je Mixins. Gre za programski koncept, ki shrani več vnaprej določenih stilov, ki jih je v LESS mogoče podedovati v razredih ali ID-jih pozneje v slogovni listi..

.shadow box-shadow: 0 1px 2px 0 @ tem; 

V zgornjo kodo nisem vključil prednastavljene različice box-shadow , ker bo knjižnica brez predpone samodejno obdelala. Tudi barva senc je podedovana od barve spremenljivke teme.

Določite slog robov s parametričnimi mešanji

Navigacijska vrstica bo morala imeti jasno barvo obrobe z rahlo zaobljenim kotom. Slog meje lahko sestavimo z uporabo parametričnih mešanic. Dejansko ima enako funkcionalnost kot Mixins, le razlika je v tem, da ima tudi spremenljive parametre, zato so vrednosti bolj prilagodljive.

.border (@radius: 3px) border-radius: @radius; obroba: 1px solid @theme - # 050505; 

V zgornji kodi smo nastavili privzeto mejo @radius za 3px in kot smo že omenili, se lahko ta vrednost kasneje spremeni.

Določite Gradient, Divider in Hover s funkcijo

Operacija je preprosto programski jezik, kjer lahko uporabimo matematično formulo, kot je dodatek, delitev, odštevanje in množenje, da dobimo želeni rezultat. Oglejmo si naslednjo kodo:

.delilec mejni slog: trdna; meja-širina: 0 1px 0 1px; border-color: transparent @theme - # 111 transparent @theme + # 333; 

V zgornji kodi odštejemo @theme spremenljivka za # 111, tako bi bil barvni izhod leve obrobe nekoliko temnejši. Medtem ko je prava barva obrobe izpeljana iz dodatka @theme spremenljivka s šestnajstiško barvo # 333, proizvodnja bi bila lažja.

Raven barvne sheme

No, za nekatere od vas, ki bi jih lahko zamenjali z formulami, preglejmo spodnji diagram barvne sheme, da bomo bolje razumeli:

Največji temni ton je # 000 (črna), medtem ko je najvišji svetlobni ton #fff (bela) in naša trenutna barvna osnova je # 555. Torej, če želimo barvno osnovo 3 nivoji so temnejši od trenutnega, ga lahko enostavno odštejemo # 333. Enako lahko uporabite tudi za osvetlitev barve.

Nato bomo upravljali barvo gradienta.

.gradient ozadje: linearni gradient (top, @theme + # 252525 0%, @theme + # 171717 50%, @theme - # 010101 51%, @theme + # 151515 100%);  .hovereffect ozadje: linearno-gradient (top, @theme - # 010101 0%, @theme - # 121212 50%, @theme - # 222222 51%, @theme - # 050505 100%); 

Določite slog besedila z zaščitnimi elementi

Na navigacijski vrstici načrtujemo 2 barvi, ne temno barvo in eno svetlobo. Za besedilo uporabimo dva pogojna stavka, ki uporabljata Guard Mixins.

Najprej, ko je besedilu dodana barva, ki ima svetlost 50% ali več, bo. \ T text-shadow v tem primeru se obarva temno # 000000.

.textcolor (@txtcolor), ko (lahkost (@txtcolor)> = 50%) (barva: @txtcolor; text-shadow: 1px 1px 0px # 000000; 

Potem, ko je besedilu dana barva, je svetlost manjša od 50% text-shadow bo postala bela.

.textcolor (@txtcolor), ko (lahkotnost (@txtcolor) 
Uvažanje LESS
 
Ustvarimo še eno .manj ime datoteke styles.less in uvoz config.less v to:
 
@import "config.less";
 
Dodaj družino pisav
 
Da bo navigacijska vrstica videti bolj privlačna, bomo uporabili novo družino pisav @ font-face pravilo. Presenetljivo, @ font-face pravilo je dejansko že podprto od IE6!
 
Tokrat bomo uporabili pisavo Asap. Prenesite ga iz zbirke pisav Font Squirrel. Nato v naš nedavno ustvarjen vstavite naslednje sloge styles.less mapa.
 
@ font-face družina pisav: 'AsapRegular'; src: url ('fonts / Asap-Regular-webfont.eot'); format src: url ("pisave / Asap-Regular-webfont.eot? #iefix") ("embedded-opentype"), format url ("pisave / Asap-Regular-webfont.woff") ("woff"), URL ('fonts / Asap-Regular-webfont.ttf') format ('truetype'), url ('fonts / Asap-Regular-webfont.svg # AsapRegular') format ('svg'); font-weight: normalna; slog pisave: normalno;  
 
Oblikovanje telesa z barvnimi funkcijami
 
Zdaj vam bomo dali barvo ozadja telo (ki mora biti svetlejša od barvne osnove), kot tudi določiti družino pisave in velikost pisave. Učinek lahko uporabimo s funkcijami barv:
 
Naslednja koda bo olajšala ozadje za 30%.
 
telo ozadje: osvetli (@mej, 30%); družina pisav: AsapRegular, sans-serif; velikost pisave: 11pt; 
 
 
 
Oblikovanje navigacije z ugnezdenim pravilom
 
V LESS smo sposobni gnezditi sloge neposredno pod njegovim staršem. Oglejmo si spodnjo kodo.
 
The nav oznaka, ki vsebuje vse potrebne elemente za navigacijo, bodo imeli naslednje sloge.
 
nav margin: 50px auto 0; širina: 788px; višina: 45px; .border; .shadow; 
 
Opazil sem, da sem namesto, da bi spet podal veliko CSS pravil, vstavil samo .meje da podate slog meje in .senca da dodate senco. V resničnih primerih se lahko ta niz razredov ponovno uporabi tudi v drugem elementu, kjerkoli je to potrebno.
 
 
 
Nato podajamo sloge za ul znotraj nav da imajo nič padding in margin. Ne tako dolgo nazaj bomo stilu pristopili s pisanjem nekaj takega:
 
nav … nav ul …
 
Nič ni narobe s tem pristopom, pravzaprav sem ga vsakokrat delal in sem se z njim precej zadovoljil. Vendar pa je ta metoda, kot je dejal oblikovalec CSS, verbosed in v nekaterih primerih ni lahko upravljati.
 
Zdaj lahko naredimo nekaj takega:
 
nav margin: 50px auto 0; širina: 788px; višina: 45px; .border; .shadow; ul polnilo: 0; margin: 0; 
 
 
 
In potem bo meni prikazan v vrsti z uporabo prikaz: v vrstici nepremičnine.
 
nav margin: 50px auto 0; širina: 788px; višina: 45px; .border; .shadow; ul polnilo: 0; margin: 0; li prikaz: inline; 
 
 
 
V spodnji sintaksi določimo slog oznake sidra menija in dodamo vnaprej določene sloge, to so: .textcolor, .delilec, .gradient.
 
nav margin: 50px auto 0; širina: 788px; višina: 45px; .border; .shadow; ul polnilo: 0; margin: 0; li prikaz: inline; a text-decoration: none; prikaz: inline-block; plovec: levo; širina: 156px; višina: 45px; text-align: center; višina linije: 300%; .textcolor (# f2f2f2); // To vrstico lahko spremenite .divider; .gradient; 
 
V zgornji kodi uporabimo šestnajstiško barvo # f2f2f2 v kateri se šteje, da je svetlost nad 50%, zato pričakujemo, da bo senca postala temna (samodejno). Preostali del kode, ki sem ga prepričal, je povsem samoumeven.
 
 
 
Vendar, če pogledamo trenutni rezultat zgoraj, ima vsak od menijev delilnike, kar ima za posledico, da zadnji odsek preplavi dno. Zato moramo izogniti slog meje za prvega in zadnjega otroka navigacijske vrstice.
 
nav margin: 50px auto 0; širina: 788px; višina: 45px; .border; .shadow; ul polnilo: 0; margin: 0; li prikaz: inline; a text-decoration: none; prikaz: inline-block; plovec: levo; širina: 156px; višina: 45px; text-align: center; višina linije: 300%; .textcolor (# f2f2f2); // To vrstico lahko spremenite .divider; .gradient;  li: prvi otrok border-left: none;  li: zadnji otrok border-right: none; 
 
 
 
Država Hover
 
Za zadnji korak bomo dodali hover efekt. V LESS lahko dodamo psevdoelement kot naprimer : hover uporabo & simbol.
 
nav margin: 50px auto 0; širina: 788px; višina: 45px; .border; .shadow; ul polnilo: 0; margin: 0; li prikaz: inline; a text-decoration: none; prikaz: inline-block; plovec: levo; širina: 156px; višina: 45px; text-align: center; višina linije: 300%; .textcolor (# f2f2f2); // To vrstico lahko spremenite .divider; .gradient; &: hover .hovereffect;  li: prvi otrok border-left: none;  li: zadnji otrok border-right: none; 
 
 
 
Spremenite barvno temo
 
Tukaj je kul del LESS. Če želimo spremeniti celotno barvno temo, jo lahko naredimo v manj spremembah vrstic kot tisto, kar potrebujemo v čistem CSS.
 
V tem primeru bom spremenila barvo navigacije, da bo nekoliko lažja. Preprosto spremenite naslednji dve vrstici.
 
@theme: #ccc; // Spremeni to
 
.besedilna barva (# 555); //In to
 
In tukaj je rezultat.
 
 
 
Zbiranje LESS v CSS
 
Ko še vedno uporabljamo manjši JavaScript, bo zagrabil .manj datoteko in jo prevedite v statični CSS, tako da ga lahko standardni brskalnik interpretira. To je dvojna naloga na strani odjemalca, da ne omenjamo odvečne in izgubljene pasovne širine. Glavna točka LESS je v delovnem procesu, da poenostavi našo prakso pri pripravi statičnega CSS-a, da je bolj dinamičen in programabilen.
 
Torej, ko bomo postavili navigacijsko vrstico v živo na spletno mesto, je pomembno, da datoteko LESS sestavite v statični CSS.
 
Kliknite gumb Zlomite! velik gumb.
 
 
 
Shranite .less v naši vadbeni datoteki, povežite ga z dokumentom HTML in prekinite povezavo z .manj & less.js iz dokumenta.
 
 .shadow box-shadow: 0 1px 2px 0 # 555555;  .divider border-style: solid; meja-širina: 0 1px 0 1px; obrobna barva: prozorna # 444444 transparentna # 888888;  .gradient ozadje: linearno gradient (top, # 7a7a7a 0%, # 6c6c6c 50%, # 545454 51%, # 6a6a6a 100%);  .hovereffect ozadje: linearno gradient (top, # 545454 0%, # 434343 50%, # 333333 51%, # 505050 100%);  @ font-face družina pisav: 'AsapRegular'; src: url ('fonts / Asap-Regular-webfont.eot'); format src: url ("pisave / Asap-Regular-webfont.eot? #iefix") ("embedded-opentype"), format url ("pisave / Asap-Regular-webfont.woff") ("woff"), URL ('fonts / Asap-Regular-webfont.ttf') format ('truetype'), url ('fonts / Asap-Regular-webfont.svg # AsapRegular') format ('svg'); font-weight: normalna; slog pisave: normalno;  telo ozadje: # a2a2a2; družina pisav: AsapRegular, sans-serif; velikost pisave: 11pt;  nav margin: 50px auto 0; širina: 788px; višina: 45px; obrobni polmer: 3px; obroba: 1px trdna # 505050; box-shadow: 0 1px 2px 0 # 555555;  nav ul padding: 0; margin: 0;  nav ul li prikaz: inline;  nav ul li a text-decoration: none; prikaz: inline-block; plovec: levo; širina: 156px; višina: 45px; text-align: center; višina linije: 300%; barva: # f2f2f2; text-shadow: 1px 1px 0px # 000000; mejni slog: trdna; meja-širina: 0 1px 0 1px; obrobna barva: prozorna # 444444 transparentna # 888888; ozadje: linearni gradient (top, # 7a7a7a 0%, # 6c6c6c 50%, # 545454 51%, # 6a6a6a 100%);  nav ul li a: hover ozadje: linearno gradient (top, # 545454 0%, # 434343 50%, # 333333 51%, # 505050 100%);  nav ul li: prvi otrok border-left: none;  nav ul li: zadnji otrok border-right: none;  
 
Oglejmo si še enkrat.
 
 
 
In končali smo, prosim vas, da ga eksperimentirate.
 
Zaključek
 
Danes smo se naučili veliko stvari o jeziku LESS, na primer:
 

• Spremenljivke.
• Mixins
• Parametrične mešanice
• Operacije
• Varovani Mixins
• In ugnezdena pravila

Čeprav je še veliko stvari, ki jih lahko pokrijemo še dlje, in veliko možnosti, ki jih je mogoče prikazati in razložiti, upamo, da ste uživali v tej osnovni vadnici.

• Demo
• Vir prenosa