Grilă hexagonală scalabilă - suprapunere în rusă

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

Grilă hexagonală scalabilă - suprapunere în rusă

Această metodă utilizează:

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.

  • Fiecare hexagon își păstrează marginea: efectul de hover (sau evenimentul de clic) pentru fiecare hexagon este declanșat numai în forma reală.

    • 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.







    Articole similare

    Pagina anterioară

    Pagina următoare

    Trimiteți-le prietenilor: