Cum să creați un sistem simplu de insigne CSS [closed] (Programare, Css, Badge)

Mokky Miah a intrebat.

Am nevoie de un sistem simplu de insigne care poate fi aplicat la numeroase tipuri de elemente html.

Ceva de genul celor pe care le găsești pe o aplicație de mesagerie de pe telefonul mobil.

Ceva de genul acesta;

Comentarii

  • Stai… ai creat o întrebare doar de dragul de a răspunde la ea? –  > Por Terry.
  • Nu am putut găsi o soluție simplă când am căutat eu însumi soluția. După ce am găsit o soluție, m-am gândit că merită să o împărtășesc în cazul în care altcineva caută ceva de genul acesta. De asemenea, sper că alții pot îmbunătăți răspunsul/soluția mea 🙂 –  > Por Mokky Miah.
  • Serios? Ce zici de această întrebare, aceasta, aceasta, aceasta și aceasta? Există o tonă de duplicate acolo. –  > Por Terry.
  • @Terry, Ar fi frumos ca această întrebare să fie marcată ca fiind duplicat în loc de off-topic. De fapt, îmi place acest răspuns, dar aparține unei alte întrebări în loc de această nouă întrebare. Presupun că întrebarea trebuie să fie editată pentru a fi trecută de la off-topic la duplicat? –  > Por KCE.
1 răspunsuri
Mokky Miah

Răspund la propria mea întrebare în beneficiul celorlalți.

Recent am creat un sistem de insigne folosind css care poate fi aplicat la orice element html.

Sper că acest lucru ajută pe oricine altcineva care caută ceva de genul acesta.

Acest lucru se face folosind css pseudo element fiind aplicat după elementul gazdă. O insignă poate fi aplicată oricărui element prin simpla adăugare a unui element badge atribut cu o valoare.

Este posibil ca unele elemente gazdă să necesite adăugarea de suprascrieri în cazul în care poziția/style-ul implicit al insignei nu este potrivit.

Site-ul content al pseudoelementului este moștenit de la atributul badge.

În cazul în care nu există nicio valoare, o valoare de 0 sau o valoare negative valoare, insigna nu se va afișa în mod implicit. În cazul în care trebuie să afișați insigna cu 0 sau o valoare negative valoare, utilizați css override sau eliminați regulile din fișierul css.

Exemplu de suprascriere;

.my-unusual-element[badge="0"]:after {
    display: initial;
}

Aceasta este o soluție bazată exclusiv pe CSS și este menită să fie un sistem de insigne ușor.

Am postat aici un fiddle pentru demonstrație.

Comentarii

  • Dacă utilizați badge ca atribut de date, nu ar trebui să folosiți data-badge ? –  > Por Mario F.
  • Presupun că pentru o bună practică da, dar funcționează indiferent de data prefix. –  > Por Mokky Miah.
  • da, am vrut să spun doar ca un fel de „bună practică”. Soluția este foarte îngrijită, indiferent. bună treabă! –  > Por Mario F.

Tags:,