Bez kategorii

Sześciokąty rozmieszczone obok siebie CSS

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 zajęł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.

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

Sześciokąty rozmieszczone obok siebie CSS
aurelia

Recent Posts

Mity o marce osobistej, które warto znać

Jak w przypadku wielu różnych tematów tak i w przypadku marki osobistej pojawiło się przez…

1 tydzień ago

Jakie zawody zastąpi AI? Czy mamy się czego bać?

Choć zabrzmi to może nieco dziwnie to wprowadzenie AI (sztucznej inteligencji) do naszego życia było…

2 tygodnie ago

Widmo Brockenu – co to jest?

Widmo Brockenu to dość rzadko spotykane zjawisko optyczne, najczęściej widywane w wysokich partiach gór. Można…

2 miesiące ago

Relikwie: jak zdobywano, sprzedawano i podrabiano święte przedmioty

Zacznę może od tego, że relikwia, relikwii nie równa. Wiem jeśli nie ma się pojęcia…

2 miesiące ago

Poznaj 6 powodów, dla których warto posiadać logo

Logo stanowi jeden z ważniejszych elementów tożsamości wizualnej praktycznie każdej firmy, marki czy projektu. Logo…

2 miesiące ago

Dlaczego firmy mylą markę osobistą z firmową

Budując własną markę osobistą lub chcąc ją zbudować trzeba liczyć się z wieloma wyzwaniami. Jednym…

2 miesiące ago