Diferite jetoane și trucuri folosind CSS au atras și mi-au atras atenția. Printre acestea este modul de a rotunji colțurile blocului fără a utiliza orice grafică.
Mi-a plăcut foarte mult această abordare, dar singurul lucru care ma împiedicat să-l aplic este că aceste colțuri nu arată neted (da, sunt așa de fastidios :). Și asta nu mi-a fost de ajuns, așa că am decis să merg până la final, finalizând opțiunea existentă.
Deci, sarcina mea a fost să pun în aplicare cu CSS acest tip de cadru, absolut fără imagini:
Imaginea mărită a unghiului este după cum urmează:
Am făcut o versiune absolut identică folosind CSS. Pe baza opțiunii propuse anterior. Pentru a adăuga pixeli adiționali care să ducă la netezirea colțurilor, am folosit mai multe etichete imbricate. fiecare dintre acestea constând dintr-o literă (b .i q). Acest lucru vă permite să optimizați codul HTML. HTML
CSS este grozav!
Sa dovedit a fi un design destul de urât, care "deranjează" perversiunea, dar eu personal sunt dispus să sacrific acest lucru pentru dragul oportunității de a face fără grafică. Dacă comparăm mărimea codului HTML cu versiunea "nestemotată", atunci diferența nu este atât de mare.
Pentru o comparație a celor trei opțiuni, vedeți exemple de rezolvare a problemei de rotunjire: utilizarea imaginilor, rotunjirea simplă folosind CSS și o rotunjare netedă.
Ceea ce avem ca rezultat:
- valid CSS și HTML;
- compatibilitatea browser-ului încrucișat cu codul;
- colțurile sunt rotunjite fără utilizarea graficii;
- unghiurile se slefuiesc.
Din minusurile acestui model este de remarcat numai aspectul non-semantic și dimensiunea codului, care, IMHO, nu este atât de semnificativă.
informații
Articole similare
Trimiteți-le prietenilor: