Border Gradient hozzáadása a CSS-hez [+3 Tools]

Szerző:
Tweet
Share
Share
Pin

A CSS border tulajdonsága lehetővé teszi a webes tervezők számára, hogy meghatározzák az elemek szegélyeinek stílusát, szélességét és színét.

A CSS-ben a színátmenet lehetővé teszi a tervező számára, hogy egyenletes átmenetet alkalmazzon két vagy több szín között. A színátmenetek segítségével vizuális effektusokat hozhat létre, például árnyékolást, színkeverést és textúrát a weboldal elemein.

A Border gradient egy CSS-tulajdonság, amely lehetővé teszi a fejlesztők számára, hogy színátmenetet alkalmazzanak egy elem szegélyére.

A színátmenetes szegély vizuális hatást hoz létre, ahol a szegély színe egyik színről a másikra változik.

Miért érdemes színátmenetes szegélyt használni?

A szegély színátmenetek a CSS3-ban bevezetett különféle stílusszolgáltatások közé tartoztak. Íme néhány ok, amiért érdemes lenne a következő internetes alkalmazásban:

  • A szegélyszínátmenet rugalmas: A színátmenet szegélyeivel összetett és réteges hatásokat hozhat létre. Ez eltér az egyszínű szegélyektől, amelyek merevek. A színátmenetes szegélyek tehát hasznosak olyan összetett elrendezések vagy alakzatok kezelésekor, amelyek árnyalt látványterveket igényelnek.
  • Hozzon létre vizuális vonzerőt: A színátmenetes szegélyeffektus használatával szemet gyönyörködtető vizuális effektusokat adhat a tervekhez. Használhat például félkövér színkontrasztokat, hogy felhívja a figyelmet weboldala egy adott elemére.
  • Zökkenőmentes integráció: A színátmenetes szegélyek lehetővé teszik a szegély zökkenőmentes integrálását az elem hátterébe. Ez a megközelítés szilárd és összefüggő megjelenést kölcsönöz weboldalának, amely jól átgondolt dizájnt mutat.

Border Gradient hozzáadása a CSS-hez

Mielőtt bemutatnánk, hogyan adhatunk szegély gradienst, szemléltethetjük, hogyan adjunk szegélyt egy HTML-elemhez.

Használhatjuk ezt a kódot;

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;

}

A megjelenített oldal így fog megjelenni:

  Hogyan játsszunk Nintendo DS játékokat Linuxon a DesmuME segítségével

Annak ellenére, hogy a fenti kódnak van szegélye, nem annyira vonzó a szemnek, mint inkább üres. Csak egy 5 képpontos tömör Rebecca lila szegély van a div körül.

A szegély színátmenetek segítségével tetszetőssé tehetjük szegélyünket. Különféle megközelítések léteznek a szegély gradiens hozzáadására. Íme néhány a legfontosabbak közül:

Gradiens szegélyek használata (lineáris gradiens, radiális gradiens, kúpos gradiens)

A Gradient Borders három különböző módon történő használatát szemléltetjük:

Lineáris Gradiens

A lineáris színátmenet egyenletes átmenetet hoz létre két vagy több szín között egy egyenes vonalban. A következő kóddal demonstrálhatjuk:

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;

}

A keret stílusát tömörként adtuk meg, ami azt jelenti, hogy a dobozunk körüli szegély egy folytonos vonal. A kódunkon a keret szélessége 10 képpont.

A lineáris gradiens rgb(143, 55, 0)”-vel kezdődik, és „rgb(66, 228, 250)”-re végződik. Meghatároztunk egy 45 fokos szöget is. A szegélyes képszelet szélessége „1”-re van állítva.

A megjelenített oldal így fog megjelenni:

Radiális gradiens

A sugárirányú színátmenet egy központi pontból sugárzó körkörös színátmenetet hoz létre, amely lehetővé teszi a felhasználók számára, hogy a weboldal elemében egyik színről a másikra váltsanak.

Ezzel a kóddal szemléltethetjük, hogyan adjunk hozzá radiális gradienst:

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;

}

Elemünk szegélystílusát tömörnek állítottuk be. A szegélyünknek 5 képpont szélességet is adtunk.

A sugárirányú gradiens sötétzöld RGB(0,143,104) színnel kezdődik és élénksárgával végződik, amelyet rgb(250,224,66) jelöl.

  Még mindig létezik a Myspace?

A kód végén található „1” a border-image-repeat tulajdonságot jelöli. Ez az érték arra utasítja a böngészőt, hogy a szegélyképet csak egyszer ismételje meg az elem szegélye körül.

A megjelenített oldal így fog megjelenni:

Kúpos gradiens

A kúpos gradiens körkörös színátmenetet hoz létre. Ennél a hatásnál az átmenet egy központi pontból indul, majd kifelé terjed, körkörös hatást alkotva.

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;

}

