Ostatnia aktualizacja 18 marca, 2024
Choć znajomość HTML-a (zwykle połączona ze znajomością CSS-a) jest przydatna nie tylko w IT, to bez wątpienia może stanowić dobry wstęp do zmiany branży. Jeśli zdarzyło Ci się wykorzystywać HTML wcześniej (nawet w podstawowym zakresie) i nie przeraża Cię odczytywanie jego składni i stosowanie go w praktyce, jesteś na dobrej drodze do rozwijania się jako programista(-tka). W tym tekście omówimy kolory HTML – jak ustawiać je dla poszczególnych elementów i z jakich kolorów możemy w ogóle skorzystać.
- HTML to podstawowy język, którego możesz się nauczyć w pierwszej kolejności, aby obyć się ze składnią;
- Jeśli planujesz pracę jako web developer, HTML i CSS będą stanowić niezbędną podstawę;
- HTML przydaje się nie tylko w pracy programisty. Korzystają z niego także specjaliści SEO, ale też wszyscy, którzy tworzą swoje strony w oparciu o wybrany CMS.
Sprawdź: Umiejętności do CV
Co to jest HTML?
HTML to skrót od wyrażenia HyperText Markup Language, co po polsku oznacza hipertekstowy język znaczników. Stosuje się go do tworzenia hipertekstowych dokumentów, a kiedyś był podstawowym językiem używanym do tworzenia stron internetowych.
Z HTML-em współistnieje CSS, czyli Casading Style Sheets (kaskadowe arkusze stylów). Osoby uczące się hipertekstowego języka znaczników często łączą zdobywanie tej wiedzy z nauką CSS-a, aby wykorzystywać więcej możliwości do zaprogramowania w witrynie.
Dzisiaj web developerzy, oprócz piątej wersji HTML-a (HTML5) oraz CSS-a w wersji czwartej (CSS4), wykorzystują także JavaScript, PHP, czy też MySQL. Z HTML-a i CSS-a mogą również korzystać specjaliści od technicznego SEO, a także wszyscy, którzy samodzielnie tworzą swoje strony internetowe w oparciu o CMS.
Kolory HTML
Kolory HTML to podstawowe parametry, które poznasz w pierwszych etapach nauki HTML-a. Do dyspozycji masz mnóstwo barw, które wyrażone są w szesnastkowym systemie liczbowym (HEX). Jednakże w możesz również skorzystać z podstawowych kolorów, które da się zapisać w kodzie słownie.
Podstawowy wykaz kolorów HTML:
- black (czarny)
- white (biały)
- red (czerwony)
- blue (niebieski)
- green (zielony)
- silver (srebrny)
- gray (szary)
- yellow (żółty)
- purple (purpurowy)
- maroon (kasztanowy)
- olive (oliwkowy)
- lime (limonkowy)
- aqua (morski)
- teal (turkusowy)
- navy (granatowy)
Jeśli chcesz skorzystać z innych kolorów, musisz znać ich symbol HEX RGB. Nie musisz jednak niczego zapamiętywać, ponieważ istnieje mnóstwo narzędzi wizualnych, które ułatwiają pracę nad elementami. Aby znaleźć kolory, które przeniesiesz do HTML-a, możesz skorzystać z następujących stron:
Możesz również wykorzystać Google, w którym po wpisaniu frazy „selektor kolorów” otrzymasz narzędzie do wizualnego wyboru odpowiedniego koloru wraz z jego parametrami.
Zobacz: Jak zostać informatykiem?
Jak zmienić kolor czcionki w HTML-u?
Aby nadać kolor tekstowi, musisz go odpowiednio ostylować. Tak zresztą będzie z każdym atrybutem, który zechcesz zastosować. Do ustawienia koloru fontu możesz użyć następującego kodu:
<p style="color: yellow;">Tekst napisany fontem koloru żółtego</p>Jak zmienić kolor tła w HTML?
Aby zmienić kolor tła całej witryny, w kodzie strony musisz dodać następujące wiersze:
<body bgcolor="kolor-tła" text="kolor-tekstu">
Przykładowa treść na stronie
</body>Kolory HTML w grafice SVG
W SVG kolory można definiować za pomocą różnych notacji, np. nazw kolorów, wartości HEX, RGB czy HSL. Można je wykorzystywać do wypełnienia lub obrysowania różnych elementów, takich jak ścieżki, okręgi, prostokąty czy tekst.
Dzięki elastycznemu zarządzaniu kolorami, SVG umożliwia tworzenie złożonych gradientów, cieni i innych efektów wizualnych, które są w pełni dostosowalne i responsywne.
Poniżej znajduje się przykład kodu HTML, który ilustruje użycie kolorów w grafice SVG.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Przykład SVG</title>
</head>
<body>
<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">
<!-- Definicja gradientu -->
<defs>
<linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
</linearGradient>
</defs>
<!-- Prostokąt wypełniony gradientem -->
<rect x="10" y="10" width="180" height="100" fill="url(#gradient)" />
<!-- Okrąg z czerwonym obrysem i niebieskim wypełnieniem -->
<circle cx="300" cy="60" r="50" stroke="red" stroke-width="3" fill="blue" />
</svg>
</body>
</html>Ten kod tworzy prostokąt, który jest wypełniony gradientem przechodzącym od czerwonego do żółtego, oraz okrąg z czerwonym obrysem i niebieskim wypełnieniem. Wszystko to jest osadzone w elemencie SVG, który można łatwo umieścić na stronie internetowej.
Kolory z CSS-a
Zaawansowane techniki kolorowania w CSS pozwalają twórcom stron internetowych na tworzenie dynamicznych i wizualnie atrakcyjnych efektów.
Użycie gradientów, cieni i przejść kolorystycznych może znacząco poprawić estetykę strony, dodając jej głębi i nowoczesnego wyglądu. Gradienty pozwalają na płynne przejście między wieloma kolorami, tworząc subtelne lub dramatyczne tła. Cienie dodają elementom głębi i trójwymiarowości, a przejścia kolorystyczne mogą być używane do subtelnych efektów wizualnych, które reagują na interakcje użytkownika, takie jak najechanie myszką.
Gradient liniowy
.background-gradient {
background: linear-gradient(45deg, #ffcc33, #ff6699);
}Ten kod CSS tworzy tło z gradientem liniowym, który przechodzi z koloru żółtego (#ffcc33) do różowego (#ff6699) pod kątem 45 stopni.
Cień tekstu
.text-shadow {
color: #333333;
text-shadow: 2px 2px 4px #666666;
}Tekst otrzymuje cień, który dodaje głębi i poprawia czytelność. Cień jest przesunięty o 2 piksele w poziomie i pionie, a jego rozmycie wynosi 4 piksele, co tworzy efekt miękkiego cienia.
Alpha Transparency – wykorzystanie RGBA i HSLA do dodawania przezroczystości kolorom
Stosowanie przezroczystości za pomocą RGBA i HSLA w CSS przenosi możliwości wizualne na zupełnie nowy poziom. Dzięki nim projektanci mogą tworzyć subtelne efekty nakładania, które doskonale wtapiają się w tło strony, a także półprzezroczyste elementy, które nadają projektom lekkości i nowoczesnego charakteru.
Przykład zastosowania RGBA może być widoczny w poniższym kodzie, za pomocą którego tworzymy półprzezroczyste menu nawigacyjne, które delikatnie prześwituje przez tło strony:
nav {
background-color: rgba(0, 0, 0, 0.5); /* Czarny z 50% przezroczystości */
color: white;
padding: 10px;
}Dzięki temu menu zachowuje czytelność, jednocześnie subtelnie integrując się z tłem. Ten efekt tworzy głębię i dodaje estetyki interfejsowi użytkownika.
Korzystając z HSLA, można stworzyć efekt subtelnej warstwy na zdjęciu lub sekcji, która delikatnie zmienia nastrój strony bez dominowania nad zawartością. Na przykład, zastosowanie lekko przezroczystej warstwy w tonacji seledynowej może dodać chłodny, spokojny efekt do sekcji:
.section-overlay {
background-color: hsla(180, 100%, 50%, 0.4); /* Seledynowy z 40% przezroczystości */
padding: 20px;
}Takie zastosowanie HSLA pozwala na delikatne manipulowanie klimatem strony, zachowując jednocześnie pełną czytelność i widoczność podkładającego się materiału.
Obydwa podejścia (RGBA i HSLA) oferują projektantom narzędzia do eksperymentowania z kolorami i przezroczystościami, które pozwalają na tworzenie unikalnych, dynamicznych i estetycznie przyjemnych projektów webowych. Dzięki nim można łatwo osiągnąć efekty nakładania, które nie tylko wzbogacają wizualną warstwę projektu, ale także mogą poprawić jego użyteczność przez lepsze strukturyzowanie i oddzielenie poszczególnych elementów interfejsu.
Dziękujemy, że przeczytałaś/eś nasz artykuł. Obserwuj EnterTheCode.pl w Wiadomościach Google, aby być na bieżąco.
Czytaj także:
Łączenie HTML z CSS w łatwy sposób
