Am încărcat mai multe imagini de pe Internet pe site-ul meu. Este posibil ca toate aceste imagini să aibă o formă hexagonală în grila receptivă.
Am găsit mai multe moduri de a face acest lucru, dar trebuie să umplem imaginea src în codul CSS. Acest lucru nu mi se potrivește, deoarece site-ul încarcă imagini aleatorii de pe Internet cu jQuery. așa că nu le pot folosi ca imagini de fundal.
Voi susține browserele WebKit, Firefox, IE8 ar fi frumos, dar nu este necesar - și browserele mobile
Această metodă utilizează:
etichetă
- Lista neordonată: fiecare hexagon este inclus în etichetă
- și eticheta
- Folosind rotirea și înclinarea transformării. pentru a face forme hexaedrice
- overflow: ascuns;
copiii lui nth-child () umple hexaedronul ca model
Și totuși, pentru a crea o grilă hexagonală cu o etichetă .
Caracteristicile ochiurilor hexagonale:
Grila va răspunde, așa cum ar trebui, la o modificare procentuală în lățime. Hexagoanele își mențin proporția de aspect în conformitate cu tehnica fundului de umplutură și imaginile modifică dimensiunea pentru a se potrivi formei hexagonului.
efect de hover asupra hexagonilor: textul alunecă cu o acoperire transparentă peste imagine.
Codul complet
Următorul fragment de cod nu este ultima versiune a grila. Reputația GitHub persistă și astăzi. Întrebările și contribuțiile pot fi făcute acolo.
Schimbarea numărului de hexagoane într-un rând
Dacă nu aveți nevoie de interogări media. dar doriți doar să modificați numărul de hexagoane pe linie, atunci puteți salva CSS din interogările media corespunzătoare și apoi eliminați cele inutile.
Pentru o listă a tuturor demo-urilor, consultați această colecție pe codepen: Rețele responsabile de hexagoane cu un număr diferit de hexagoane în fiecare rând, precum și opțiuni de centrare și multe altele.
Aici este demo codul original cu un element .pusher pentru a face grila greșită a hexagonilor. Elementul de împingere este folosit pentru a crea "găuri" într-o rețea cu hexagonale goale.