Kształty w CSS – kwadrat, kółko, obręcz… gąsienica i ciasteczko?

ostatnia aktualizacja: 22 kwietnia 2018
utworzono: 21 kwietnia 2018
ksztalty CSS

Wielkanocny wpis o tworzeniu pisanek w CSSie bardzo wam się spodobał. Na facebooku zebrał sporo komentarzy, dostałam też sporo przykładów waszych prac. Padały też pytania o więcej takich tutoriali, jednak żeby je wprowadzić warto chociaż chwilę poświęcić temu jak tworzyć kształty CSS od zupełnych podstaw.

Przypuszczam, że czytając tego posta słyszeliście już o HTML i CSS. Prawdopodobnie macie podstawy, a jeśli jeszcze nie macie podstaw tych dwóch języków, to w planujecie je w najbliższym czasie poznać.
Zrobienie kwadratu raczej nie powinno nikomu sprawić problemu. Kółko? Właściwość border-radius znana z poprzedniego posta powinna wystarczyć. Obręcz – może wymagać odrobiny główkowania, ale mniej więcej wiemy jak z koła wyciąć koło. Zobaczcie na co jeszcze pozwala CSS.

Jak wykorzystać kształty CSS krok po kroku

Jeśli dobrze poznacie podstawy, to stworzenie dowolnego obrazka z kształtów nie będzie dla was problemem.

Kwadrat

See the Pen simple square by Malgorzata Rita (@ritawanderlust) on CodePen.

HTML:
<div class=”square”></div>
CSS:

.square {
  width:200px;
  height: 200px;
  background-color: #b497c7;
}

Koło

See the Pen simple circle by Malgorzata Rita (@ritawanderlust) on CodePen.

HTML:
<div class=”circle”></div>
CSS:

.circle {
  width:200px;
  height: 200px;
  border-radius: 50%;
  background-color: #3DB3D6;
}

Wiele kółek

Wykorzystamy właściwość position. Domyślnie dla position każdy element ma przypisaną wartość static. Pozostałe wartości możemy pozycjonować za pomocą właściwości – top, right, bottom, left. Position może również przyjmować wartości:

  • relative – element HTML (np. div) pozycjonowany jest względem własnej krawędzi
  • absolute – element pozycjonowany jest względem krawędzi najbliższego elementu rodzica/przodka, którego pozycja jest inna niż static (relative, absolute, fixed)
  • fixed – pozycjonowanie odbywa się względem krawędzi okna przeglądarki. Co to oznacza? Element fixed zawsze pozostaje zawsze w tym samym miejscu w oknie przeglądarki (nawet podczas scrollowania np. menu na stronie www)

See the Pen simple circle by Malgorzata Rita (@ritawanderlust) on CodePen.

HTML:

<div class=”circle outer”>
  <div class=”circle inner” id=”c1″>
    <div class=”circle inner” id=”c2″>
      <div class=”circle inner” id=”c3″>
      </div>
    </div>
  </div>
</div>

CSS:

.circle {
  width:200px;
  height: 200px;
  border-radius: 50%;
  background-color: #3DB3D6;
}

.circle.outer {
  position: relative;
}

.circle.inner {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 3px solid #fff;
}

#c1 {
  width: 100px;
  height: 100px;
}

#c2 {
  width: 50px;
  height: 50px;
  left: 50%;
}

#c3 {
  width: 25px;
  height: 25px;
  left: 50%;
}

Ciastko CSS

Jeżeli przykład powyżej wydaje się zrozumiały, to pozycjonowanie + kształty CSS powinny bez trudu pozwolić wam stworzyć takie ciastko:

See the Pen Pure CSS cookie by Malgorzata Rita (@ritawanderlust) on CodePen.

Gąsienica CSS

Z odrobiną kombinowania i podobnie do powyższego zrobimy gąsienicę. Największym problemem mogą być usta, ale liczę na waszą kreatywność 🙂

See the Pen caterpillar by Malgorzata Rita (@ritawanderlust) on CodePen.

Spróbujcie wykonać ją całkowicie samodzielnie 😉 To może chwię zająć, ale warto spróbować.

Koło z podziałem na ćwiartki

