Jakiś czas temu odwiedziłam stronę, której autor umieściła swoje portfolio w postaci sześciokątów (hexagonu) czyli kilku sześciokątów. Zrobiło to na mnie dość spore wrażenie jednak znalezienie rozwiązania zajeło mnie chwilę.
Być może brakowało tak zwanego słowa klucza, którym okazał się „grid”. Dlatego jako kolejny tutorial postaram się przedstawić jak uzyskać podobny efekt.
Na początek musimy stworzyć coś w rodzaju menu:
See the Pen
hexagons by Aura (@Julka85)
on CodePen.0
Trochę tłumaczenia:
W naszym menu posiadamy dwie grupy odd i even. Pełnią one uzupełniające się funkcje tak by nie powstawały przerwy pomiędzy liniami.
- ol.odd
- ol.even
Jeśli chcecie usunąć zaokrąglenia rogów wystarczy usunąć linijkę:
border-radius: 1em/.5em;W celu zbliżenia ich do siebie zmieniamy
margin-right: 4.61538em;na
margin-right: 4.0em;Jak widać efekt jest dość ciekawy teraz wystarczy dodać jedynie obrazki.
Źródło: http://codepen.io/elbarto84/pen/wrcob
W branży IT jestem już od 2007 roku. W tym czasie zajmowałam się głównie tematyką pozycjonowania i budowy stron internetowych. Hobbistycznie zajmuje się fotografią, podróżami (głównie tymi mikro). Interesuje się mitologią (Nordycką, Grecką i Rzymską) i historią.