Bună ziua, dragi prieteni.
Vreau să vă împărtășesc informații despre două pseudo-elemente pe care puțini oameni le folosesc, pur și simplu pentru că nu au auzit de ele. Aceste pseudo-elemente facilitează foarte mult structura, în special proiectele destul de complexe, cu un număr foarte mare de piese mici, cum ar fi săgeți, cercuri, linii diferite deasupra elementelor și sub ele și așa mai departe.
Și deci, să luăm un exemplu real. Trebuie să creăm acest bloc simplu:
După cum vedem, avem un container obișnuit cu text, iar pe stânga este un triunghi. Cine nu a lucrat cu pseudoelementele înainte și după. cel mai probabil ar fi început să facă acest triunghi o imagine. Dar totul este mult mai ușor decât crezi.
Cu HTML, sper că nu există întrebări. Să spargem unele CSS. Mai întâi, atribuiți lățimea și înălțimea elementului, apoi vopsiți fundalul în alb, aliniați elementul în centru orizontal și faceți o mică indentare de sus și de jos. De asemenea, facem o indentare interioară de 20 de pixeli, rotunjim marginile elementului și expunem poziționarea relativă. Datorită poziționării relative a elementului, putem crea cu ușurință triunghiul nostru.
Acum du-te la desert. Înainte și după permiteți inserarea oricărui conținut înainte / după conținutul oricărui element. Faceți acest lucru: adăugați aceste stiluri după stilurile elementului cu clasa .container
În proprietatea conținutului: "; scrieți orice text pe care doriți să îl afișați înainte / după element. Aceasta este o caracteristică a acestor pseudo-elemente, fără această proprietate pe care nu o veți reuși.
Deci, cum faceți un triunghi? Pot introduce o imagine în proprietatea conținutului? Nu, nu poți. Pentru a nu te deranja, iată CSS-ul gata pentru a crea un astfel de triunghi, să-l analizăm.
Să facem triunghiul în partea dreaptă sus. Pentru aceasta, scrieți următorul cod:
De exemplu, de sus și în centru:
Asta este, este foarte simplu. Putem de asemenea face două triunghiuri, pentru că avem două pseudo-elemente.
Apropo, dacă aveți nevoie doar de un triunghi, atunci nu contează dacă folosiți înainte sau după. Este o chestiune de gust. De exemplu, îmi place să folosesc după.
Și să ne uităm la un exemplu mai simplu. De exemplu, trebuie să facem această bandă deasupra sau dedesubtul elementului.
Sarcina pare să fie simplă, dar fără să fie înainte și după aceea este destul de neplăcută.
Totul este rezolvat pur și simplu.
Din nou, conținutul este gol. Creați un element cu o lățime de 130 de pixeli și 4 pixeli în înălțime. Vopsea în roșu, facem blocul de elemente și aliniem în centru. Aici am făcut-o fără poziționare.
Asta e, sper că totul a fost clar și nivelul tău de aspect a crescut cu câteva procente. Ai o zi frumoasă.
Articole similare
Trimiteți-le prietenilor: