Prowadzenie projektów i realizacja serwisów internetowych

CSS3 Shapes – podstawowe kształty i figury za pomocą języka kaskadowych arkuszy stylów

CSS3 Shapes - kształty i figury.

CSS3 nowy standard Internetu

Wraz z rozwojem kolejnych wersji języka CSS (ang. Cascading Style Sheets) rozszerzyły się możliwości zarządzania poszczególnymi elementami kodu HTML. Programiści zyskali możliwość tworzenia przeróżnych kształtów za pomocą prostego kodu, który zaczął często zastępować standardowe, nieedytowalne rysunki i animacje graficzne.

Przejście ze statycznych obrazków na kod CSS3 nie tylko umożliwiło użytkownikom samodzielne tworzenie wielu kształtów i rysunków, ale co najważniejsze zwiększyło możliwości zarządzania nimi. Do tej pory statyczne obrazki były praktycznie niezarządzalne. Nie można było na przykład w trakcie działania strony internetowej zmienić koloru tła na obrazku, dodać animację lub zmodyfikować jego kształtu. Wykorzystując kod CSS3 programista może w dowolnym momencie zmieniać i animować zakodowane obrazki, tworząc z nich wyszukane kształty, rysunki i animacje.

Poniżej przedstawiono kilka ciekawych przykładów tworzenia kształtów przy wykorzystaniu języka CSS3.

Przykład 1: prostokąt

Najprostszym i najczęściej wykorzystywanym kształtem na stronach internetowych są prostokąty. Z prostokątów składają się wszystkie elementy na stronie internetowej: bloki, tabele, rysunki, formularze. Manipulując tylko wysokością i szerokością obiektu, użytkownik jest w stanie stworzyć dowolny prostokąt.

Przykład 2: kwadrat

Kwadrat jest prostokątem, który posiada wszystkie boki równej długości. Oznacza to, że aby narysować kwadrat, wystarczy zmienić kod z przykładu pierwszego, aby wysokość i szerokość tworzonego obiektu były sobie równe.

Przykład 3: koło

Koło jest kwadratem, który posiada zaokrąglone wszystkie boki. Do napisanego w przykładzie drugim kwadratu wystarczy więc dodać zaokrąglenia wykorzystując właściwość border-radius. Wartość właściwości będzie decydować o stopniu zaokrąglenia obiektu.

Przykład 4: owal

Dodając właściwość zaokrąglenia obiektu do prostokąta z przykładu pierwszego, przeglądarka wyświetli poziomy owal. Jeśli użytkownik sprawi, że wysokość prostokąta będzie większa niż jego szerokość, to owal będzie pionowy.

Przykład 5: trójkąt równoramienny

Aby narysować trójkąt równoramienny należy odpowiednio sterować obramowaniem border obiektu. W przedstawionym przykładzie border-left odpowiada za lewą połowę długości podstawy obiektu, a border-right za jego prawą połowę. Własność border-bottom określa wysokość trójkąta. Wysokość i szerokość obiektu pozostają wyzerowane. Trójkąt rysowany jest wyłącznie z obramowań.

Uwagi autora
Rozwiń listęSchowaj listę

Początkowo, sposób rysowania trójkątów w CSS-ie może okazać się dla wielu użytkowników bardzo skomplikowany i niejasny, ale zapewniam, że po przestudiowaniu przykładów 5–13 wiele rzeczy powinno stać się dużo prostsze i bardziej zrozumiałe.

Pamiętaj! Praktyka czyni mistrza. Im więcej będziesz ćwiczył, tym kolejne przykłady wydadzą Ci się mniej skomplikowane. Po jakimś czasie sam będziesz tworzyć kolejne figury geometryczne.

Przykład 6: trójkąt równoboczny

Trójkąt równoboczny jest rodzajem trójkąta równoramiennego, dla którego wszystkie boki są równej długości. Aby narysować trójkąt równoboczny należy najpierw określić długość jego ramion, a następnie obliczyć jego wysokość. Wysokość trójkąta równobocznego jest równa: (a√3)÷2, gdzie „a” to długość boku. Jeśli wiec bok trójkąta ma 140px, to jego wysokość jest równa w przybliżeniu 121px.

