Vlastnost border v CSS umožňuje webovým návrhářům určit styl, šířku a barvu ohraničení prvku.
V CSS umožňuje přechod návrháři použít hladký přechod mezi dvěma nebo více barvami. Přechody můžete použít k vytvoření vizuálních efektů, jako je stínování, prolnutí barev a textura na prvcích na vaší webové stránce.
Border gradient je vlastnost CSS, která umožňuje vývojářům aplikovat přechod na ohraničení prvku.
Přechodové ohraničení vytváří vizuální efekt, kde se barva ohraničení mění z jedné barvy na druhou.
Table of Contents
Proč používat přechodové ohraničení?
Přechody okrajů byly mezi různými stylingovými funkcemi, které byly zavedeny v CSS3. Zde jsou některé z důvodů, proč byste jej měli mít ve své další webové aplikaci:
- Přechod ohraničení je flexibilní: Pomocí ohraničení s přechodem můžete vytvářet složité a vrstvené efekty. To je na rozdíl od jednobarevných okrajů, které jsou tuhé. Přechodové hranice jsou proto užitečné při řešení složitých rozvržení nebo tvarů, které vyžadují jemné vizuální návrhy.
- Vytvořte vizuální přitažlivost: Pomocí efektu přechodu ohraničení můžete do svých návrhů přidat poutavé vizuální efekty. Můžete například použít výrazné barevné kontrasty, které vám pomohou upozornit na konkrétní prvek na vaší webové stránce.
- Zajistěte bezproblémovou integraci: Ohraničení přechodu vám umožní bezproblémově integrovat ohraničení do pozadí vašeho prvku. Takový přístup dodá vaší webové stránce pevný a soudržný vzhled a ukáže dobře promyšlený design.
Jak přidat přechod okraje do CSS
Než si ukážeme, jak přidat přechod ohraničení, můžeme ilustrovat, jak přidat ohraničení k prvku HTML.
Můžeme použít tento kód;
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"> <link rel="stylesheet" type="text/css" href="https://wilku.top/how-to-add-border-gradient-in-css-3-tools/style.css"> <title>Document</title> </head> <body> <div class="box contains-border"> How to add a Border illustrated!!! </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;
}
Vykreslená stránka se zobrazí jako:
I když má výše uvedený kód ohraničení, není pro oči tak přitažlivý, protože je prázdný. Kolem našeho divu máme pouze 5px plný fialový okraj Rebecca.
Pomocí přechodů ohraničení můžeme udělat naši hranici přitažlivou. Existují různé přístupy k přidání hraničního gradientu. Níže jsou uvedeny některé z hlavních:
Použití hranic přechodu (lineární přechod, radiální přechod, kuželový přechod)
Ukážeme si, jak používat přechodové hranice třemi různými způsoby:
Lineární přechod
Lineární přechod vytváří hladký přechod mezi dvěma nebo více barvami v přímce. K demonstraci můžeme použít následující kód:
HTML
<!DOCTYPE html> <html> <head> <title>Linear Gradient Example</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"> Linear Gradient Illustration </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;
}
Zadali jsme styl ohraničení jako plný, což znamená, že ohraničení kolem našeho rámečku je plná čára. Šířka okraje v našem kódu je 10 pixelů.
Lineární gradient začíná rgb(143, 55, 0)“ a končí „rgb(66, 228, 250)“. Také jsme specifikovali úhel 45 stupňů. Šířka okrajového obrazového řezu je nastavena na „1“.
Vykreslená stránka se zobrazí jako:
Radiální gradient
Radiální přechod vytváří kruhový přechod vyzařující z centrálního bodu a umožňuje uživatelům přecházet z jedné barvy do druhé v prvku webové stránky.
Můžeme ilustrovat, jak přidat radiální gradient pomocí tohoto kódu:
HTML
<!DOCTYPE html> <html> <head> <title>Radial Gradient Example</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"> Radial Gradient Illustration </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 ohraničení našeho prvku jsme nastavili jako pevný. Také jsme dali našemu ohraničení šířku ohraničení 5px.
Radiální gradient začíná tmavě zeleným RGB(0,143,104) a končí jasně žlutou, označenou rgb(250,224,66).
„1“ na konci kódu představuje vlastnost border-image-repeat. Tato hodnota dává prohlížeči pokyn, aby opakoval obrázek okraje pouze jednou kolem okraje prvku.
Vykreslená stránka se zobrazí jako:
Kuželový gradient
Kuželový přechod vytváří kruhový barevný přechod. V tomto efektu přechod začíná od centrálního bodu a poté se šíří směrem ven a tvoří kruhový efekt.
HTML
<!DOCTYPE html> <html> <head> <title>Conic Gradient Example</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"> Conic Gradient Illustration </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;
}
V tomto kódu nastavíme styl ohraničení jako plný a přidělíme ohraničení šířku 7,5px. Vlastnost border-image nastavuje gradient okraje. Existuje sedm barev, počínaje červenou a konče rgb(255, 0, 38).
Obrázek ‚1‘ na konci kódu udává šířku okraje 1 pixel.
Vykreslená stránka se zobrazí jako:
Použití hraničních obrázků
Obrázky ohraničení nahrazují standardní pevné ohraničení prvků HTML. Obrazy ohraničení se používají k vytváření složitých návrhů namísto kombinování barev za účelem vytvoření přechodu ohraničení.
HTML
<!DOCTYPE html> <html> <head> <title>Border Images Example</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"> Border Images Illustration </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;
}
Naší vlastnosti border-width jsme dali šířku 15px a nastavili jsme border-style jako solid.
Hraniční obrazový řez nastavuje šířku a výšku hraničního rámečku na 60 % a 30 %.
Vykreslená stránka se zobrazí jako:
Použití těsnopisné vlastnosti
Zkrácená vlastnost umožňuje vývojářům stylovat více jednotlivých vlastností CSS pomocí jednoho řádku kódu. V tomto případě použijeme border-image k určení border-image-source a border-image-slice.
HTML
<!DOCTYPE html> <html> <head> <title>Shorthand Property Example</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"> Shorthand Property Illustration </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;
}
Vykreslená stránka se zobrazí jako:
CSS generátory přechodů okrajů
Generátory přechodů okrajů CSS pomáhají vývojářům přidávat efekty přechodů na prvky na webové stránce. Tyto generátory vám umožňují upravit nastavení, což znamená, že nemusíte vytvářet vše od začátku. Zde jsou některé z nástrojů, které můžete použít:
#1. CSS Gradient Generator – převod barev
Převod barev umožňuje generovat lineární nebo radiální gradient CSS kód s až pěti barvami. Kód přechodu CSS, který jste vygenerovali, lze použít jako ohraničení prvku nebo obrázek na pozadí.
S tímto generátorem můžete dělat následující;
- Vyberte až pět barev a použijte je v přechodu ohraničení.
- Vyberte směr přechodu. Nástroj má lineární i radiální gradienty.
- Pomocí funkce zastavení barev můžete rozhodnout, jak dojde k přechodu barev.
Jakmile dokončíte experimentování a generování kódu, můžete jej zkopírovat a použít na svém webu.
#2. CSS Border Gradient Generator-Nepoužité CSS
Unused-CSS pomáhá vývojářům generovat přechodové hranice, které mohou aplikovat na prvky bloku bez vytváření pseudoprvků nebo dalších prvků.
Můžete provést následující;
- Vyberte si mezi různými typy přechodů. Při práci s tímto nástrojem můžete snadno přepínat mezi radiálními a lineárními přechody.
- Karta Náhled. Nástroj vám umožňuje zobrazit náhled, jak bude přechod ohraničení vypadat na vaší webové stránce, když ji přizpůsobíte.
- Barva se zastaví. Tento nástroj usnadňuje rozhodování o tom, jak budou probíhat přechody pro různé barvy.
- Přizpůsobení velikosti okraje. Pomocí tohoto nástroje můžete snadno upravit velikost ohraničení a poloměr ohraničení.
Jakmile budete s vygenerovaným kódem spokojeni, můžete jej zkopírovat a použít ve svém projektu.
#3. Generátor přechodových hranic – Amit Sheen
Tento nástroj má osm různých oblastí pozadí, což umožňuje vývojářům vytvářet efekty zaobleného přechodu ohraničení.
Můžete dosáhnout následujícího;
- Vytvářejte přechodové animace. Nástroj umožňuje generovat přechodové animace, které přecházejí mezi dvěma nebo více barvami.
- Můžete zahrnout kód JavaScript. Pokud váš přizpůsobitelný prvek potřebuje kód JS, můžete jej vždy najít a přizpůsobit z ovládacího panelu.
- Živý náhled. Změny kódu můžete zobrazit, když jej přizpůsobujete.
Kód můžete zkopírovat a vložit po přizpůsobení efektů přechodu ohraničení podle svých představ.
Závěr
Při navrhování webových stránek můžete použít kterýkoli z výše uvedených přístupů k přidání přechodového ohraničení k vašim prvkům. Výběr přístupu se může lišit v závislosti na preferencích, úrovni dovedností a povaze prvku, který navrhujete.
Můžete také použít různé přístupy pro různé prvky na stejné webové stránce.
Podívejte se, jak vytvořit dvojité ohraničení v CSS, abyste zlepšili vizuální přitažlivost své webové stránky.