Jak dodać gradient obramowania w CSS [+3 Tools]

Właściwość border w CSS pozwala projektantom stron internetowych określić styl, szerokość i kolor obramowań elementu.

W CSS gradient umożliwia projektantowi zastosowanie płynnego przejścia między dwoma lub więcej kolorami. Gradientów można używać do tworzenia efektów wizualnych, takich jak cieniowanie, mieszanie kolorów i tekstura elementów na stronie internetowej.

Gradient obramowania to właściwość CSS, która umożliwia programistom zastosowanie gradientu do obramowania elementu.

Gradientowe obramowanie tworzy efekt wizualny, w którym kolor obramowania zmienia się z jednego koloru na inny.

Dlaczego warto używać obramowania gradientowego?

Gradienty krawędzi były jednymi z różnych funkcji stylizacyjnych wprowadzonych w CSS3. Oto niektóre z powodów, dla których powinieneś mieć to w swojej następnej aplikacji internetowej:

  • Gradient obramowania jest elastyczny: za pomocą obramowań gradientowych można tworzyć złożone i warstwowe efekty. Różni się to od obramowań w jednolitym kolorze, które są sztywne. Gradientowe obramowania są zatem przydatne w przypadku złożonych układów lub kształtów, które wymagają dopracowanych projektów wizualnych.
  • Stwórz atrakcyjność wizualną: Używając efektu obramowania gradientu, możesz dodawać do swoich projektów przyciągające wzrok efekty wizualne. Możesz na przykład użyć odważnych kontrastów kolorów, aby zwrócić uwagę na określony element na swojej stronie internetowej.
  • Zapewnij bezproblemową integrację: Gradientowe obramowania umożliwiają bezproblemową integrację obramowania z tłem elementu. Takie podejście sprawi, że Twoja strona będzie wyglądać solidnie i spójnie, pokazując przemyślany projekt.

Jak dodać Gradient Obramowania w CSS

Zanim pokażemy, jak dodać gradient obramowania, możemy zilustrować, jak dodać obramowanie do elementu HTML.

Możemy użyć tego kodu;

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;

}

Wyrenderowana strona będzie wyglądać następująco:

Mimo że powyższy kod ma obramowanie, nie jest tak atrakcyjny dla oka, ponieważ jest pusty. Wokół naszego elementu div mamy tylko solidną fioletową ramkę Rebecca o wielkości 5 pikseli.

Możemy uczynić naszą granicę atrakcyjną za pomocą gradientów granic. Istnieją różne podejścia do dodawania gradientu granicznego. Oto niektóre z głównych:

Korzystanie z granic gradientu (gradient liniowy, gradient promieniowy, gradient stożkowy)

Zilustrujemy, jak używać Gradient Borders na trzy różne sposoby:

Gradient liniowy

Gradient liniowy tworzy płynne przejście między dwoma lub więcej kolorami w linii prostej. Możemy użyć następującego kodu do zademonstrowania:

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;

}

Określiliśmy styl obramowania jako pełny, co oznacza, że ​​obramowanie wokół naszego pudełka jest ciągłą linią. Szerokość obramowania w naszym kodzie to 10px.

Gradient liniowy zaczyna się od rgb(143, 55, 0)”, a kończy na „rgb(66, 228, 250)”. Określiliśmy również kąt 45 stopni. Szerokość wycinka obrazu obramowania jest ustawiona na „1”.

Wyrenderowana strona będzie wyglądać następująco:

Gradient promieniowy

Gradient radialny tworzy okrągły gradient rozchodzący się promieniście od centralnego punktu, umożliwiając użytkownikom przejście z jednego koloru do drugiego w elemencie strony internetowej.

Możemy zilustrować, jak dodać gradient radialny za pomocą tego kodu:

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;

}

Ustawiliśmy styl obramowania naszego elementu jako solidny. Nadaliśmy również naszemu obramowaniu szerokość obramowania 5px.

Gradient radialny zaczyna się od ciemnozielonego RGB(0,143,104) i kończy na jasnożółtym, oznaczonym przez rgb(250,224,66).

„1” na końcu kodu reprezentuje właściwość powtarzania obrazu obramowania. Ta wartość nakazuje przeglądarce powtórzyć obraz obramowania tylko raz wokół obramowania elementu.

Wyrenderowana strona będzie wyglądać następująco:

Gradient stożkowy

Gradient stożkowy tworzy okrągłe przejście kolorów. W tym efekcie przejście zaczyna się od centralnego punktu, a następnie rozchodzi się na zewnątrz, tworząc efekt kołowy.

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;

}

W tym kodzie ustawiamy styl obramowania jako jednolity i nadajemy obramowaniu szerokość 7,5 piksela. Właściwość border-image ustawia gradient obramowania. Istnieje siedem kolorów, zaczynając od czerwonego, a kończąc na rgb (255, 0, 38).

Cyfra „1” na końcu kodu podaje szerokość obramowania wynoszącą 1 piksel.

Wyrenderowana strona będzie wyglądać następująco:

Korzystanie z obrazów obramowania

Obrazy obramowań zastępują standardowe jednolite obramowania elementów HTML. Obrazy obramowania są używane do tworzenia złożonych projektów zamiast łączenia kolorów w celu utworzenia gradientu obramowania.

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;

}

Nadaliśmy naszej właściwości border-width szerokość 15px i ustawiliśmy styl obramowania jako jednolity.

Wycinek obrazu obramowania ustawia szerokość i wysokość pola obramowania odpowiednio na 60% i 30%.

Wyrenderowana strona będzie wyglądać następująco:

Korzystanie z właściwości skróconych

Skrócona właściwość umożliwia programistom stylizowanie wielu indywidualnych właściwości CSS przy użyciu jednego wiersza kodu. W tym przypadku używamy obrazu obramowania do określenia źródła obrazu obramowania i wycinka obrazu obramowania.

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;

}

Wyrenderowana strona będzie wyglądać następująco:

Generatory gradientów granic CSS

Generatory gradientów granic CSS pomagają programistom dodawać efekty gradientu do elementów na stronie internetowej. Te generatory pozwalają dostosować ustawienia, co oznacza, że ​​nie musisz tworzyć wszystkiego od zera. Oto niektóre z narzędzi, których możesz użyć:

# 1. Generator gradientów CSS — konwersja kolorów

Konwertowanie kolorów umożliwia generowanie liniowego lub radialnego kodu CSS z maksymalnie pięcioma kolorami. Wygenerowany kod gradientu CSS może służyć jako obramowanie elementu lub obraz tła.

Za pomocą tego generatora możesz wykonać następujące czynności;

  • Wybierz maksymalnie pięć kolorów i użyj ich w gradiencie obramowania.
  • Wybierz kierunek gradientu. Narzędzie ma gradienty liniowe i promieniowe.
  • Możesz zdecydować, w jaki sposób nastąpi przejście kolorów, korzystając z funkcji zatrzymania koloru.

Po zakończeniu eksperymentowania i wygenerowaniu kodu możesz go skopiować i użyć w swojej witrynie.

#2. CSS Border Gradient Generator – nieużywany CSS

Unused-CSS pomaga programistom generować granice gradientu, które mogą zastosować do elementów blokowych bez tworzenia pseudoelementów lub dodatkowych elementów.

Możesz wykonać następujące czynności;

  • Wybierz spośród różnych typów gradientów. Podczas pracy z tym narzędziem możesz łatwo przełączać się między gradientami promieniowymi i liniowymi.
  • Zakładka Podgląd. Narzędzie pozwala wyświetlić podgląd, jak gradient obramowania będzie wyglądał na Twojej stronie internetowej po jej dostosowaniu.
  • Zatrzymuje się kolor. To narzędzie ułatwia decydowanie o tym, jak będą przebiegać przejścia dla różnych kolorów.
  • Dostosowanie rozmiaru obramowania. Za pomocą tego narzędzia można łatwo dostosować rozmiar obramowania i promień obramowania.

Gdy będziesz zadowolony z wygenerowanego kodu, możesz go skopiować i użyć w swoim projekcie.

#3. Gradient Border Generator – Amit Sheen

To narzędzie ma osiem różnych obszarów tła, umożliwiając programistom tworzenie zaokrąglonych efektów obramowania gradientu.

Możesz osiągnąć następujące;

  • Twórz animacje gradientowe. Narzędzie pozwala generować animacje gradientowe, które przechodzą między dwoma lub więcej kolorami.
  • Możesz dołączyć kod JavaScript. Jeśli Twój dostosowywalny element wymaga kodu JS, zawsze możesz go znaleźć i dostosować z poziomu panelu sterowania.
  • Podgląd na żywo. Możesz przeglądać zmiany w kodzie podczas jego dostosowywania.

Możesz skopiować i wkleić kod po dostosowaniu efektów gradientu obramowania do własnych upodobań.

Wniosek

Podczas projektowania stron internetowych możesz zastosować dowolne z powyższych podejść, aby dodać gradientowe obramowanie do swoich elementów. Wybór podejścia może się różnić w zależności od preferencji, poziomu umiejętności i charakteru elementu, który stylizujesz.

Możesz także zastosować różne podejścia do różnych elementów na tej samej stronie internetowej.

Sprawdź, jak utworzyć podwójne obramowanie w CSS, aby poprawić atrakcyjność wizualną strony.