Границе су кључне у веб дизајну/развоју јер могу скренути пажњу на кориснике или одвојити садржај на веб страници. Можете користити скраћеницу ивице када желите да све четири ивице на ХТМЛ елементу буду исте.
С друге стране, такође можете да користите боју ивице, стил ивице и својства дужине ивице како бисте сваку ивицу учинили другачијим/јединственим. Када желите да наведете боју ивице, користимо боју ивице, користимо ширину ивице да одредимо ширину ивице и одређујемо да ли ће ивица бити испрекидана, двострука или пуна помоћу својства бордер-стиле.
Такође можете циљати појединачне границе користећи својства као што су бордер-блоцк-старт и бордер-топ
Двострука ивица је када две паралелне линије окружују ХТМЛ елемент. Две линије су раздвојене празнином која се може оставити провидном или попуњена сликом или бојом позадине.
На пример, можемо имати дугме за пријаву/пријаву окружено двоструком ивицом.
Преглед садржаја
Зашто двострука граница?
- Раздвајање: Можете користити двоструку ивицу да повећате читљивост и могућност скенирања веб странице одвајањем различитих ХТМЛ елемената. На пример, можете имати двоструке ивице за раздвајање елемената као што су заглавља, тело и подножја на веб страници.
- Визуелна привлачност: Можете користити различите/контрастне боје на двоструким ивицама да бисте различите елементе учинили визуелно привлачнијим.
- Прикажи хијерархију: Можете јасно разликовати важне и мање важне елементе на веб страници користећи двоструке ивице.
- Лако прилагођавање: можете креирати персонализоване и јединствене дизајне уз помоћ двоструких ивица. На пример, можете променити боју или ширину сваке линије.
- Нагласак: Користећи својство двоструке ивице, можете скренути пажњу на одређене везе или дугмад на веб страници.
Можете користити следеће начине да направите двоструку ивицу у ЦСС-у.
Коришћење својства у стилу границе
Својство бордер-стиле поставља стил четири ивице елемента. У овом случају користимо кључну реч доубле за подешавање стила. Када користимо кључну реч доубле, између две ивице се креира аутоматски паддинг.
У сврху демонстрације, поставићемо ширину ивице на 15 пиксела. Такође ћемо изабрати нашу боју ивице да буде црвена и означићемо стил ивице као двоструки.
ХТМЛ код:
<!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>
ЦСС код:
*{
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;
}
Излаз ће бити:
Коришћење функције линеар-градиент().
Ова функција поставља линеарни градијент као позадину. Резултат је постепени прелаз између две боје дуж праве линије. Користимо кључну реч то да означимо почетну тачку линије градијента. Ако редослед није специфициран, подразумевана вредност је на дну.
Код испод даје нашем пољу ширину границе од 7 пиксела. Затим можемо одредити линеарни градијент на својству позадине сваке стране кутије.
ХТМЛ код:
<!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>
ЦСС код:
*{
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);
}
Излаз ће бити:
Коришћење својства Оутлине
Контура је линија повучена изван границе елемента. Тиме се постиже ефекат двоструке границе, а можемо користити обрис и једну ивицу. Морамо да користимо оутлине-оффсет да бисмо додали размак између својстава границе и обриса.
ХТМЛ код:
<!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>
ЦСС код:
*{
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;
}
Приказана страница ће се појавити на следећи начин:
Коришћење својства бок-схадов
Својство бок-схадов додаје ефекат сенке око оквира елемента. Можете имати више ефеката сенке оквира одвојених зарезима. Почните тако што ћете се уверити да су подешавања офсета и замућења нула, а затим подесите сенке на одговарајуће величине.
ХТМЛ:
<!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>
ЦСС код:
*{
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;
}
Приказана страница ће се појавити на следећи начин:
Коришћење својства бацкгроунд-цлип
Својство бацкгроунд-цлип одређује колико далеко позадина треба да се протеже унутар елемента. Екстензија може бити на оквир-боксу, допунској кутији или кутији са садржајем.
ХТМЛ код:
<!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>
ЦСС код:
*{
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);
}
Приказана страница ће се појавити на следећи начин:
Коришћење псеудо елемената
Псеудоелементи, представљени селекторима ::бефоре и ::афтер, омогућавају веб дизајнерима да стилизују делове ХТМЛ документа без додавања ознака у код.
Можемо илустровати како користити псеудоелементе за креирање двоструке ивице користећи овај код:
ХТМЛ документ
<!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>
ЦСС
*{
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;
}
Приказана страница ће се појавити на следећи начин:
Примери ЦСС са двоструком ивицом из стварног света
ЦСС својство двоструке границе се користи на многим веб локацијама. Морате комбиновати својство двоструке границе са другим ЦСС својствима да бисте извукли најбоље од тога. Следе два примера двоструке границе у акцији;
Дугме „Копа“ на Амазону
Амазон је једно од највећих имена у простору е-трговине. Дугме за корпе има ЦСС са двоструком ивицом за визуелну естетику и подстиче кориснике да делују.
Двоструке ивице се појављују када корисник пређе мишем преко дугмета „колица“. Границе су такође видљиве када пређете мишем преко Амазоновог навигационог менија.
Маилцхимп дугмад
Маилцхимп је услуга е-маил маркетинга која омогућава корисницима да креирају, покрећу и прате кампање. Његова веб страница користи ефекте двоструке границе на различитим одељцима. Дугмад за пријаву и пријаву имају двоструке ивице да ‘створе’ осећај хитности док корисници претражују.
Граница на доњој страни ових дугмади се дебља док корисник пролази курсором кроз њих.
Најбоље праксе када се користи ЦСС ефекат са двоструком ивицом
Лако је да се занесете када користите двоструки ЦСС. Крајњи циљ је да обезбедите да се корисници лако крећу и да нагласе главне области на вашем сајту. Следите ове најбоље праксе:
- Користите конзистентан стил: Ако користите двоструке ивице, уверите се да је стил конзистентан на свим елементима. На пример, дупле ивице се могу користити на дугмадима за навигацију, позив на акцију и пријављивање/пријаву. Ако је могуће, уверите се да имате исте боје и дебљине маргина на елементима са двоструким ивицама.
- Уверите се да ове двоструке границе функционишу на различитим уређајима: Живимо у свету у коме људи прегледавају веб странице са паметних телефона, рачунара и таблета. Тестирајте да бисте осигурали да се двоструке ивице приказују како се очекује на различитим величинама екрана.
- Користите их штедљиво: Можда ћете бити у искушењу да претерано користите одређени ЦСС ефекат након што га први пут откријете. Међутим, двоструки ЦСС одговара различитим елементима на веб страници. Користите ово својство само у областима где додаје вредност дизајну.
Закључак
Истакли смо главне приступе које можете користити за креирање двоструке границе у ЦСС-у. Избор приступа зависиће од тога шта желите да постигнете двоструком границом и ваших преференција. Можете одлучити да се држите једног или комбинације неколико стилова са двоструком ивицом на истој страници.
Можете погледати ове ЦСС ресурсе да бисте детаљно разумели каскадне табеле стилова.