Implementacja 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łt. 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 kodu wystarczy dodać zaokrąglenia obiektu wykorzystując właściwość border-radius. Wartość właściwości będzie decydować o stopniu zaokrąglenia obiektu.

Przykład 4: owal

Manewrując parametrem border-radius, użytkownik może w dowolny sposób zaokrąglać każdy element na stronie internetowej.

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.

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.

Aby uzyskać trójkąt równoramienny „do góry nogami” wystarczy zastąpić border-bottom, z przykładu piątego, 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 zmodyfikować poszczególne szerokości jego obramowań.

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ę znacznie 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)

Modyfikując szerokości obramowań obiektu można stworzyć dowolny trójkąt.

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

Modyfikując szerokości obramowań obiektu można stworzyć dowolny trójkąt.

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

Modyfikując szerokości obramowań obiektu można stworzyć dowolny trójkąt.

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

Modyfikując szerokości obramowań obiektu można stworzyć dowolny trójkąt.


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: 6

  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: 50px solid transparent;
      	border-right: 50px solid transparent;
      	border-bottom: 120px 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: -50px; /*Pozycja lewego wierzchołka trójkąta.*/
      	right: -50px; /*Pozycja prawego wierzchołka trójkąta.*/
      	text-align: center; /*Tekst wycentrowany.*/
      	color: black;
       	font-size: 14px;
      }
      
      /*Tekst pierwszy.*/
      #triangle:before {
      	content: "Wesołych";
      	top: 80px; /*Przesunięcie od górnego wierzchołka trójkąta.*/
      }
      
      /*Tekst drugi.*/
      #triangle:after {
      	content: "Świąt";
      	top: 100px; /*Przesunięcie od górnego wierzchołka trójkąta.*/
      }
      

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 *.