Importanța marginilor în designul web
Marginile joacă un rol vital în proiectarea și dezvoltarea web, având capacitatea de a atrage atenția utilizatorilor sau de a structura conținutul pe o pagină web. Atunci când se dorește aplicarea aceleiași margini pe toate cele patru laturi ale unui element HTML, se poate utiliza o prescurtare.
Pe de altă parte, pentru a personaliza marginile, se pot utiliza proprietăți specifice precum culoarea, stilul și lățimea, creând astfel margini distincte. Pentru a seta culoarea unei margini, se folosește proprietatea dedicată, lățimea se definește cu proprietatea corespunzătoare, iar stilul (punctat, dublu sau solid) se specifică prin proprietatea stilului marginii.
De asemenea, se pot viza laturi individuale ale marginilor, utilizând proprietăți precum border-block-start și border-top.
O margine dublă se caracterizează prin prezența a două linii paralele care înconjoară un element HTML. Aceste linii sunt separate printr-un spațiu care poate fi transparent sau umplut cu o imagine sau o culoare de fundal.
De exemplu, un buton de înregistrare/autentificare poate fi evidențiat cu o margine dublă.
De ce să folosești o margine dublă?
- Separare: Marginile duble pot îmbunătăți lizibilitatea și scanabilitatea unei pagini web prin segregarea diferitelor elemente HTML. De exemplu, ele pot fi folosite pentru a delimita antetul, corpul și subsolul unei pagini web.
- Atractivitate vizuală: Prin utilizarea unor culori contrastante, marginile duble pot crește atractivitatea vizuală a anumitor elemente.
- Evidențierea ierarhiei: Marginile duble pot distinge clar elementele importante de cele mai puțin importante într-o pagină web.
- Personalizare: Marginile duble permit crearea unor modele unice și personalizate, oferind opțiuni de modificare a culorii sau lățimii fiecărei linii.
- Subliniere: Prin intermediul marginilor duble, se poate atrage atenția asupra unor link-uri sau butoane specifice de pe o pagină web.
Există mai multe modalități de a crea margini duble în CSS, prezentate în continuare.
Utilizarea proprietății `border-style`
Proprietatea `border-style` determină stilul tuturor celor patru margini ale unui element. Pentru a crea o margine dublă, se folosește valoarea `double`. Când se utilizează `double`, se creează automat un spațiu între cele două linii ale marginii.
Pentru a ilustra, vom seta lățimea marginii la 15px, culoarea la roșu și vom specifica stilul ca fiind dublu.
Cod HTML:
<html lang="ro">
<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>Exemplu Margine</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>Proprietatea Margine</h2> </div>
</body>
</html>
Cod 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;
}
Rezultatul va fi o margine dublă roșie în jurul elementului div.
Utilizarea funcției `linear-gradient()`
Funcția `linear-gradient()` creează un gradient liniar ca imagine de fundal, realizând o tranziție treptată între două culori de-a lungul unei linii drepte. Prin utilizarea cuvântului cheie `to`, se marchează punctul de start al gradientului. Dacă nu este specificat, valoarea implicită este în jos.
În exemplul următor, vom defini o lățime a marginii de 7px și vom aplica gradientul liniar ca fundal pe fiecare latură a casetei.
Cod HTML:
<html lang="ro">
<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>Exemplu Gradient</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>Funcția linear-gradient()</h2> </div>
</body>
</html>
Cod 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);
}
Rezultatul va fi o margine dublă creată cu ajutorul gradientului liniar.
Utilizarea proprietății `outline`
O contur este o linie trasată în exteriorul marginii unui element. Aceasta oferă un efect similar cu o margine dublă, prin combinarea unei contur cu o margine simplă. Pentru a crea spațiul între margine și contur, se utilizează proprietatea `outline-offset`.
Cod HTML:
<html lang="ro">
<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>Exemplu Contur</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>Proprietatea Outline</h2> </div>
</body>
</html>
Cod 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;
}
Rezultatul va fi un efect de margine dublă creat cu ajutorul proprietății contur.
Utilizarea proprietății `box-shadow`
Proprietatea `box-shadow` adaugă un efect de umbră în jurul cadrului unui element. Se pot defini mai multe umbre, separate prin virgulă. Pentru a crea un efect de margine dublă, se setează offset-ul și estomparea la zero, iar apoi se definește dimensiunea și culoarea umbrelor.
HTML:
<html lang="ro">
<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>Exemplu Umbră</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>Proprietatea Box Shadow</h2> </div>
</body>
</html>
Cod 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;
}
Rezultatul va fi un efect de margine dublă creat cu umbre.
Utilizarea proprietății `background-clip`
Proprietatea `background-clip` definește până unde se extinde fundalul unui element. Extensia poate fi `border-box`, `padding-box` sau `content-box`.
Cod HTML:
<html lang="ro">
<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>Exemplu Fundal</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>Proprietatea Background-Clip</h2> </div>
</body>
</html>
Cod 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);
}
Rezultatul va fi o margine dublă creată prin controlul extinderii fundalului.
Utilizarea pseudo-elementelor
Pseudo-elementele, reprezentate de selectoarele `::before` și `::after`, permit stilizarea unor părți ale unui document HTML fără a modifica codul HTML. Acestea pot fi folosite pentru a crea o margine dublă.
Cod HTML:
<html lang="ro">
<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>Exemplu Pseudo</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>Proprietatea Pseudo</h2> </div>
</body>
</html>
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;
}
Rezultatul va fi o margine dublă creată prin utilizarea pseudo-elementului `::before`.
Exemple practice de margini duble în CSS
Proprietatea de margine dublă este folosită pe multe site-uri web. Pentru cele mai bune rezultate, trebuie combinată cu alte proprietăți CSS. Iată două exemple de margini duble în acțiune:
Butonul „Coș” de pe Amazon
Amazon este un lider în comerțul electronic. Butonul său „coș” folosește o margine dublă pentru un efect vizual atractiv, invitând utilizatorii la acțiune.
Marginile duble apar atunci când cursorul trece peste butonul „coș”. Ele sunt vizibile și la trecerea cursorului peste meniul de navigare Amazon.
Butoanele Mailchimp
Mailchimp este un serviciu de marketing prin e-mail, care permite crearea, lansarea și urmărirea campaniilor. Site-ul său web folosește efecte de margine dublă în diverse secțiuni. Butoanele de înregistrare și conectare au margini duble pentru a crea un sentiment de urgență în timp ce utilizatorii navighează.
Marginea de jos a acestor butoane devine mai groasă atunci când un utilizator trece cu cursorul peste ele.
Cele mai bune practici pentru utilizarea efectului CSS cu margine dublă
Este ușor să exagerezi cu efectele CSS, dar scopul este de a asigura o navigare ușoară pentru utilizatori și de a pune accentul pe zonele cheie. Urmați aceste bune practici:
- Utilizați un stil consecvent: Asigurați-vă că stilul marginilor duble este consecvent pentru toate elementele. De exemplu, se pot folosi pe butoanele de navigare, de îndemn la acțiune și de înregistrare/conectare. Pe cât posibil, păstrați aceleași culori și grosimi ale marginilor între elementele cu margini duble.
- Asigurați-vă compatibilitatea: Testați pagina web pe diferite dispozitive (smartphone-uri, computere, tablete) pentru a vă asigura că marginile duble se afișează corect la diferite dimensiuni de ecran.
- Utilizați cu moderație: Nu abuzați de un efect CSS nou descoperit. Marginile duble se potrivesc unor elemente specifice, așa că utilizați această proprietate acolo unde adaugă valoare designului.
Concluzie
Am prezentat principalele abordări pentru crearea unei margini duble în CSS. Alegerea depinde de efectul dorit și de preferințe. Se poate folosi o singură metodă sau o combinație de mai multe stiluri pe aceeași pagină.
Puteți consulta aceste resurse CSS pentru a înțelege în detaliu Foile de Stil în Cascadă.