Share
Acest tutorial va demonstra cum să creați o bară de navigare simplă și simplă folosind mai multe stiluri combinate CSS3. Vrem să privim și să simțim că în trecut nu a putut fi creat decât prin combinarea mai multor imagini, JavaScript și câteva diviziuni. Hai sa incepem?
Notă: toate exemplele de mai jos au fost testate pe Mozilla Firefox, Safari și Chrome. Dacă doriți să obțineți ceva similar în IE sau în orice alt browser, lăsați un comentariu și vă voi ajuta cu plăcere.
O bară de navigare bine concepută și bine concepută a fost, încă de la începutul designului web, unul dintre cele mai puternice elemente de menținere a site-urilor organizate și bine structurate. În trecut, crearea unui design frumos, folosind umbre, gradienți, colțuri rotunjite și efecte de hovering, necesită o serie de trucuri care au mărit dimensiunea codului nostru și numărul de imagini.
Pentru acest tutorial vom explora două efecte foarte importante ale CSS3; Round Corners și Shadows Box, plus vom folosi gradientele liniare prezentate anterior în CSS3 versus Photoshop - Tutorial Backgrounds Complex.
Toată lumea a auzit de ele, va fi redundantă să vorbim despre cum să le creăm, așa că în următoarele exemple mă voi concentra asupra diferențelor de a crea un efect Cornered Corner folosind imagini și avantajele și dezavantajele utilizării CSS3.
Crearea unui efect de colț rotunjit este destul de simplă în orice software grafic, dar în Photoshop avem câteva probleme:
Precizie: Chiar dacă puteți seta raza de colț rotunjită, motorul Photoshop construit în anti-aliasing adaugă adesea unul sau doi pixeli în plus în grafic. Cei mai mulți dintre noi în trecut trebuiau să reducem manual pixelii de colțuri rotunjite bazate pe imagini inexacte pentru a crea o conexiune curată cu, de exemplu, fundaluri de culoare.
Editare: Aceasta este una dintre cele mai mari probleme de a crea un colț rotunjit bazat pe imagine. Dacă creați un grafic pentru un colț de rază de 10px în Photoshop și din anumite motive trebuie să creșteți raza la 20px, nu există altă modalitate de a face decât să redrafli forma sau să editați manual toate colțurile, pierzând timp și precizie. Redimensionarea este o altă problemă imensă, dacă doriți să întindeți sau să măriți forma, trebuie să utilizați Instrumentul de selecție a punctelor în Photoshop, deoarece utilizarea controalelor de transmisie poate provoca distorsiuni nedorite în forma colțului. Nici nu trebuie să menționez că tăierea colțurilor durează câteva minute valoroase.
Umpluturi și granițe: Crearea unui gradient de umplere în interiorul unei casete de colț rotunjite pe imagine a fost întotdeauna o sarcină importantă, chiar dacă acoperim granițele, este necesară precizia chirurgicală pentru a împărți imaginile implicate. Trebuie să creați cel puțin 3 imagini pentru fiecare cutie, una pentru colțurile de sus, altul pentru colțurile de jos și gradientul orizontal sau vertical și apoi scrieți codul pentru aceasta. O altă problemă cu umplerea imaginii este aceea că adesea containerul trebuie să-și mărească înălțimea sau lățimea, obținând un efect nedorit cu gradientul (a se vedea imaginea de mai jos).
Mix Stiluri de colț: În Photoshop, crearea de stiluri de colțuri mixte durează o perioadă, nu există opțiuni de combinare a stilurilor de colț. Trebuie să reduceți / măriți manual raza sau să combinați formele? și apoi slice fiecare colț.
Folosirea CSS3 pentru a înlocui colțurile rotunde bazate pe imagine este o idee grozavă. Iată câteva avantaje:
Să vedem codul pentru a crea colțuri rotunjite pe un element HTML:
/ * Cutii rotunde de colț * / .box fundal-imagine: -moz-linear-gradient (sus, # FAD502, # E89502); fundal-imagine: -webkit-gradient (liniar, 0% 0%, 0% 100%, de la (# FAD502), până la (# E89502), stop color (1, # E89502)); .Fourcorners -moz-border-radius: 20px; -webkit-border-radius: 20px; -khtml-border-radius: 20px; border-radius: 20px; .topleft -moz-border-radius-topleft: 20px; -webkit-border-top-left-radius: 20px; -khtml-border-radius-topleft: 20px; raza de sus-dreapta-stânga: 20px; .bottomleft (-moz-border-radius-bottomleft: 20px; -webkit-border-bottom-left-radius: 20px; -khtml-border-radius-bottomleft: 20px; raza de jos-stânga-stânga: 20px; . dreapta -moz-border-radius-topright: 20px; -webkit-border-top-right-radius: 20px; -khtml-border-radius-topright: 20px; border-top-right-radius: 20px; .bottomright (-moz-border-radius-bottomright: 20px; -webkit-border-bottom-right-radius: 20px; -khtml-border-radius-bottomright: 20px; raza de jos-dreapta-dreapta: 20px; .mesmmetric1 -webkit-border-top-left-radius: 160px; -khtml-border-radius-topleft: 160px; -moz-border-radius-topleft: 160px; raza de sus-dreapta-stânga: 160px; -webkit-border-top-right-radius: 20px; -khtml-border-radius-topright: 20px; -moz-border-radius-topright: 20px; border-top-right-radius: 20px; -webkit-border-bottom-left-radius: 10px; -khtml-border-radius-bottomleft: 10px; -moz-border-radius-bottomleft: 10px; raza de jos-partea stângă-rază: 10px; -webkit-border-bottom-right-radius: 0px; -khtml-border-radius-bottomright: 0px; -moz-border-radius-bottomright: 0px; raza de jos-dreapta-dreapta: 0px; .asimetric2 -webkit-border-top-left-radius: 0px; -khtml-border-radius-topleft: 0px; -moz-border-radius-topleft: 0px; raza de pe raza de sus-stanga: 0px; -webkit-border-top-right-radius: 90px; -khtml-border-radius-topright: 90px; -moz-border-radius-topright: 90px; raza de sus-dreapta-dreapta: 90px; -webkit-border-bottom-left-radius: 0px; -khtml-border-radius-bottomleft: 0px; -moz-border-radius-bottomleft: 0px; raza de jos-stânga-stânga: 0px; -webkit-border-bottom-right-radius: 90px; -khtml-border-radius-bottomright: 90px; -moz-border-radius-bottomright: 90px; raza de jos-dreapta-dreapta: 90px; .circle width: 170px; height: 170px; padding: 15px; font-familie: Arial, Helvetica, sans-serif; Culoare: #fff; font-size: 12px; font-weight: bold; plutește la stânga; fundal-imagine: -moz-linear-gradient (sus, # FAD502, # E89502); fundal-imagine: -webkit-gradient (liniar, 0% 0%, 0% 100%, de la (# FAD502), până la (# E89502), stop color (1, # E89502)); -webkit-border-top-left-radius: 100px; -khtml-border-radius-topleft: 100px; -moz-border-radius-topleft: 100px; raza de pe raza de sus-stanga: 100 pixeli; -webkit-border-top-right-radius: 100px; -khtml-border-radius-topright: 100px; -moz-border-radius-topright: 100px; border-top-right-radius: 100px; -webkit-border-bottom-left-radius: 100px; -khtml-border-radius-bottomleft: 100px; -moz-border-radius-bottomleft: 100px; raza de fund - fund - stânga: 100px; -webkit-border-bottom-right-radius: 100px; -khtml-border-radius-bottomright: 100px; -moz-border-radius-bottomright: 100px; raza de jos-dreapta-dreapta: 100px;
Unele dintre cele mai bune efecte pe care le puteți obține cu Photoshop sunt prin Umbre de Drop și Umbre Interioare. Utilizarea lor în mod corespunzător poate avea efecte 3D deosebite. Desigur, folosirea unei umbre sau a unei umbre interioare într-un mod greșit poate deveni rapid un efect de brânză.
Mai jos veți găsi câteva exemple de bune practici:
CSS3 ne permite să creăm umbre cu doar câteva linii de cod, stilul responsabil este "box-shadow".
Pentru a crea un Photoshop Umbra puteți utiliza următoarea sintaxă:
box-shadow:
Pentru a crea un Photoshop Umbra interioara puteți utiliza următoarea sintaxă:
box-shadow: inset
Accentsconagua