Share
Hei, băieți, astăzi vom crea Cloud Tag Tag-ul Premium Pixel. Ca experiment în abordări alternative, vom crea etichetele utilizând gradienți, umbre și transformări CSS (cel mai important), care vor forma punctul fiecărei etichete. După finalizare, vom face chiar și un pas mai departe și vom satisface IE.
Am mai acoperit etichetele înainte de Webdesigntuts +, dar cu această ocazie vom examina o metodă alternativă de a crea toate piesele compuse. Este posibil să existe modalități mai clare de a crea efectul, dar exemplul nostru se va abține de la imagini, de utilizare foarte marcajul curat și un stil neobișnuit. Hai să ne împrăștiem!
Să începem prin a arunca câteva marcări de bază, inclusiv documentul familiar HTML5. De asemenea, ne vom referi la foaia de stil din capul documentului nostru.
În scopul acestui tutorial vom crea un ambalaj / container pentru a ține etichetele noastre. Probabil că veți avea nevoie de ceva similar dacă ar trebui să le utilizați, de exemplu, în bara laterală a blogului.
Pentru a noastră, vom crea pur și simplu un div cu o clasă de înveliș, aplicați o lățime de 340px și o marjă de 50px auto pentru a centra învelișul de pe pagină. Am adăugat 50px în loc de 0 doar pentru a adăuga un pic de margine de top pentru ca etichetele noastre să nu atingă partea de sus a ferestrei browserului. În timp ce aruncăm în acest CSS, vom adăuga un anumit stil pentru corp (cum ar fi o imagine de fundal) și vom aplica o resetare.
html, corp, div, durata, applet, obiect, iframe, H1, H2, H3, H4, H5, H6, p, blockquote, pre, o, abbr, și, adresa, cita, cod, del, DFN, em, img, ins, kbd, q, s, sAMP, mici, grevă, puternic, sub, sup, tt, var, b, u, i, dl, dt, dd, ol, ul, li, FIELDSET, formă, etichetă, legenda, tabel, legendă, TBODY, TFOOT, dinlicitația, tr, th, TD, articol, o parte, panza, detalii, Încorporați, figura, figcaption, subsol, antet, hgroup, meniu, nav, de ieșire, rubin, secțiune, rezumat, timp, marca, audio, video, de intrare, textarea, selectați background: transparent; de frontieră: 0; font-size: 100%; margin: 0; contur: 0; padding: 0; vertical-align: linia de bază articol, o parte , detalii, figcaption, figura, subsol, antet, hgroup, meniu, nav, secțiunea display: block body line-height: 1 blockquote, q citate: nici unul blockquote: înainte, blockquote: după, q: înainte , q: după content: none
corp font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; fundal: url (... /images/bg.jpg) repeta; -webkit-font-smoothing: antialiased; .wrapper max-width: 340px; margine: 50 pixeli automat;
Am structurat aceste etichete foarte simplu; tot ce vom folosi este o etichetă ancoră (o alegere logică, deoarece acestea vor acționa probabil ca linkuri către undeva sau ceva). Pentru acest tutorial i-am dat o clasă de "tag", dar acest lucru poate fi schimbat în ceea ce vă place.
Rezoluție înaltă
Bine, la următoarea parte! Vom face un început pentru a modela eticheta - este destul de bun de cod aici, dar nu vă lăsa să vă deruteze, voi explica ce se întâmplă.
Am adăugat mai întâi câteva lucruri de bază aici;
Apoi am definit câteva setări de font, dimensiune, familie și greutate, urmate de o culoare și de o umbră de text. După aceea, am aplicat unele materiale de umplutură, folosind ems, astfel încât totul să fie dimensionat în raport cu dimensiunea caracterelor corpului sau dimensiunea fontului browserului. Apoi, o simplă graniță, deși nu am aplicat unul în stânga. Ems-urile au apărut din nou! De data aceasta le vom aplica la raza de graniță, dar numai în colțurile din dreapta sus și din dreapta jos. Bine, încă mai ești treaz? Mai sunt ... mai apoi vom folosi gradiente CSS3 (am mers înainte și am folosit aplicația Gradient îngust pentru a calcula valorile). Partea finală este niște umbre în cutie, o umbră de inserție și picătură. Ține minte acele prefixe!
.etichetă float: left; margine: 0 0 7px 20px; Poziția: relativă; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 0.75em; font-weight: bold; text-decoration: none; culoare: # 996633; text-shadow: 0px 1px 0px rgba (255,255,255, .4); umplutură: 0.417m 0.417m 0.417m 0.917em; frontieră: 1px solid # d99d38; frontieră-dreapta: 1px solid # d99d38; frontieră-fund: 1px solid # d99d38; -webkit-border-radius: 0 0.25m 0.25em 0; -moz-limita-raza: 0 0.25em 0.25em 0; raza de raza: 0 0.25em 0.25em 0; fundal-imagine: -webkit-gradient linear (top, rgb (254, 218, 113), rgb (254, 186, 71)); fundal-imagine: -moz-linear-gradient (top, rgb (254, 218, 113), rgb (254, 186, 71)); fundal-imagine: -o-gradient linear (top, rgb (254, 218, 113), rgb (254, 186, 71)); fundal-imagine: -ms-linear-gradient (top, rgb (254, 218, 113), rgb (254, 186, 71)); fundal-imagine: gradient linear (top, rgb (254, 218, 113), rgb (254, 186, 71)); filtru: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# feda71', EndColorStr = "# feba47"); -webkit-box-shadow: inset 0 1px 0 #faeaba, 0 1px 1px rgba (0,0,0, .1); -moz-box-shadow: inserție 0 1px 0 #faeaba, 0 1px 1px rgba (0,0,0, .1); box-shadow: inset 0 1px 0 #faeaba, 0 1px 1px rgba (0,0,0, .1); z-index: 100;
Bine ați terminat partea principală a etichetei, următorul pas este să creați săgeata. Pentru a adăuga acest lucru vom folosi :inainte de pseudo element. De asemenea, vom experimenta și câteva tehnici avansate de la CSS; transformări. Crearea acestor săgeți implică o mulțime de încercări și erori. A trebuit să încerc diferite lățimi și înălțimi, împreună cu poziționarea de sus și de jos pentru ao obține cât mai perfect posibil! Orice feedback este, prin urmare, foarte binevenit ...
Am folosit același gradient de fundal ca și anterior, dar cu o schimbare minoră: pentru că vom roti pătratul pe care urmează să-l facem, va trebui să rotim și gradientul pentru a se potrivi cu partea principală a etichetă. Aplicația Gradient a fost utilă pentru a mă lăsa să schimbe direcția gradientului. Următoarea parte este crearea unor granițe, în partea stângă și în partea de jos. Tot ce a mai rămas cu privire la săgeată este să adăugăm o rază de margine pentru a elimina punctul și pentru a aplica în cele din urmă transformările noastre. Vom roti pătratul pe care l-am făcut la 45 de grade, așa că arată ca o săgeată. Am folosit-o transforma: 45; împreună cu cele prefixate.
.etichetă: înainte de content: "; lățime: 1.30em; înălțime: 1.358m; fundal-imagine: -webkit-linear-gradient (259, 218, 113) rgb (254,186,71) ; fundal-imagine: -moz-linear-gradient (stânga sus, rgb (254, 218, 113), rgb (254, 186, 71) 254, 218, 113), rgb (254, 186, 71)), imagine-fundal: -ms-gradient liniar (stânga sus, rgb (254, 218, 113); Imagine de fundal: gradient liniar (stânga sus, rgb (254, 218, 113), rgb (254, 186, 71)), filtru: progid: DXImageTransform.Microsoft.gradient (GradientType = 1, StartColorStr = '# feda71' , EndColorStr = "# feba47"); poziția: absolută; stânga: -0.69em; top: .2em; -webkit-transform: rotate (45deg); -moz-transform: rotate (45deg); (45deg), transformare: rotire (45deg), margine stanga: 1px solid #d99d38; margine de fund: 1px solid # d99d38; -webkit-border-radius: 0 0 0 0.25em; -moz-border-radius: 0 0 0 0,25 semimetric; raza de graniță: 0 0 0 0,25em; z-index: 1;
Ar trebui să aveți acum ceva similar cu următorul; Notă Am mărite imaginea, astfel încât să puteți vedea unde se conectează săgeata la partea principală, aceasta este abia vizibilă atunci când este vizionată la dimensiunea normală.
Ultima parte pentru a completa eticheta noastră este de a crea gaura mică pe ea. Aici vom folosi din nou un pseudo, dar de data aceasta, :după element. Ceea ce am făcut pentru a crea gaura este destul de simplu. Am definit o lățime și o înălțime în ems, astfel încât să crească fără probleme. Apoi am adăugat o rază de graniță mare, care va crea un cerc cu o margine pentru ao schița. După aceasta, am adăugat o umbră care se potrivește cu umbra textului. În cele din urmă l-am poziționat (în timp ce folosiți ems).
.tag: după content: "; lățime: 0.5em; înălțime: 0.5em; fundal: #fff; -webkit-border-radius: 4.167m; -moz-border-radius: 4.167em; : 1px 0px 0px 0px 0px 0px 0px 0px 0px 0px 0px 0px 0px 0px 0px 0px 0px 0px 0px 0px; em; stânga: -0.083em; z-index: 9999;
Pentru a face ca etichetele noastre să fie chiar mai minunate, vom adăuga câteva stiluri de hover. Va trebui să adăugăm acest lucru la partea principală a etichetei și a săgeții (în timp ce amintim să rotiți gradientul pentru săgeată). De asemenea, am schimbat culoarea frontală în ambele.
.etichetă: hover background-image: -webkit-gradient linear (sus, rgb (254, 225, 141), rgb (254, 200, 108)); fundal-imagine: -moz-linear-gradient (top, rgb (254, 225, 141), rgb (254, 200, 108)); fundal-imagine: -o-gradient linear (top, rgb (254, 225, 141), rgb (254, 200, 108)); fundal-imagine: -ms-linear-gradient (top, rgb (254, 225, 141), rgb (254, 200, 108)); fundal-imagine: gradient linear (top, rgb (254, 225, 141), rgb (254, 200, 108)); filtru: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# fee18d', EndColorStr = "# fec86c"); border-color: # e1b160; .tag: hover: înainte de background-image: -webkit-linear-gradient (stânga sus, rgb (254, 225, 141), rgb (254, 200, 108)); fundal-imagine: -moz-linear-gradient (stânga sus, rgb (254, 225, 141), rgb (254, 200, 108)); fundal-imagine: -o-linear-gradient (stânga sus, rgb (254, 225, 141), rgb (254, 200, 108)); fundal-imagine: -ms-gradient linear (stânga sus, rgb (254, 225, 141), rgb (254, 200, 108)); fundal-imagine: gradient linear (stânga sus, rgb (254, 225, 141), rgb (254, 200, 108)); filtru: progid: DXImageTransform.Microsoft.gradient (GradientType = 1, StartColorStr = '# fee18d', EndColorStr = "# fec86c"); border-color: # e1b160;
Dacă totuși doriți să afișați etichetele în glorie pentru utilizatorii IE, va trebui să urmați o altă abordare față de aceste etichete, începând prin crearea unei foi de stil specifice IE. Voi explica de ce ... În primul rând, multe dintre efectele noastre CSS3 nu vor funcționa în versiuni mai devreme decât IE9 (doar câteva lucrări în IE9 așa cum este), dar principala problemă aici este transformările care nu vor funcționa. Pentru a răspunde utilizatorilor IE, vom modifica codul nostru puțin. Vom începe prin a schimba mai întâi codul HTML, înlocuindu-l învelitoare div și tot ce se află în interiorul lui cu:
Rezoluție înaltă
Vom folosi din nou o etichetă de ancorare, dar cu 3 spații înăuntru; vom avea nevoie de unul pentru a crea săgeata, partea principală și sfârșitul care are raza de graniță.
Pentru a ne asigura că etichetele noastre vor funcționa în IE, va trebui să folosim imagini. Începeți prin a șterge totul sub stilurile .wrapper, tot ce etichetat! Veți avea nevoie să inserați acum în fragmentul următor. Pur și simplu aplicăm câteva imagini de fundal aici, dar și repetarea fundalului de text pe axa x, deoarece textul ar putea fi orice lungime! Chiar Supercalafragalisticexpialadoshus!
.săgeată lățime: 15px; înălțime: 25px; plutește la stânga; fundal: url (... /images/arrow.png) no-repeat; .text height: 25px; plutește la stânga; padding-left: 4px; padding-dreapta: 4px; fundal: url (... /images/text.png) repeat-x; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 0.75em; font-weight: bold; culoare: # 996633; text-shadow: 0px 1px 0px rgba (255,255,255, .4); line-height: 23px; .end lățime: 4px; înălțime: 25px; plutește la stânga; fundal: url (... /images/end.png) nu-repeta; .tag: hover .arrow background-image: url (... /images/arrow_hover.png); .tag: hover .text background-image: url (... /images/text_hover.png); .tag: hover .end background-image: url (... /images/end_hover.png);
Ei bine, asta e! Acesta este un alt tutorial complet și arată bine! Am luat aceste etichete tagtastic și le-am creat cu CSS în timp ce servim IE în același timp. Aceste etichete pot fi folosite pentru tot felul de lucruri - mergeți mai departe și le folosiți într-o bară laterală, în blog, orice doriți!
Sper că ți-a plăcut acest tutorial, mulțumesc pentru lectură.
Accentsconagua