Ebben a kódban a szegélystílust tömörnek állítjuk be, és a szegélynek 7,5 képpont szélességet adunk. A border-image tulajdonság beállítja a border gradienst. Hét szín létezik, pirossal kezdődően és rgb(255, 0, 38) színnel végződve.

A kód végén található „1” ábra a keret 1 pixel szélességét adja meg.

A megjelenített oldal így fog megjelenni:

Szegélyképek használata

A szegélyképek felváltják a HTML-elemek szabványos tömör szegélyeit. A szegélyképeket összetett tervek létrehozására használják, ahelyett, hogy a színeket kombinálják a szegély színátmenet létrehozásához.

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;

}

A szegélyszélesség tulajdonságunknak 15 képpont szélességet adtunk, és a szegélystílust szilárdnak állítottuk be.

A keret-képszelet a szegélydoboz szélességét és magasságát 60%-ra, illetve 30%-ra állítja be.

A megjelenített oldal így fog megjelenni:

Gyorsírási tulajdonság használata

A rövidített tulajdonság lehetővé teszi a fejlesztők számára, hogy több egyedi CSS-tulajdon stílusát alakítsák ki egyetlen kódsor használatával. Ebben az esetben a border-image-t használjuk a border-image-source és border-image-slice megadására.

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;

}

A megjelenített oldal így fog megjelenni:

CSS határ gradiens generátorok

A CSS határátmenet-generátorok segítenek a fejlesztőknek színátmenet-effektusokat hozzáadni a weboldal elemeihez. Ezek a generátorok lehetővé teszik a beállítások módosítását, vagyis nem kell mindent a semmiből létrehozni. Az alábbiakban felsorolunk néhány használható eszközt:

  Valószínűleg rosszul csúsztatja az ujját az iPhone X-en. Így kell csinálni

#1. CSS Gradient Generator – Színek konvertálása

A Színek konvertálása lehetővé teszi lineáris vagy radiális gradiens CSS-kód létrehozását legfeljebb öt színnel. Az Ön által generált CSS gradiens kód használható egy elem szegélyeként vagy háttérképként.

Ezzel a generátorral a következőket teheti;

  • Válasszon ki legfeljebb öt színt, és használja őket a szegély színátmenetben.
  • Válassza ki a gradiens irányát. Az eszköz lineáris és radiális gradiensekkel is rendelkezik.
  • A színleállítás funkció segítségével eldöntheti, hogy a színek átmenete hogyan történjen.

Miután befejezte a kísérletezést és a kód generálását, kimásolhatja és felhasználhatja webhelyén.

#2. CSS Border Gradient Generator – Nem használt CSS

A Unused-CSS segít a fejlesztőknek gradiens szegélyek létrehozásában, amelyeket pszeudoelemek vagy extra elemek létrehozása nélkül alkalmazhatnak a blokkelemekre.

A következőket teheti;

  • Válasszon a különböző színátmenet-típusok közül. Ezzel az eszközzel egyszerűen válthat a radiális és a lineáris gradiens között.
  • Előnézet lap. Az eszköz segítségével megtekintheti, hogyan fog megjelenni a szegély gradiens a weboldalán, amikor személyre szabja.
  • A szín leáll. Ez az eszköz megkönnyíti annak eldöntését, hogy a különböző színek átmenetei hogyan történjenek.
  • Szegély méretének testreszabása. Ezzel az eszközzel egyszerűen testreszabhatja a szegély méretét és sugarát.

Ha elégedett a generált kóddal, kimásolhatja és felhasználhatja a projektben.

#3. Gradiens Border Generator – Amit Sheen

Ez az eszköz nyolc különböző háttérterülettel rendelkezik, amelyek lehetővé teszik a fejlesztők számára, hogy lekerekített színátmenetes szegélyeffektusokat hozzanak létre.

A következőket érheti el;

  • Gradiens animációk létrehozása. Az eszköz lehetővé teszi olyan színátmenet-animációk létrehozását, amelyek két vagy több szín között váltanak át.
  • JavaScript kódot is beilleszthet. Ha a testreszabható elemnek JS-kódra van szüksége, azt mindig megtalálhatja és testreszabhatja a vezérlőpultról.
  • Élő előnézet. A kód testreszabása során megtekintheti a módosításokat.

A szegély gradiens effektusainak tetszés szerinti testreszabása után a kódot másolhatja és beillesztheti.

Következtetés

Weboldalai tervezésekor a fenti módszerek bármelyikével színátmenetes szegélyt adhat az elemekhez. A megközelítés választása a preferenciáktól, a képzettségi szinttől és a formázandó elem természetétől függően változhat.

Különböző megközelítéseket is alkalmazhat ugyanazon weboldal különböző elemeihez.

Nézze meg, hogyan hozhat létre kettős szegélyt a CSS-ben, hogy javítsa weboldala vizuális vonzerejét.

Tweet
Share
Share
Pin