Crearea de elemente vizuale fără imagini nu este doar o idee bună, ci devine rapid o necesitate. Cu popularitatea ecranelor "retina" și altele asemănătoare, imaginile raster nu mai sunt folosite în interfață, deoarece par a fi oribile la ecrane cu rezoluție ridicată. În unele situații fără imagini este dificil de făcut și SVG (grafice vectoriale scalabile) devine rapid formatele principale în astfel de cazuri. Cu toate acestea, în cazul în care putem evita utilizarea imaginilor ca atare, nu numai că obținem un element frumos și bine definit, dar evităm, de asemenea, interogarea inutilă a serverului. Hai să ne ocupăm de ei.
Avertisment: dacă sunteți nou în CSS, vă recomandăm să vă familiarizați cu următoarele subiecte, înainte de a repeta ceea ce este descris mai jos:
Pseudo-elementele CSS (în special: înainte și după)
Elemente CSS3, cum ar fi umbra în cutie și dimensiunea în cutie
Curs practic pe aterizare adaptivă de la zero!
Aflați de la zero pentru a adapta aterizările adaptive la HTML5 și CSS3 în următoarele 6 zile
Poziția absolută și relativă a div
Acesta este aspectul marcajului.
Toate clare? Să trecem la CSS.
În primul rând, folosim selectorul universal pentru a reseta stilurile și a adăuga o dimensiune în cutie: caseta de margine la pagina noastră. Acest lucru vă va permite să specificați atât margini exterioare, cât și interioare (margine, umplutură) și lățime și nu efectuați calcule pentru redimensionarea elementelor.
Apoi adăugăm stiluri vizuale, elementului care conține banda și banda în sine. Din nou, nimic complicat.
Lucrurile importante de urmărit sunt cele care se aplică pseudo-elementelor: înainte și după. Acestea sunt tehnicile care ne ajută să evităm utilizarea imaginilor în banda noastră. Și asta e tot. Ribbon banner pe CSS pur și fără imagini.
Ediție: Comanda webformself.
Curs practic pe aterizare adaptivă de la zero!
Aflați de la zero pentru a adapta aterizările adaptive la HTML5 și CSS3 în următoarele 6 zile
Cele mai recente știri despre dezvoltarea IT și web pe canalul nostru de telegrame
Practicați HTML5 și CSS3 de la zero la rezultatul!
Trimiteți-le prietenilor: