W arkuszach stylów CSS, właściwość `border` pozwala webmasterom na precyzyjne określenie wyglądu, grubości i barwy obramowań elementów.
Funkcja gradientu w CSS umożliwia płynne przejście tonalne między wybranymi kolorami. Wykorzystanie gradientów otwiera drogę do tworzenia efektów wizualnych, takich jak cieniowanie, płynne mieszanie barw i nadawanie tekstury elementom na stronie internetowej.
Obramowanie gradientowe to atrybut CSS, który daje programistom możliwość zastosowania gradientu jako obramowania elementu, nadając mu niepowtarzalny charakter.
Tego rodzaju obramowanie generuje efekt wizualny, w którym barwa obramowania przechodzi z jednego odcienia do drugiego, tworząc interesujące wrażenie.
Dlaczego warto stosować gradientowe obramowania?
Gradienty obramowań, wprowadzone wraz z CSS3, wzbogaciły paletę możliwości stylizacji. Oto kilka argumentów przemawiających za włączeniem ich do Twojego projektu internetowego:
- Elastyczność gradientu obramowania: umożliwia tworzenie złożonych i wielowarstwowych efektów wizualnych, w przeciwieństwie do obramowań w jednolitym kolorze. Ta cecha sprawia, że są idealne w sytuacjach, gdy konieczne jest uzyskanie dopracowanych, niestandardowych projektów.
- Zwiększenie atrakcyjności wizualnej: poprzez zastosowanie efektu gradientu obramowania, można dodać do projektu elementy, które przyciągają wzrok. Na przykład, wykorzystanie silnych kontrastów kolorystycznych może pomóc w zwróceniu uwagi użytkownika na konkretny obszar strony.
- Harmonijna integracja: Gradientowe obramowania pozwalają na płynne połączenie obramowania z tłem elementu. Takie podejście nadaje stronie spójny i solidny wygląd, świadczący o przemyślanym projekcie.
Jak dodać gradientowe obramowanie w CSS?
Zanim przejdziemy do szczegółów dodawania gradientu obramowania, warto pokazać, jak w ogóle dodać obramowanie do elementu HTML.
Można to zrealizować za pomocą poniższego kodu:
HTML
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="https://wilku.top/how-to-add-border-gradient-in-css-3-tools/style.css">
<title>Dokument</title>
</head>
<body>
<div class="box contains-border">
Jak dodać obramowanie - ilustracja!!!
</div>
</body>
</html>
CSS
.box {
width: 400px;
height: 50px;
max-width: 80%;
font-size: 1.5rem;
}
.contains-border {
border-color: rebeccapurple;
border-style: solid;
border-width: 5px;
}
Po wyrenderowaniu strona będzie wyglądać następująco:
Pomimo, że powyższy kod generuje obramowanie, nie jest ono szczególnie atrakcyjne wizualnie. Widzimy jedynie zwykłą, fioletową ramkę o szerokości 5 pikseli wokół elementu div.
Wygląd naszego obramowania możemy znacząco ulepszyć, używając gradientów. Istnieje kilka sposobów na dodanie gradientu do obramowania. Poniżej przedstawiono główne z nich:
Użycie obramowań z gradientem (gradient liniowy, promienisty, stożkowy)
Pokażemy, jak zastosować gradientowe obramowania na trzy różne sposoby:
Gradient liniowy
Gradient liniowy tworzy płynne przejście między dwoma lub więcej barwami wzdłuż linii prostej. Poniższy kod pokazuje jego zastosowanie:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Przykład Gradientu Liniowego</title>
<link rel="stylesheet" type="text/css" href="https://wilku.top/how-to-add-border-gradient-in-css-3-tools/style.css">
</head>
<body>
<div class="box linear-gradient">
Ilustracja Gradientu Liniowego
</div>
</body>
</html>
CSS
.box {
width: 350px;
height: 50px;
max-width: 80%;
font-size: 1.5rem;
}
.linear-gradient {
border-style: solid;
border-width: 10px;
border-image: linear-gradient(45deg, rgb(143, 55, 0), rgb(66, 228, 250)) 1;
}
Styl obramowania został ustawiony na pełny, co oznacza, że obramowanie wokół elementu jest ciągłą linią. Szerokość obramowania wynosi 10 pikseli.
Gradient liniowy przechodzi od koloru rgb(143, 55, 0) do rgb(66, 228, 250), pod kątem 45 stopni. Szerokość wycinka obrazu obramowania ustawiona jest na 1.
Wyrenderowana strona będzie prezentować się następująco:
Gradient promienisty
Gradient promienisty tworzy okrągły gradient, który rozchodzi się od centralnego punktu, umożliwiając płynne przejście między kolorami w elemencie strony.
Poniższy kod ilustruje, jak dodać gradient promienisty:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Przykład Gradientu Promienistego</title>
<link rel="stylesheet" type="text/css" href="https://wilku.top/how-to-add-border-gradient-in-css-3-tools/style.css">
</head>
<body>
<div class="box radial-gradient">
Ilustracja Gradientu Promienistego
</div>
</body>
</html>
CSS
.box {
width: 350px;
height: 50px;
max-width: 80%;
font-size: 1.5rem;
}
.radial-gradient {
border-style: solid;
border-width: 5px;
border-image: radial-gradient(rgb(0,143,104), rgb(250,224,66)) 1;
}
Styl obramowania elementu został ustawiony jako pełny, a szerokość obramowania wynosi 5 pikseli.
Gradient promienisty przechodzi od ciemnozielonego RGB(0,143,104) do jasnożółtego rgb(250,224,66).
Wartość „1” na końcu kodu określa sposób powtarzania obrazu obramowania, nakazując przeglądarce jednokrotne powtórzenie tego obrazu wokół obramowania elementu.
Wyrenderowana strona będzie wyglądać w ten sposób:
Gradient stożkowy
Gradient stożkowy tworzy okrągłe przejście kolorów. W efekcie, przejście rozpoczyna się w centralnym punkcie i rozchodzi na zewnątrz, generując efekt kołowy.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Przykład Gradientu Stożkowego</title>
<link rel="stylesheet" type="text/css" href="https://wilku.top/how-to-add-border-gradient-in-css-3-tools/style.css">
</head>
<body>
<div class="box conic-gradient">
Ilustracja Gradientu Stożkowego
</div>
</body>
</html>
CSS
.box {
width: 350px;
height: 50px;
max-width: 80%;
font-size: 1.5rem;
}
.conic-gradient {
border-style: solid;
border-width: 7.5px;
border-image: conic-gradient(red, rgb(0, 255, 47), rgb(255, 60, 0), rgb(13, 255, 0), blue, rgb(0, 255, 4), rgb(255, 0, 38)) 1;
}
W tym przypadku, styl obramowania ustawiamy na jednolity, a jego szerokość na 7,5 piksela. Właściwość `border-image` określa gradient obramowania, który obejmuje siedem kolorów, począwszy od czerwonego i kończąc na rgb (255, 0, 38).
Cyfra „1” na końcu kodu wyznacza szerokość obramowania, która wynosi 1 piksel.
Tak będzie wyglądać strona po wyrenderowaniu:
Zastosowanie obrazów obramowania
Obrazy obramowań zastępują standardowe obramowania w jednolitym kolorze elementów HTML. Używa się ich do tworzenia rozbudowanych projektów, w przeciwieństwie do łączenia kolorów w celu uzyskania gradientu obramowania.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Przykład Obrazów Obramowania</title>
<link rel="stylesheet" type="text/css" href="https://wilku.top/how-to-add-border-gradient-in-css-3-tools/style.css">
</head>
<body>
<div class="box border-images">
Ilustracja Obrazów Obramowania
</div>
</body>
</html>
CSS
.box {
width: 350px;
height: 50px;
max-width: 80%;
font-size: 1.5rem;
}
.border-images {
border-style: solid;
border-width: 15px;
border-image-source: url(/images/elephant-2910293_1920.jpg);
border-image-slice: 60 30;
}
Właściwość `border-width` ma szerokość 15 pikseli, a styl obramowania ustawiony jest jako jednolity.
Wycinek obrazu obramowania (border-image-slice) ustawia szerokość i wysokość pola obramowania odpowiednio na 60% i 30%.
Tak będzie wyglądać strona po wyrenderowaniu:
Zastosowanie właściwości skróconych
Właściwości skrócone umożliwiają deweloperom stylizowanie wielu indywidualnych atrybutów CSS za pomocą pojedynczej linii kodu. W tym przypadku, wykorzystujemy obraz obramowania do zdefiniowania jego źródła i wycinka.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Przykład Właściwości Skróconych</title>
<link rel="stylesheet" type="text/css" href="https://wilku.top/how-to-add-border-gradient-in-css-3-tools/style.css">
</head>
<body>
<div class="box shorthand">
Ilustracja Właściwości Skróconych
</div>
</body>
</html>
CSS
.box {
width: 350px;
height: 50px;
max-width: 80%;
font-size: 1.5rem;
}
.shorthand {
border-style: solid;
border-width: 15px;
border-image: url(/images/elephant-2910293_1920.jpg) 60 30;
}
Tak będzie wyglądać strona po wyrenderowaniu:
Generatory gradientów obramowania CSS
Generatory gradientów obramowania CSS pomagają deweloperom w dodawaniu efektów gradientu do elementów na stronach internetowych. Pozwalają one na dostosowanie ustawień, dzięki czemu nie trzeba wszystkiego tworzyć od podstaw. Oto niektóre z narzędzi, które można wykorzystać:
#1. Generator gradientów CSS – Converting Colors
Converting Colors umożliwia generowanie kodu CSS dla gradientów liniowych lub promienistych z użyciem do pięciu kolorów. Wygenerowany kod gradientu CSS może być użyty jako obramowanie elementu lub jako tło.
Za pomocą tego generatora można:
- Wybrać do pięciu kolorów i użyć ich w gradiencie obramowania.
- Określić kierunek gradientu. Narzędzie oferuje gradienty liniowe i promieniste.
- Zdecydować o sposobie przejścia kolorów, korzystając z funkcji zatrzymania koloru.
Po zakończeniu eksperymentowania i wygenerowaniu kodu, można go skopiować i wdrożyć na swojej stronie.
#2. CSS Border Gradient Generator – Unused CSS
Unused-CSS pomaga deweloperom generować obramowania z gradientem, które można zastosować do elementów blokowych bez tworzenia pseudoelementów lub dodatkowych elementów.
Można tu:
- Wybierać spośród różnych typów gradientów. Narzędzie umożliwia łatwe przełączanie między gradientami promienistymi i liniowymi.
- Wyświetlać podgląd. Narzędzie pozwala podejrzeć, jak obramowanie z gradientem będzie wyglądać na stronie po jego dostosowaniu.
- Ustawiać punkty zatrzymania koloru. To narzędzie ułatwia decydowanie o tym, jak przejścia między różnymi kolorami będą wyglądać.
- Dostosowywać rozmiar obramowania. Za pomocą tego narzędzia można łatwo dostosować szerokość i promień obramowania.
Po uzyskaniu zadowalającego efektu, można skopiować kod i użyć go w swoim projekcie.
#3. Gradient Border Generator – Amit Sheen
Narzędzie oferuje osiem różnych obszarów tła, umożliwiając deweloperom tworzenie zaokrąglonych obramowań z gradientem.
Możliwości:
- Tworzenie animacji gradientowych. Narzędzie pozwala na generowanie animacji gradientów, które przechodzą między dwoma lub większą ilością kolorów.
- Dodawanie kodu JavaScript. Jeśli dostosowywany element potrzebuje kodu JS, można go znaleźć i dostosować z poziomu panelu sterowania.
- Podgląd na żywo. Można śledzić zmiany w kodzie w miarę jego modyfikacji.
Po dostosowaniu efektów gradientu obramowania do własnych upodobań, można skopiować i wkleić wygenerowany kod.
Podsumowanie
Podczas projektowania stron internetowych można zastosować dowolne z przedstawionych podejść, aby dodać gradientowe obramowanie do swoich elementów. Wybór podejścia zależy od indywidualnych preferencji, umiejętności oraz charakteru elementu, który chcemy stylizować.
Możliwe jest również stosowanie różnych technik dla różnych elementów na tej samej stronie.
Zachęcamy do zapoznania się z metodami tworzenia podwójnego obramowania w CSS, które mogą dodatkowo wzbogacić wizualny aspekt strony.
newsblog.pl
Maciej – redaktor, pasjonat technologii i samozwańczy pogromca błędów w systemie Windows. Zna Linuxa lepiej niż własną lodówkę, a kawa to jego główne źródło zasilania. Pisze, testuje, naprawia – i czasem nawet wyłącza i włącza ponownie. W wolnych chwilach udaje, że odpoczywa, ale i tak kończy z laptopem na kolanach.