Wróćmy do pojedyńczego koła. Banalne prawda? A gdyby tak chcieć podzielić je na równe ćwiartki? Jest to jak najbardziej możliwe! Tutaj wykorzystamy przycinanie – właściwość clip i jej wartość rect(top, right, bottom, left).

See the Pen circle with quarters CSS by Malgorzata Rita (@ritawanderlust) on CodePen.

Obręcz CSS

Obręcz czy pireścień, to koło, tylko, że z dziurą i dokładnie to musimy dodać do naszego obecnego kodu:

See the Pen ring with quarters CSS by Malgorzata Rita (@ritawanderlust) on CodePen.

Jak zrozumieć przycinanie za pomocą clip?

W pierwszym momencie właściwość clip może wydawać się zupełnie niezrozumiała. Nie jest często wykorzystywana, ale może się przydać w rysowaniu css. Ponadto, gdy obraz wykorzystujemy więcej razy na stronie, to przeglądarka wie, że mago załadować tylko raz. Tym samym możemy zaoszczędzić na ładowanych źródłach na stronie. Przetestujemy to na przykładzie poniższych ikonek, które umieściłam na planszy 100×100, każdej dając ¼ obrazka:


Tak wygląda sama przygotowana grafika:

Zwróćcie uwagę, że właściwość clip działa tylko z ustawionym position: absolute.

See the Pen icons clip CSS by Malgorzata Rita (@ritawanderlust) on CodePen.

Przejdźmy to krok po kroku. Czerwony punkt oznacza punkt 0 0. Aby wyświetlić książkę chcemy wyciąć obrazek w pionie od 50-100px (góra-dół) i w poziomie 0-50px (lewo-prawo). Stąd: rect(50px 50px 100px 0px)

Ciastko CSS + JavaScript

Wróćmy na chwilę do naszego ciastka. Tworząc je odgórnie narzuciłam pozycjonowanie płatków czekoladowych. A gdyby tak generować pozycje poszczególnych kawałków czekolady za pomocą prostego JavaScriptu?

See the Pen CSS + Js chocolate cookie by Malgorzata Rita (@ritawanderlust) on CodePen.

1) Ugryzienie
Ugryzienie to również 2 kółka, które zostały ustawione za pomocą position oraz została nadana im wartość z-index. z-index – odpowiada, za poziom widocznośćci lub inaczej – za kolejność ułożenia elementów i działa jedynie dla pozycjonowanych elementów(position:absolute, position:relative, or position:fixed). Domyślnie elementy HTML mają wartość z-index: 0 lub wartość swojego rodzica.

2) Mieszanie na kliknięcie
Dodaliśmy guzik, który pozwala na mieszanie elementów. Sama metoda jest bardzo prosta. Przyjmujemy, że znamy x i y. Dla każdego elementu w pętli for-of (pętla for-of ES6 jest przyjemna i czytelna, ale możecie też użyć klasycznego fora) chcemy przypisać nową wartość pozycji. Za pomocą Math.random() wylosujemy liczby z przedziału 0-1, ale za pomocą x i y łatwo rozszerzymy ten przedział. Math.floor() to matematyczna funkcja podłoga, zaokrągla w dół do najbliższej liczby całkowitej np. 127,8 zostanie zaokrąglone do 127. Następnie przed dodaniem do stylu musimy pamiętać, by jeszcze dodać pixele do liczyby:

function mix() {
  x = 200;
  y = 200;
  elem = document.getElementsByClassName(’choc’);
  for (let e of elem) {
    let randomX = Math.floor(Math.random()*x);
    let randomY = Math.floor(Math.random()*y);
    e.style.top = randomX + 'px’;
    e.style.left = randomY + 'px’;
  }
};

Zadanie to możecie rozszerzyć, niech mix jednocześnie zmienia tło obrazka, czy wielkość każdego kawałka czekolady 😉

Dajcie znać jak wam się podoba!

Ikony wykonał Zlatko Najdenovski.

PS: ostatnio w WP psują mi się cudzysłowy i pojedyńcze apostrofy – uważajacie jak kopiujecie, mogą wymagać zmiany 😉

HTML / CSS