Cześć! Pewnie już wiesz, że tag <hr> w HTML to taki fajny sposób na dodanie linii poziomej do swojej strony internetowej. Jest prosty w użyciu, ale domyślnie wygląda, hmm… trochę nudno. Szara, cienka kreska bez wyrazu. Na szczęście można ją zmodyfikować i dostosować do własnych potrzeb! W tym artykule pokażę Ci, jak zmienić kolor linii poziomej za pomocą CSS, a także dodam kilka dodatkowych trików, które mogą Cię zainteresować. Gotowy? No to lecimy!
1. Czym właściwie jest <hr>?
Dla przypomnienia – <hr> oznacza horizontal rule, czyli linię poziomą. W HTML jest używana głównie do wizualnego oddzielania sekcji. Ma też tę zaletę, że nie wymaga zamykającego tagu, więc możesz ją wrzucić na stronę jako:
<hr>
…i działa od razu. Tylko że tak, jak wspominałem wcześniej, domyślna linia jest… cóż, bardzo podstawowa.
2. Zmiana koloru <hr> w CSS
Chcesz zmienić kolor tej linii? Musisz użyć CSS. Na szczęście to proste! Spójrz na przykład:
Kod:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kolorowe linie</title>
<style>
hr {
border: none; /* Usuwamy domyślną obwódkę */
height: 2px; /* Ustawiamy grubość linii */
background-color: red; /* Wybieramy kolor */
}
</style>
</head>
<body>
<h1>Moja kolorowa linia</h1>
<hr>
<p>Pod linijką!</p>
</body>
</html>
Co się dzieje w tym kodzie?
border: none;– Wyłączamy domyślną obwódkę linii, która jest szara. Bez tego trudno byłoby zmienić kolor.height: 2px;– Ustawiamy grubość linii na 2 piksele. Możesz to dowolnie zmieniać, np. na 5px dla grubszej linii.background-color: red;– Definiujemy kolor tła linii. W tym przypadku czerwony, ale możesz użyć dowolnego koloru – nazw, kodów HEX (np.#FF5733), czy wartości RGB (rgb(255, 0, 0)).
3. Dostosowanie linii do swoich potrzeb
Teraz, kiedy już wiesz, jak zmienić kolor, możemy dodać trochę wybuchowości (w sensie wizualnym, spokojnie). Oto kilka pomysłów!
3.1 Gradient zamiast jednolitego koloru
Nie chcesz, żeby linia była w jednym kolorze? Możesz zastosować gradient. To naprawdę wygląda efektownie.
Kod:
hr {
border: none;
height: 4px;
background: linear-gradient(to right, red, orange, yellow, green, blue, purple);
}
Teraz linia przechodzi przez wszystkie kolory tęczy. Przyznaj, że to wygląda niesamowicie, prawda?
3.2 Zaokrąglone rogi
Chcesz, żeby linia wyglądała bardziej miękko? Dodaj zaokrąglone rogi!
Kod:
hr {
border: none;
height: 6px;
background-color: blue;
border-radius: 3px; /* Dodajemy zaokrąglenie */
}
Efekt? Ładna, gładka linia, która przypomina bardziej pasek, niż ostrą kreskę.
3.3 Punktkowana linia
A co, jeśli chcesz coś zupełnie innego? Na przykład linię punktkowaną? Oto jak to zrobić:
Kod:
hr {
border: 0;
border-top: 2px dotted green; /* Linia punktkowana */
}
Tutaj nie korzystamy z background-color, tylko definiujemy linię przez obwódkę. Możesz zmienić dotted na dashed, żeby uzyskać przerywaną linię.
4. Responsywność linii
Tworzysz stronę responsywną? Możesz dostosować długość linii, żeby ładnie wyglądała na różnych ekranach. Na przykład:
Kod:
hr {
border: none;
height: 2px;
background-color: black;
width: 80%; /* Linia zajmuje 80% szerokości ekranu */
margin: auto; /* Wyśrodkowanie */
}
Dzięki temu linia nie będzie zawsze pełnej szerokości, co czasem wygląda lepiej.
5. Dynamiczna zmiana koloru (JavaScript)
Chcesz, żeby linia zmieniała kolor po kliknięciu? Możesz dodać trochę magii JavaScript:
Kod:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interaktywna linia</title>
<style>
hr {
border: none;
height: 4px;
background-color: grey;
}
</style>
</head>
<body>
<h1>Kliknij, aby zmienić kolor linii</h1>
<hr id="myLine">
<button onclick="changeColor()">Zmień kolor</button>
<script>
function changeColor() {
const colors = ['red', 'blue', 'green', 'purple', 'orange'];
const randomColor = colors[Math.floor(Math.random() * colors.length)];
document.getElementById('myLine').style.backgroundColor = randomColor;
}
</script>
</body>
</html>
W tym przykładzie kliknięcie przycisku losowo zmienia kolor linii. Jest to superłatwe do zrobienia, a daje wrażenie, że strona żyje.
Zmiana koloru linii <hr> to dziecinnie proste zadanie, które może jednak znacząco poprawić wygląd Twojej strony internetowej. Dzięki CSS możesz nie tylko zmienić kolor, ale też eksperymentować z gradientami, zaokrągleniami czy nawet tworzyć linie punktkowane. Jeśli chcesz dodać trochę interaktywności, JavaScript daje Ci mnóstwo możliwości – od zmiany koloru po różne efekty wizualne.
Mam nadzieję, że ten poradnik Ci pomógł i teraz Twoje linie <hr> nie będą już takie zwykłe i nudne.