Border-image w CSS3

By /

CSS

CSS3 wprowadza wiele nowych możliwości stylizacji, w tym bardzo elastyczną właściwość border-image, która umożliwia użycie obrazu jako ramki dla elementów HTML. Dzięki border-image można tworzyć zaawansowane, atrakcyjne wizualnie ramki, które są zdecydowanie bardziej złożone niż standardowe ramki definiowane przez border-style.

Przykład użycia border-image

W poniższym przykładzie pokażemy, jak zastosować border-image do stworzenia ramki wokół elementu <div>. Skorzystamy z prostego obrazu ramki, który zostanie rozciągnięty na potrzeby naszego elementu.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Border-Image w CSS3</title>
    <style>
        .border-image-example {
            /* Ścieżka do obrazu użytego jako ramka */
            border-image-source: url('border-image.png');
            /* Sposób wypełniania ramki: 30% obrazu z każdej strony */
            border-image-slice: 30;
            /* Powtarzanie obrazu ramki */
            border-image-repeat: stretch;
            /* Szerokość ramki */
            border-width: 20px;
            /* Wymagane do wyświetlenia ramki */
            border-style: solid;
            /* Wewnętrzny odstęp */
            padding: 20px;
            /* Tekst do wyświetlenia wewnątrz ramki */
            text-align: center;
        }
    </style>
</head>
<body>

<div class="border-image-example">
    Tekst wewnątrz elementu z ramką obrazową
</div>

</body>
</html>

Właściwości border-image

  • border-image-source: określa obraz, który zostanie użyty jako ramka.
  • border-image-slice: definiuje, jak obraz ma być podzielony i rozciągnięty lub powtórzony wokół elementu. Można tu podać wartości w procentach, pikselach lub w formie liczbowej, które określają, jakie części obrazu zostaną użyte dla krawędzi i narożników.
  • border-image-width: określa szerokość ramki obrazowej.
  • border-image-outset: definiuje, o ile ramka obrazowa ma wystawać poza obszar granic elementu.
  • border-image-repeat: kontroluje, jak fragmenty obrazu mają być powtarzane lub rozciągane, aby wypełnić przestrzeń ramki. Dostępne wartości to stretch (rozciąganie), repeat (powtarzanie) i round (powtarzanie z dopasowaniem do rozmiaru).

Podsumowanie

Właściwość border-image w CSS3 otwiera przed projektantami i programistami nowe możliwości tworzenia zaawansowanych, estetycznie atrakcyjnych ramki bez konieczności stosowania dodatkowych elementów HTML czy grafik. Dzięki łatwej integracji z istniejącym kodem HTML i CSS, border-image jest potężnym narzędziem w arsenale każdego twórcy stron internetowych, pozwalającym na bardziej kreatywne i złożone projekty.

Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs video WebDeveloper w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.

Powiązane artykuły

Scroll to Top