Outline w CSS3

By /

Html CSS

Outline w CSS3 jest właściwością służącą do dodawania linii dookoła elementu, podobnej do obramowania (border). Kluczową różnicą jest to, że outline nie wpływa na układ elementów (nie zajmuje przestrzeni), a jego głównym zastosowaniem jest podkreślenie elementu dla celów nawigacyjnych lub wizualnych.

Podstawowe właściwości outline:

  • outline-style: Określa styl linii (np. solid, dashed, dotted).
  • outline-width: Definiuje grubość linii.
  • outline-color: Określa kolor linii.
  • outline-offset: Pozwala na ustawienie odstępu między outline a krawędzią elementu.

Przykład użycia outline w CSS3

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Outline w CSS3</title>
    <style>
        .box {
            width: 200px;
            height: 150px;
            background-color: lightblue;
            margin: 20px;
            padding: 10px;
            border: 2px solid navy;
        }
        
        .box:focus {
            /* Dodanie outline przy fokusie */
            outline: 3px solid red;
            outline-offset: 5px;
        }
        
        .custom-outline {
            /* Niestandardowy outline */
            outline: 4px dashed green;
            outline-offset: 8px;
        }
    </style>
</head>
<body>
    <div tabindex="0" class="box">Kliknij mnie, aby zobaczyć outline.</div>
    <div class="box custom-outline">Box z niestandardowym outline.</div>
</body>
</html>

Dlaczego warto używać outline?

Outline jest szczególnie przydatny do zaznaczania elementów interaktywnych, takich jak linki czy przyciski, zwłaszcza gdy są one aktywne lub w stanie fokusu. Dodatkowo, stosowanie właściwości outline zamiast border pozwala na uniknięcie problemów z układem strony, ponieważ outline nie zajmuje dodatkowej przestrzeni.

Podsumowanie

Outline w CSS3 jest potężnym narzędziem do wyróżniania elementów na stronie bez wpływania na ich rozmiar lub położenie. Dzięki możliwości precyzyjnego kontrolowania stylu, grubości, koloru i odstępu, deweloperzy mogą używać outline do poprawy użyteczności i dostępności stron internetowych, zapewniając jednocześnie atrakcyjny wizualnie sposób na zaznaczenie ważnych elementów interfejsu użytkownika.

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

Powiązane artykuły

Scroll to Top