Buna ziua. Astăzi, vom examina cum să facem o încrucișare pe CSS pură, adică să tragem o pictogramă aproape / ștergere fără imagini.
Ei bine, pentru cei care încă mai doresc să deseneze pictograma aproape fără imagini de mila, vă rugăm să continuați.
Se apropie aproape de CSS pur
Mai întâi, vom da seama că crucea trebuie să fie descrisă în codul HTML. Aceasta este, trebuie să fie un fel de div sau span. Și vom face:
Efectuat. Acest cod trebuie introdus în locul în care trebuie afișată crucea.
Acum continuați să desenați crucea însăși. După cum puteți vedea din titlul articolului, vom face acest lucru pe CSS pur, fără a folosi imagini sau fonturi iconice.
În mod prestabilit, crucea va fi translucidă, iar când se va termina, va deveni mai strălucitoare. La discretia ta, poti face un efect alternativ atunci cand plutesti.
Deci, să ne uităm la codul CSS:
După cum puteți vedea, totul este destul de prosaic. Pentru a trage o cruce, se folosesc două linii drepte, una este executată de un pseudo-element: după ce celălalt este: înainte. În acest caz, unul este rotit cu 45 °, celălalt cu -45 °. E simplu.
În ceea ce privește compatibilitatea cu browserele, acesta poate fi ușor verificat folosind caniuse, în funcție de acesta: după. înainte de a sprijini toate browserele moderne, transformați - totul, cu excepția Opera mini, care, strict vorbind, este un bun indicator.
Dacă este necesar, puteți adăuga gadget-uri diferite la această cruce pentru a vă asigura.
Pentru a vedea cum funcționează aceasta:
- Rotiți textul CSS. doar
- Ștergeți pictograma de curățare IE
- Cum să remediați orientarea unui site într-un browser mobil
Articole similare
-
Cum de a închide un program spânzurat în ferestre sau mac os
-
Ce ar trebui să port o cruce - cea care a fost pusă la botez sau purtând biblia voastră de rezervă
Trimiteți-le prietenilor: