Crearea etichetelor utilizând css

Când am început să creeze o etichetă simplu, părea destul de frumos, dar nu a fost de ajuns avem nevoie de opțiuni de personalizare. După cum puteți vedea, pentru a crea un triunghi, aveți nevoie pentru a utiliza limitele de proprietate, care nu funcționează gradienti de proprietate. Așa că am decis să blocheze proprietatea umbra pentru a crea pseudogradient, care cel puțin a făcut posibilă pentru a adăuga aspectul adâncimii sau selectați un setări mai flexibile etichete.

Să ne uităm la prima versiune a etichetei. Codul HTML a fost simplu și a inclus doar link-ul:

Am folosit pseudo-elementele CSS: înainte și: după, pentru a adăuga o săgeată și un mic cerc de etichetă:

Și apoi vom rula într-o problemă. Nu am putut folosi proprietatea bloc de umbre, așa cum am hotărât mai înainte. Din moment ce ne-am întrebat direcția de poziționare absolută și se plasează în afara blocului. Așa că aplicarea proprietăților de umbră bloc umbra ar fi în jurul valorii de text și un cerc, mai degrabă decât o săgeată, așa cum ne-am dori. Proprietățile de aplicare ale blocului umbră la frontieră proprietate este imposibil.

Se pare ca această etichetă:

E drăguț, dar nu este ceva ce ne-am dorit să creeze. Așa că am decis să încercăm să facem lucrurile în mod diferit.

A doua încercare

A doua oară am folosit alt mod. Am adăugat padding lângă textul și săgețile în loc să-l creat înapoi o parte, pentru a face să arate ca o săgeată. După aceea l-am plasat lângă eticheta, și a întrebat-o proprietate pointer-evenimente: none;, era imposibil să faceți clic pe o etichetă din afara, care ar putea fi realizat în primul exemplu de realizare.

Singura problemă cu această opțiune - a trebuit să adăugați un bloc tag interval și link-ul, pe care o avem pe etichetă, așa că am avut săgeata, și setați manual culoarea de fundal pentru a-l. La toate acestea se închide unitatea de umbra, deci se pare decupată. Ne-a plăcut acest sens, așa că am adăugat animație pentru a face să arate ca și în cazul în care eticheta, deoarece aluneca de pe scaun. Acest efect poate fi oprit dacă se dorește, cu tranziție eliminarea linia de proprietate.

cod CSS a devenit mai complicat, dar a rămas clar:

Am adăugat efecte atunci când treceți cursorul mouse-ului la umbra, dar codul HTML nu sa schimbat mult:

Notă tag-ul interval suplimentar, care este necesar pentru a crea săgeată.

După aceea, am primit următoarele:

La fel cum avem capacitatea de a schimba cu ușurință culoarea de fundal, prin simpla adăugare de o altă clasă în codul CSS și apoi adăugarea acestei clase după etichetă de clasă, de exemplu, adăugarea de cod HTML. și în codul CSS:

Pe pagina cu o demonstrație a lucrării, puteți vedea etichetele de culori diferite.

Dacă aveți mai multe rânduri cu etichete, trebuie să adăugați un padding extern, de exemplu, margin-bottom: 20px; în codul CSS la sfârșitul .tag de clasă, în caz contrar suprapus psevdotreugolnik pe o etichetă pe linia următoare.