Skálázható rács hatszög - verem túlcsordulás az orosz
Már letölthető az internetről több kép az oldalamon. Lehetséges, hogy ezeket a képeket hatszögű reagáló rács.
Találtam néhány módja, hogy ezt, de azt kell, hogy teljes a kép src a CSS kódot. Ez nem nekem való, mert a helyén tölti véletlenszerű képeket az internetről a jQuery. így nem tudom használni őket, mint háttérképeket.
Megyek, hogy támogassa WebKit böngésző, a Firefox, IE8 jó lenne, de nem szükséges - és a mobil böngészők
Ezt a módszert használja:
címke
- rendezetlen lista: minden hatszög tartalmazza a címke
- és tag
- Használata átalakítja forgatás, és ronthatják. hogy egy hexagonális
- overflow: hidden;
leányvállalatok nth-gyermek () elemek vannak kitöltve, mint minta hexaéder
És, hogy hozzon létre egy hexa rács tag .
Jellemzők hatszögletű rács:
A rács fog reagálni, ahogy támaszkodik a változás százalékos szélességét. Hatszögek megőrizze képarány összhangban vételét padding-bottom technika és a kép átméretezett, hogy illeszkedjen az alakja egy hatszög.
lebeg hatást a hatszög: szöveg csúszik egy átlátszó overlay a képre.
A teljes kód
A következő kódrészlet nem a legújabb verzióját a rács. GitHub repo fennáll a mai napig. Kérdések és járulékok lehet ott.
Számának megváltoztatása hatszög egy sorban
Ha nem szeretné, médialekérdezés. de csak azt kell megváltoztatni a számot a hatszög egy sorban, akkor mentse a megfelelő CSS médialekérdezések, majd törölje a szükségtelen is.
A listát az összes demók, nézd meg ezt a gyűjteményt codepen: Érzékeny rácsok hatszög különböző számú hatszög egy sorban, valamint központosítását és a további lehetőségeket.
Itt van az eredeti codepen demo .pusher eleme, hogy a rossz rács hatszög. toló elem létrehozásához használt „lyukak” a rács üres hatszög.