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 niemożliwe do modyfikowania za pomocą kodu programistycznego. 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
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-top i border-bottom, a za jego wysokość będzie odpowiadać border-right.
Uwagi autora
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: CSS Figury geometryczne rysowane za pomocą kodu.