Posiadając wszystkie niezbędne wartości parametrów trójkąta, można bez przeszkód zmodyfikować przykład piąty i uzyskać pożądany rysunek trójkąta równobocznego.

Przykład 7: trójkąt równoboczny „do góry nogami”

Aby odwrócić trójkąt równoboczny „do góry nogami” należy zastąpić border-bottom, z przykładu szóstego, własnością border-top.

Na podobnej zasadzie można przekształcić trójkąt równoramienny z przykładu piątego. Wystarczy zastąpić border-bottom, własnością border-top.

Przykład 8: trójkąt równoboczny skierowany w lewą stronę (przycisk wstecz)

Aby uzyskać trójkąt skierowany w lewą stronę, wystarczy wykorzystać inne obramowanie obiektu. Tym razem podstawę trójkąta będą budować border-topborder-bottom, a za jego wysokość będzie odpowiadać border-right.

Uwagi autora
Rozwiń listęSchowaj listę

Trójkąt skierowany w prawą lub w lewą stronę może, w niektórych przypadkach, idealnie służyć jako przycisk poprzedni (wstecz) lub następny (dalej). Przyciski tego rodzaju można w pełni modyfikować. Na przykład:

  • po akcji :hover (najście myszką na przycisk) powiększać lub całkowicie zmieniać kształt, co może uczynić projektowaną stronę ciekawszą od strony konkurencji.

Zwyczajny obrazek nie pozwala na tego rodzaju modyfikacje.

Przykład 9: trójkąt równoboczny skierowany w prawą stronę (przycisk dalej)

Sytuacja podobna jak w przykładzie ósmym z tą różnicą, że przycisk odwrócony jest w prawą stronę (border-right zamienia się na border-left).

Przykład 10: trójkąt prostokątny (wersja A)

Odpowiednio wybierając rodzaj obramowania obiektu można stworzyć dowolny trójkąt.

Przykład 11: trójkąt prostokątny (wersja B)

Przykład 12: trójkąt prostokątny (wersja C)

Przykład 13: trójkąt prostokątny (wersja D)


Aktualizacja


Przykład dodatkowy 1: Okrąg

Okrąg to koło, które zamiast tła posiada obramowanie. Aby narysować okrąg, należy skorzystać z przykładu trzeciego, w którym zamiast właściwości background-color, należy użyć właściwości border.

Ciąg dalszy w artykule: .

← Poprzedni artykuł

Następny artykuł →

