Granice są niezwykle istotne w projektowaniu i tworzeniu stron internetowych. Mają one zdolność skupiania wzroku użytkowników lub wyodrębniania poszczególnych sekcji na stronie. Jeżeli zamierzasz, aby wszystkie cztery boki elementu HTML miały identyczny wygląd, możesz zastosować skrótowe właściwości obramowania.
Niemniej jednak, masz również możliwość użycia osobnych właściwości takich jak kolor obramowania, styl obramowania, a także indywidualnie dostosować szerokość każdego obramowania, aby nadać im unikalny charakter. Wykorzystując właściwość koloru obramowania, możemy określić jego barwę. Właściwość szerokości obramowania pozwala nam ustalić jego grubość, a za pomocą właściwości stylu obramowania, decydujemy, czy linia ma być przerywana, podwójna, czy ciągła.
Ponadto, możemy precyzyjnie sterować wyglądem poszczególnych granic, korzystając z właściwości takich jak `border-block-start` oraz `border-top`.
Podwójne obramowanie to konfiguracja, gdzie element HTML otaczają dwie równoległe linie. Przestrzeń między tymi liniami może pozostać transparentna lub zostać wypełniona kolorem bądź obrazem tła.
Dobrym przykładem użycia podwójnego obramowania może być przycisk rejestracji lub logowania.
Dlaczego warto stosować podwójne obramowanie?
- Wyróżnienie: Podwójne obramowania mogą znacznie podnieść czytelność i przejrzystość strony, skutecznie separując różne elementy. Za ich pomocą możemy oddzielić nagłówki, sekcje treści, czy stopki, ułatwiając nawigację po stronie.
- Estetyka: Użycie kontrastowych kolorów w podwójnym obramowaniu potrafi znacząco podnieść atrakcyjność wizualną elementu.
- Hierarchia: Podwójne obramowania pozwalają wyraźnie odróżnić elementy kluczowe od tych mniej istotnych, nadając stronie odpowiednią strukturę.
- Personalizacja: Dzięki podwójnym obramowaniom możemy łatwo dostosować wygląd strony, na przykład poprzez zmianę koloru czy szerokości każdej linii obramowania.
- Skupienie uwagi: Podwójne obramowanie jest świetnym sposobem na wyróżnienie ważnych linków lub przycisków, które mają na celu przyciągnięcie uwagi użytkownika.
Poniżej znajdziesz instrukcje, jak można zaimplementować podwójne obramowanie w CSS.
Zastosowanie właściwości stylu obramowania
Właściwość `border-style` kontroluje styl wszystkich czterech krawędzi elementu. W tym przypadku, wykorzystujemy słowo kluczowe `double`, aby nadać obramowaniu podwójny wygląd. Podczas użycia `double`, przestrzeń między dwoma liniami obramowania jest automatycznie wypełniana.
Dla celów demonstracyjnych, ustawimy szerokość obramowania na 15 pikseli, kolor na czerwony, a styl obramowania na podwójny.
Kod HTML:
<!DOCTYPE html>
<html lang="en">
<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" />
<title>Document</title>
<link rel="stylesheet" href="https://wilku.top/6-ways-to-create-a-double-border-in-css/./style.css" />
</head>
<body>
<div class="box"> <h2> Border Property</h2> </div>
</body>
</html>
Kod CSS:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: flex-start;
gap: 25px;
padding: 15px;
}
div {
width: 350px;
height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box {
border-width: 15px;
border-color: red;
border-style: double;
}
Efekt końcowy:
Zastosowanie funkcji `linear-gradient()`
Funkcja ta umożliwia ustawienie gradientu liniowego jako tła, co prowadzi do płynnego przejścia między dwoma kolorami wzdłuż linii prostej. Używamy słowa kluczowego `to`, aby zdefiniować początkowy punkt gradientu, choć jeżeli kierunek nie zostanie określony, domyślnie jest on ustawiany jako `to bottom` (do dołu).
Poniższy fragment kodu ustawia szerokość obramowania na 7 pikseli. Następnie definiujemy gradient liniowy jako tło każdej ze stron elementu.
Kod HTML:
<!DOCTYPE html>
<html lang="en">
<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" />
<title>Document</title>
<link rel="stylesheet" href="https://wilku.top/6-ways-to-create-a-double-border-in-css/./style.css" />
</head>
<body>
<div class="box"> <h2>linear-gradient() function</h2> </div>
</body>
</html>
Kod CSS:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: flex-start;
gap: 25px;
padding: 15px;
}
div{
width: 350px;
height: 350px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box{
border: 7px solid rgb(36, 85, 7);
background: linear-gradient(to top, #8f0404 7px, transparent 1px),
linear-gradient(to bottom, #8f0404 7px, transparent 1px),
linear-gradient(to left, #8f0404 7px, transparent 1px),
linear-gradient(to right, #8f0404 7px, transparent 1px);
}
Efekt końcowy:
Zastosowanie właściwości konturu
Kontur to linia rysowana wokół elementu, poza jego granicami. Efekt podwójnej granicy osiągamy, łącząc kontur z pojedynczym obramowaniem. Aby pomiędzy obramowaniem a konturem była wolna przestrzeń, konieczne jest zastosowanie przesunięcia konturu.
Kod HTML:
<!DOCTYPE html>
<html lang="en">
<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" />
<title>Document</title>
<link rel="stylesheet" href="https://wilku.top/6-ways-to-create-a-double-border-in-css/./style.css" />
</head>
<body>
<div class="box"> <h2>Outline Property</h2> </div>
</body>
</html>
Kod CSS:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: flex-start;
gap: 25px;
padding: 15px;
}
div{
width: 350px;
height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box{
border: 5px solid red;
outline: 5px solid blue;
outline-offset: -20px;
}
Wyrenderowana strona będzie wyglądać następująco:
Zastosowanie właściwości `box-shadow`
Właściwość `box-shadow` pozwala na dodawanie cienia dookoła ramki elementu. Możemy wykorzystać wiele cieni, rozdzielając je przecinkami. Warto zacząć od ustawienia przesunięcia i rozmycia na zero, a następnie dopasować wielkość cieni.
Kod HTML:
<!DOCTYPE html>
<html lang="en">
<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" />
<title>Document</title>
<link rel="stylesheet" href="https://wilku.top/6-ways-to-create-a-double-border-in-css/./style.css" />
</head>
<body>
<div class="box"> <h2>Box Shadow Property</h2> </div>
</body>
</html>
Kod CSS:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: flex-start;
gap: 25px;
padding: 15px;
}
div {
width: 350px;
height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box {
box-shadow:
0 0 0 5px red,
0 0 0 10px green;
}
Wyrenderowana strona będzie wyglądać następująco:
Zastosowanie właściwości `background-clip`
Właściwość `background-clip` decyduje, jak daleko powinno rozciągać się tło elementu. Może ono obejmować pole obramowania, pole dopełnienia lub pole zawartości.
Kod HTML:
<!DOCTYPE html>
<html lang="en">
<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" />
<title>Document</title>
<link rel="stylesheet" href="https://wilku.top/6-ways-to-create-a-double-border-in-css/./style.css" />
</head>
<body>
<div class="box"> <h2>Background-Clip Property</h2> </div>
</body>
</html>
Kod CSS:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: flex-start;
gap: 25px;
padding: 15px;
}
div {
width: 350px;
height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box {
border: 7px solid rgb(36, 85, 7);
padding: 5px;
background-clip: content-box;
background-color: rgb(238, 152, 130);
}
Wyrenderowana strona będzie wyglądać następująco:
Wykorzystanie pseudoelementów
Pseudoelementy, czyli selektory `::before` oraz `::after`, umożliwiają projektantom modyfikowanie wybranych części kodu HTML, bez konieczności dodawania dodatkowych znaczników.
Poniższy przykład ilustruje, jak można użyć pseudoelementów do stworzenia podwójnego obramowania:
Kod HTML:
<!DOCTYPE html>
<html lang="en">
<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" />
<title>Document</title>
<link rel="stylesheet" href="https://wilku.top/6-ways-to-create-a-double-border-in-css/./style.css" />
</head>
<body>
<div class="box"> <h2>pseudo property</h2> </div>
</body>
</html>
Kod CSS:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: flex-start;
gap: 25px;
padding: 15px;
}
div {
width: 150px;
height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box {
background-color: brown;
}
box{
background-color: rebeccapurple;
position: relative;
border: 8px solid red;
}
.box::before{
content: " ";
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border: 8px solid green;
border-width: 6px;
border-color: green white green white;
width: 150px;
height: 100px;
}
Wyrenderowana strona będzie wyglądać następująco:
Praktyczne zastosowania podwójnego obramowania w CSS
Efekt podwójnego obramowania CSS jest często spotykany na różnych stronach internetowych. Aby w pełni wykorzystać jego potencjał, warto połączyć go z innymi właściwościami CSS. Poniżej przedstawione są dwa przykłady jego praktycznego użycia:
Przycisk „Dodaj do koszyka” na Amazon
Amazon, będący gigantem e-commerce, wykorzystuje podwójne obramowanie CSS w swoim przycisku dodawania do koszyka, aby poprawić estetykę i zachęcić użytkowników do interakcji.
Podwójne obramowanie jest aktywowane podczas najechania kursorem na przycisk „Dodaj do koszyka”. Efekt ten pojawia się również, gdy użytkownik najeżdża kursorem na elementy menu nawigacyjnego Amazon.
Przyciski Mailchimp
Mailchimp, popularna platforma do e-mail marketingu, wykorzystuje efekt podwójnego obramowania w wielu miejscach swojej witryny. Na przykład, przyciski rejestracji i logowania mają podwójne obramowanie, które ma na celu wzmocnienie poczucia pilności u użytkowników.
Obramowanie u dołu tych przycisków staje się grubsze, gdy użytkownik najedzie na nie kursorem.
Dobre praktyki podczas stosowania efektu podwójnego obramowania w CSS
Podczas korzystania z podwójnego obramowania CSS łatwo jest przesadzić. Należy pamiętać, że celem jest ułatwienie nawigacji użytkownikom i wyróżnienie kluczowych elementów strony. Należy kierować się poniższymi praktykami:
- Spójność stylu: Jeśli zdecydujesz się użyć podwójnych obramowań, zadbaj o to, aby ich styl był jednolity na całej stronie. Na przykład, używaj ich na przyciskach nawigacyjnych, wezwaniach do działania oraz na przyciskach rejestracji/logowania. Elementy z podwójnym obramowaniem powinny mieć takie same kolory i grubości marginesów.
- Dostosowanie do różnych urządzeń: Upewnij się, że podwójne obramowania prawidłowo wyświetlają się na różnych urządzeniach, takich jak smartfony, komputery i tablety. Przetestuj stronę na różnych rozmiarach ekranów, aby upewnić się, że wygląd jest spójny.
- Umiar: Chociaż łatwo jest nadużywać nowego efektu CSS, podwójne obramowanie najlepiej sprawdza się w określonych sytuacjach. Stosuj je tylko w miejscach, gdzie faktycznie wnosi wartość do projektu.
Podsumowanie
W artykule przedstawiono różne sposoby na tworzenie podwójnego obramowania w CSS. Wybór konkretnej metody zależy od zamierzonego efektu i indywidualnych preferencji. Możliwe jest wykorzystanie jednej z przedstawionych metod lub połączenie kilku na tej samej stronie.
Zachęcamy do zapoznania się z dodatkowymi materiałami na temat kaskadowych arkuszy stylów, aby zgłębić swoją wiedzę w tym obszarze.
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.