Share
Datorită proprietăților CSS avansate, cum ar fi gradientele și umbrele, acum este destul de ușor să transformi o formă web plictisitoare în ceva frumos - cu un efort minim. Îți arăt cum în tutorialul de astăzi!
Acest tutorial include un screencast disponibil pentru membrii Tuts + Premium.
Gradienții subțiri de fond dau adâncime câmpurilor, în timp ce umbrele le ridică din pagină. Chiar mai impresionant este că acest lucru se face fără nici o imagine.
Urmând acest tutorial, nu numai că veți ajunge într-o formă ușoară și frumoasă, veți învăța și veți înțelege și noi tehnici CSS3, cum ar fi box-shadow, gradienți, culori opace, și colturi rotunjite.
CSS3 este următoarea generație de CSS care este în curs de dezvoltare, dar care nu oprește browserele de la implementarea deja a multor caracteristici proeminente.
Opera are un nivel mai ridicat de suport pentru CSS3 (cu excepția gradientelor de fundal) în următoarea lor versiune (10.50 Beta).
De asemenea, Internet Explorer a declarat că va avea îmbunătățit suportul CSS3 cu versiunea 9; totuși, numai timpul va spune cât de adevărat este acest lucru.
Lucrurile pe care le puteți face cu CSS3 (umbre, gradienți, colțuri rotunde, animații etc.) servesc unui scop de a crea efecte frumoase fără a trebui să integrați imagini sau scripturi, ceea ce duce la o încărcare mai rapidă.
Înainte de a începe styling-ul avem nevoie de ceva de stil, deci aici este forma.
Fiecare câmp se află într-un paragraf cu clasa proprie, iar primele trei câmpuri au o etichetă care explică utilizarea lor.
Cum arată fără stil??
Functional, dar plictisitor. Să începem să pimpăm acest formular.
Înainte de a ne arunca cu capul în tehnicile CSS3, trebuie să creăm o structură de bază pentru browserele care nu acceptă încă CSS3.
intrare, textarea padding: 9px; frontieră: solid 1px # E5E5E5; contur: 0; font: normal 13px / 100% Verdana, Tahoma, sans-serif; lățime: 200px; fundal: #FFFFFF; textarea width: 400px; max-lățime: 400px; înălțime: 150px; linia-înălțime: 150%; intrare: hover, textarea: hover, intrare: focus, textarea: focalizare border-color: # C9C9C9; .formă etichetă margin-left: 10px; culoare: # 999999; . introduceți intrarea width: auto; padding: 9px 15px; fundal: # 617798; frontieră: 0; font-size: 14px; culoare: #FFFFFF;
Cum arată efortul nostru până acum??
Nu prea rau. Acum, să începem îmbunătățirile noastre cu CSS3 mai avansată.
Box-shadow face exact ceea ce pare: creează o umbră în jurul unei casete.
Sintaxa pentru box-shadow este destul de simplă:
box-shadow:;
Decalaj orizontal este plasarea umbrei de la stânga la dreapta. Dacă îl setați la "2px", umbra va fi de 2 pixeli în dreapta. Decalaj vertical este aceeași, dar sus / jos.
Estompa este pur și simplu valoarea de estompare a umbrei, unde 0 este minim.
Asa arata cum arata umbra noastra:
intrare, textarea box-shadow: rgba (0,0,0, 0,1) 0px 0px 8px; -moz-box-shadow: rgba (0,0,0, 0,1) 0px 0px 8px; -webkit-box-shadow: rgba (0,0,0, 0,1) 0px 0px 8px;
Aici avem trei linii care par asemănătoare.
Până când CSS3 devine standard, trebuie să utilizați toate cele trei metode. Internet Explorer are propriul mod ciudat de a face lucruri și, deși este capabil să facă o umbră, nu va arăta așa cum o vrem. 3
S-ar putea să observați că nu a fost folosită nici o culoare RGB normală, pentru că folosim două tehnici CSS3 pe aceeași linie: box-shadow și RGBA.
RGBA (roșu verde albastru Alfa) este, pur și simplu, pus în culori cu opacitate.
Sintaxa pentru rgba este următoarea:
RGBA (, , , );
Este perfect bine să utilizați un gri deschis pentru culoarea umbrei, dar dacă utilizați orice alt fundal decât albul va arăta ciudat. Un negru opac pe de altă parte va funcționa bine indiferent de fundal.
Deci, umbra noastră de box este neagră, cu opacitate de 10% (0,1), fără decalaj orizontal și vertical și cu o blur de 8 pixeli. Acesta va arata astfel:
Cuvântul cheie este aici subtilitate. Dacă aplicăm prea multă umbră, ar părea urâtă; dacă aplicăm prea puțin, nu va avea efect. Practic, nu vrem ca cineva să observe umbra, dar să o ridicăm de pe pagină.
În timp ce sintaxa box-umbra este ușor de înțeles, gradienții sunt mai complicați. Cu gradientele CSS3, puteți crea niște forme uimitoare - de la tablă de darts la curcubeu - astfel încât să vă puteți imagina că are o sintaxă mai complexă. Din fericire, nu avem nevoie să codificăm astăzi un curcubeu; avem nevoie doar de un gradient linear linear.
Sintaxă pentru Webkit:
-webkit-gradient (liniar,, , din( ), la( ))
Sintaxă pentru Gecko:
-gradient de Moz-linear-(, , )
După cum puteți vedea, metodele sunt destul de diferite, deci este nevoie de explicații.
Webkit gradientele necesită un punct de pornire (X și Y), un punct final (X și Y), o culoare de culoare și o culoare. Unghiul este determinat de locul unde se află începutul și sfârșitul, iar gradientul va fi colorat cu "de la (culoarea)" estompată la "la (culoarea)".
Gecko gradienti, pe de altă parte, necesită doar un punct de pornire (Y) și cel puțin două culori. Dacă doriți un gradient care merge de sus în jos (90deg), nu este necesar să atribuiți un unghi.
Deci, pentru a obține un gradient liniar simplu de sus în jos - negru la alb - am face așa:
fundal: -webkit-gradient (liniar, stânga sus, partea stângă jos, de la (# 000000), la (#FFFFFF)); fundal: -moz-linear-gradient (top, # 000000, #FFFFFF);
Și ar părea așa:
(Voi continua să folosesc culoarea neagră pentru demonstrație, iar la final voi trece la culoarea reală pe care o vom folosi pentru formular.)
Acum, când avem noțiunile de bază, putem începe să facem formularul să arate cum vrem. Primul lucru pe care dorim să-l facem este să limităm înălțimea gradientului, astfel încât să pară aceleași pentru câmpurile de intrare și textarea; altfel gradientul ar umple întreaga înălțime, după cum urmează:
Acesta este modul în care limitează gradientul de fond la 25 de pixeli în Webkit și Firefox:
input, textarea background: -webkit-gradient (liniar, stânga sus, stânga 25, de la (# 000000) la (#FFFFFF)); fundal: -moz-linear-gradient (top, # 000000, #FFFFFF 25px);
Pentru Webkit, în loc de a stabili punctul final în "partea de jos din stânga", l-am setat la "stânga 25", indicând că se va termina 25 de pixeli din partea de sus.
Pentru Gecko, facem același lucru prin adăugarea unei valori "25px" la culoarea finală.
Iar rezultatul este:
Cel de-al doilea lucru pe care dorim să-l facem este să creați o linie albă subțire în partea de sus a gradientului, pentru a da impresia vizuală subtilă că terenul este ridicat. Cât de important poate fi un singur pixel? Aruncați o privire la acest articol: Adăugarea de adâncime cu Pixel Perfect Line Work.
Pentru a crea acest lucru, vom avea nevoie de trei puncte în gradient. În exemplul anterior, gradientul nostru avea două puncte: de sus și de jos (negru → alb). Aici vom adăuga un punct suplimentar între ele (alb → negru → alb).
Pentru a ilustra:
Cum facem asta??
input, textarea fundal: -webkit-gradient (liniar, stânga sus, stânga 25, de la (#FFFFFF), oprire color (4%, # 000000), la (#FFFFFF); fundal: -moz-linear-gradient (top, #FFFFFF, # 000000 1px, #FFFFFF 25px);
În Webkit folosim Culoare-stop funcția, dar, din păcate, nu suportă valori în pixeli, doar procentaj. Dar, datorită atenției față de matematică în școală, ne dăm seama că 4% din 25px este 1px.
Pentru Gecko, pur și simplu adăugăm o a treia culoare între primele două și dă-i o valoare "1px", indicând faptul că ar trebui să se termine 1 pixel din partea de sus.
Linia alb subțire:
Acum, să schimbăm culoarea neagră (# 000000) într-o culoare mai deschisă (#EEEEEE):
Doar niște lucruri mici detaliate rămân.
În primul rând, vom crea o umbră mai întunecată pentru câmpuri atunci când utilizatorul o va deplasa sau o va selecta:
intrări: hover, textarea: hover, intrare: focus, textarea: focus -webkit-box-shadow: rgba (0, 0, 0, 0.15) 0px 0px 8px;
Este doar o creștere de la 10% la 15%, dar ceea ce suntem după este, din nou, subtilitate.
Ultimul lucru pe care îl facem este să creeze niște colțuri rotunjite pentru butonul3 pentru al face să se deosebească de celelalte elemente:
.trimiteți intrarea -webkit-border-radius: 5px; -moz-border-radius: 5px;
Valoarea este raza pe care colțurile vor fi rotunjite. Radiația standard a graniței este lăsată în mod intenționat, deoarece Opera pare să aibă o problemă cu ea.
Rezultat:
Acum trebuie doar să avem grijă de browserele care încă nu acceptă CSS3 (IE) sau doar parțial (Opera).
Vrem ca diferitele versiuni (CSS3 și normal) să pară cât mai asemănătoare posibil și cel mai simplu lucru este să ne întoarcem la modul vechi: imagini.
Luați o captură de ecran a frumosului formular CSS3 și salvați o mică parte a gradientului ca o imagine.
Apoi, utilizați-l în input și textarea ca fundal. Atâta timp cât gradienții CSS3 apar după imaginea de fundal, browserele care acceptă CSS3 vor ignora imaginea.
Accentsconagua
introducere, textarea background: #FFFFFF url ('bg_form.png') stânga top repeat-x; Și acum am terminat! Bucurați-vă de forma dvs. și sper că ați învățat ceva.
Chrome (4.0), Firefox (3.6), Safari (4.0):
Opera (10.50b):
Internet Explorer (8):
intrare, textarea padding: 9px; frontieră: solid 1px # E5E5E5; contur: 0; font: normal 13px / 100% Verdana, Tahoma, sans-serif; lățime: 200px; fundal: #FFFFFF url ('bg_form.png') stânga top repeat-x; fundal: -webkit-gradient (liniar, stânga sus, stânga 25, de la (#FFFFFF), stop color (4%, #EEEEEE), la (#FFFFFF)); fundal: -moz-linear-gradient (top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px); box-shadow: rgba (0,0,0, 0,1) 0px 0px 8px; -moz-box-shadow: rgba (0,0,0, 0,1) 0px 0px 8px; -webkit-box-shadow: rgba (0,0,0, 0,1) 0px 0px 8px; textarea width: 400px; max-lățime: 400px; înălțime: 150px; linia-înălțime: 150%; intrare: hover, textarea: hover, intrare: focus, textarea: focalizare border-color: # C9C9C9; -webkit-box-shadow: rgba (0, 0, 0, 0.15) 0px 0px 8px; .formă etichetă margin-left: 10px; culoare: # 999999; . introduceți intrarea width: auto; padding: 9px 15px; fundal: # 617798; frontieră: 0; font-size: 14px; culoare: #FFFFFF; -moz-border-radius: 5px; -webkit-border-radius: 5px; Cam despre asta e! Cu un efort minim și puterea CSS 3, am transformat o formă blandă și obișnuită în ceva frumos. Vă mulțumim foarte mult pentru citire și nu ezitați să puneți întrebările pe care le puteți avea mai jos.