Komentarze: 12

  1. Dariusz

    Dariusz

    10 kwietnia 2015 o 12:01

    Czy za pomocą CSS można narysować dowolny kształt?

    Odpowiedz
    • Daniel Pietrasik

      Daniel Pietrasik

      10 kwietnia 2015 o 18:34

      Teoretycznie tak, jednakże opłacalność tego w wielu przypadkach jest niewielka.

      Problem w tym, że aby narysować bardziej skomplikowane kształty trzeba napisać dużo kodu. Czasem znacznie łatwiej jest po prostu wkleić obrazek, albo zastosować odpowiednią czcionkę obrazkową (np. font awesome). Należy pamiętać również, że CSS może być różnie interpretowany przez różne przeglądarki, zwłaszcza te starsze. Urządzenia mobilne mogą nie czytać wszystkich stylów i własności elementów html.

  2. Tomasz Kusiak

    Tomasz Kusiak

    6 maja 2016 o 11:22

    Panie Danielu, jak narysować okrąg? Czyli koło, które w środku jest puste?

    Odpowiedz
    • Daniel Pietrasik

      Daniel Pietrasik

      7 maja 2016 o 11:43

      Umieściłem dla Pana w artykule rozwiązanie zatytułowane:
      Przykład dodatkowy 1: Okrąg

      Mam nadzieję, że pomogłem. Miłej nauki.

  3. Kamil

    Kamil

    15 grudnia 2016 o 15:20

    Panie Danielu, bardzo fajny artykuł jednak mam pewien problem. Co jeśli chciałbym na środku trójkąta wstawić napis? Próbowałem na różne sposoby i mimo wszystko ciężko jest go wycentrować. http://jsfiddle.net/bpc6seaa/12/ http://jsfiddle.net/mkrcc99s/4/

    Odpowiedz
    • Daniel Pietrasik

      Daniel Pietrasik

      15 grudnia 2016 o 18:34

      Jest bardzo wiele możliwości. Przykład:

      /*Tworzymy trójkąt.*/
      #triangle {
      	width: 0;
      	height: 0;
      	border-left: 70px solid transparent;
      	border-right: 70px solid transparent;
      	border-bottom: 121px solid #F34A53;
      	margin: 40px auto 0;
      	position: relative;
      }
      
      /*Umieszczamy selektory :after i :before po szerokości trójkąta (po środku).*/
      #triangle:after,
      #triangle:before {
      	position: absolute;
      	left: -70px; /*Pozycja lewego wierzchołka trójkąta.*/
      	right: -70px; /*Pozycja prawego wierzchołka trójkąta.*/
      	text-align: center; /*Tekst wycentrowany.*/
      	color: white;
       	font-size: 14px;
      }
      
      /*Tekst pierwszy.*/
      #triangle:before {
      	content: "Wesołych";
      	top: 70px; /*Przesunięcie od górnego wierzchołka trójkąta.*/
      }
      
      /*Tekst drugi.*/
      #triangle:after {
      	content: "Świąt";
      	top: 90px; /*Przesunięcie od górnego wierzchołka trójkąta.*/
      }
      
  4. James Prada

    James Prada

    20 kwietnia 2020 o 16:39

    Eeee… Interesuje mnie stworzenie animowanego modelu kopuły geodezyjnej… różnych wariantów takiej kopuły. Jest taki program Poly. Pozdrawiam.

    Odpowiedz
    • Daniel Pietrasik

      Daniel Pietrasik

      20 kwietnia 2020 o 17:40

      Z ilu ścian taka kopuła miałaby się składać? Mogę stworzyć dowolną kopułę, ale dla każdej z nich będzie inny kod. Jeśli chciałbyś, abym przygotował Ci jakiś przykład napisz mi więcej informacji.

  5. Marek W.

    Marek W.

    28 stycznia 2021 o 19:17

    Super artykuł z przykładami i świetna baza do własnych kształtów np dymki. Dzięki wielkie za to

    Odpowiedz
  6. Html

    Html

    28 marca 2021 o 20:41

    Potrzebuje komendy w języku HTML narysować kółko w środku kwadratu.Dziękuje z góry za pomoc

    Odpowiedz
    • Daniel Pietrasik

      Daniel Pietrasik

      30 marca 2021 o 16:44

      Przykład rozwiązania:

      /*Tworzymy kwadrat.*/
      #circle-in-square {
      	width: 150px;
      	height: 150px;
      	background-color: #F34A53;
      	position: relative;
      }
      
      /*Tworzymy kółko.*/
      #circle-in-square:after {
      	content: '';
      	width: 150px;
      	height: 150px;
      	position: absolute;
      	top: 0; /*Odstęp koła od górnego boku kwadratu.*/
      	left: 0; /*Odstęp koła od lewego boku kwadratu.*/
      	right: 0; /*Odstęp koła od prawego boku kwadratu.*/
      	bottom: 0; /*Odstęp koła od dolnego boku kwadratu.*/
      	background-color: #333;
      	border-radius: 100%;
      }
      
  7. Zadowolony użytkownik

    Zadowolony użytkownik

    10 kwietnia 2021 o 20:16

    Nigdy nie piszę komentarzy. Ale przyznam, że ten wpis jest świetnie przygotowany i dobrze dopracowany. Dlatego jedno wielkie DZIĘKUJĘ!

    Odpowiedz

Komentuj

Twój adres email nie zostanie opublikowany. Służyć będzie tylko i wyłącznie w celu udzielenia odpowiedzi na zadane pytanie lub komentarz. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *.