Share
Etichetele sunt o caracteristică familiară a multor servicii Web 2.0, site-uri web și în special bloguri. În timpul acestui tutorial vom folosi CSS3 pentru a crea etichete asemănătoare biletului, fără a se baza pe nici o imagine.
Iată o defalcare rapidă a procesului:
Să începem prin adăugarea mai întâi a marcajului în interiorul cap din documentul nostru. Am adăugat două foi de stil: "tut.css" și "tickets.css"; Puteți elimina fostul ori de câte ori doriți să implementați propria dvs. lucrare, dar o vom folosi în demo. Foaia de stil "tickets.css" conține toate stilurile care vor forma sfaturile noastre. Iată marcajele capului de document:
Pure CSS3 Ticket-like Tag-uri
Acum trebuie să adăugăm marcajul pentru etichete. Am folosit o divizie pentru fiecare etichetă cu atributul de clasă bilet pe care o vom folosi pentru a modela etichetele. Apoi avem un interval cu atributul de clasă cerc. În cele din urmă, veți vedea un link cu text pentru etichete. Iată marcajele de etichete (am adăugat patru etichete ca eșantion, dar puteți adăuga câte doriți):
CSS3HTML5ProiectaDezvoltare
Să începem prin modelarea etichetelor principale div (.bilet). Aici setăm stilurile de fonturi, setăm poziția la rudă astfel încât să putem poziționa elementele absolute în interiorul lui (observați-o !important pentru că fără aceasta nu putem obține rezultatele dorite), culoarea de fundal, plutitoare la stânga pe care le puteți seta și la dreapta, apoi în cele din urmă unele padding și margini pentru spațiere.
.bilet font-family: Arial; font-size: 12px; font-weight: bold; poziția: relativă! importantă; fundal: # 8dc63f; plutește la stânga; padding: 7px 3px; margine: 0 5px 5px 0;
Etichetele noastre ar trebui să arate așa.
Acum am stilul celor două colțuri de sus pentru a face să pară un sfert de cerc. Pentru a crea acest lucru vom folosi pseudo elemente după și inainte de. Ambele pseudo elemente au acelasi stil, singura diferenta fiind aceea după este poziționat la stânga în timp ce inainte de este poziționat corect.
Începeți prin a seta valoarea conținutului la nimic, poziția absolut, z-index la 100 sau orice valoare pozitivă mare, își stabilește poziția de sus, stânga sau dreapta și zero. Setați stilul din partea de jos a frontierei și stânga sau dreapta, apoi în final stabilim raza de frontieră 20px (colțul din dreapta jos pentru după și din stânga jos pentru inainte de.
Pentru a afla mai multe despre crearea de forme utilizând stilurile de granițe CSS, puteți vedea acest lucru
ghid.
.bilet: după conținut: ""; poziție: absolut! important; z-index: 100; top: 0; stânga: 0; frontieră-dreapta: #fff 7px solid; border-bottom: #fff 7px solid; -moz-border-radius: 0 0 20px 0; -webkit-border-radius: 0 0 20px 0; raza de graniță: 0 0 20px 0; .ticket: înainte de content: ""; poziție: absolut! important; z-index: 100; top: 0; dreapta: 0; frontieră-stânga: #fff 7px solid; border-bottom: #fff 7px solid; -moz-border-radius: 0 0 0 20px; -webkit-border-radius: 0 0 0 20px; raza de graniță: 0 0 0 20px;
Etichetele noastre ar trebui să arate așa.
În interiorul legăturilor putem crea acum efectul de cusătură prin utilizarea de frontiere și contururi. Formăm legăturile cu sparge 1px contur cu culoarea alb transparentă de 40%, setați margini cu culoarea neagră transparentă de 30%, umplutură pentru a face coaserea mai realistă pe margini, fără decorarea textului, setarea culorii textului la 50% alb transparent (astfel încât să nu avem pentru a modifica culoarea textului de fiecare dată când modificăm culoarea de fundal a etichetelor) și setați spațiul alb la nowrap. În cele din urmă, am setat culoarea textului de stat de tip hover la 50% negru transparent.
.biletul outline: 1px rgba (255,255,255,0,4) întrerupt; frontieră: 1px rgba (0,0,0,0,3) întreruptă; umplutura: 4px 10px 4px 20px; text-decoration: nici unul; culoare: rgba (255,255,255,0,5); spațiu alb: acum; . a a a: hover culoare: rgba (0,0,0,0,5);
Etichetele noastre ar trebui să arate acum. Observați că ambele colțuri de decupare se află pe partea superioară a cusăturii.
Pentru colturile din partea de jos vom folosi si pseudo elemente după și inainte de dar de data aceasta în legătură. Stilul acestor două colțuri este în mod evident similar cu colțurile de sus, doar schimbăm poziția și marginea pentru a se potrivi cu poziția lor.
.bilet a: după conținut: ""; poziție: absolut! important; z-index: 100; fund: 0; stânga: 0; frontieră-dreapta: #fff 7px solid; frontieră: #fff 7px solid; -moz-border-radius: 0 20px 0 0; -webkit-border-radius: 0 20px 0 0; raza de graniță: 0 20px 0 0; . a. a: înainte de content: ""; poziție: absolut! important; z-index: 1000; fund: 0; dreapta: 0; frontieră-stânga: #fff 7px solid; frontieră: #fff 7px solid; -moz-border-radius: 20px 0 0 0; -webkit-border-radius: 20px 0 0 0; raza de graniță: 20px 0 0 0;
Etichetele noastre ar trebui să arate așa.
În marcajul HTML am adăugat deja un element de spațiu gol cu numele clasei cerc și este folosit în principal pentru a crea efectul gaură perforată. Vom folosi din nou marginile și raza de graniță pentru a crea cercuri cu valori zero înălțime și lățime. Vom stabili poziția lor absolut, z-index la un număr pozitiv mare, 50% din partea de sus, 8px din stânga cu o umbră cutie pentru a face să pară mai realistă și, în final, o margine de top -5px pentru al alinia perfect la centru.
.bilet .circle poziție: absolut! important; z-index: 100; margine: 5px #fff solid; -moz-border-radius: 10px; -webkit-border-radius: 10px; raza de graniță: 10 pixeli; margin-top: -5px; lățime: 0; înălțime: 0; top: 50%; stânga: 8px; -moz-box-shadow: 0 -1px 0 rgba (0,0,0,0,5), 0 1px 0 rgba (255,255,255,0,3); -webkit-box-shadow: 0 -1px 0 rgba (0,0,0,0,5), 0 1px 0 rgba (255,255,255,0,3); box-shadow: 0 -1px 0 rgba (0,0,0,0,5), 0 1px 0 rgba (255,255,255,0,3);
Etichetele noastre ar trebui să pară complete!
Abordarea mea pentru crearea acestor bilete are o problemă. Cele patru colțuri și gaura perforată nu schimbă culoarea dacă culoarea de fundal este modificată. Cu alte cuvinte, ele nu sunt transparente și trebuie să le schimbați culoarea de fiecare dată când schimbați culoarea de fundal.
În ceea ce privește compatibilitatea browser-ului, acest lucru a fost testat pentru a funcționa Firefox 4.5+, Chrome 13, Opera 11 și IE9.
Rezultatul final ar trebui să arate ca imaginea de mai sus. Pentru ca rezultatul final să arate exact ca demo-ul nostru, ar trebui să folosiți stilurile din interiorul "tut.css", dar nu ezitați să adăugați propriile ajustări.
Sper că ați învățat toate tehnicile din acest tutorial CSS! Împărtășește-ți gândurile de mai jos :)
Accentsconagua