Outlines

Outline w CSS3 to właściwość stosowana do rysowania linii wokół elementów, która nie zajmuje miejsca w układzie strony, w przeciwieństwie do obramowania (border). Outlines są szczególnie użyteczne do zaznaczania elementów, na przykład podczas nawigacji tabulatorem lub do celów stylistycznych, nie wpływając na układ elementów. W tej lekcji przyjrzymy się różnym wartościom, które można zastosować do właściwości outline w CSS3, wraz z przykładami kodu ilustrującymi ich zastosowanie.

Przykład użycia outline

Poniżej znajduje się przykład pokazujący różne zastosowania właściwości outline w CSS3. Przykład ten obejmuje kilka elementów, do których zastosowano różne style obramowań.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Przykłady użycia outline w CSS3</title>
    <style>
        /* Styl bazowy dla wszystkich elementów z outline */
        .outline-example {
            margin: 20px;
            padding: 10px;
            width: 200px;
            text-align: center;
        }

        /* Outline zdefiniowany kolorem, stylem i grubością */
        .solid-outline {
            outline: 2px solid red;
        }

        /* Outline przerywany */
        .dashed-outline {
            outline: 3px dashed green;
        }

        /* Outline kropkowany */
        .dotted-outline {
            outline: 4px dotted blue;
        }

        /* Outline z offsetem */
        .offset-outline {
            outline: 2px solid purple;
            outline-offset: 5px;
        }

        /* Usunięcie outline */
        .none-outline {
            outline: none;
        }
    </style>
</head>
<body>
    <div class="outline-example solid-outline">
        Solid Outline
    </div>
    <div class="outline-example dashed-outline">
        Dashed Outline
    </div>
    <div class="outline-example dotted-outline">
        Dotted Outline
    </div>
    <div class="outline-example offset-outline">
        Outline z offsetem
    </div>
    <div class="outline-example none-outline">
        Brak Outline
    </div>
</body>
</html>

Opis przykładu

  • Solid Outline: Prosty, ciągły kontur wokół elementu.
  • Dashed Outline: Przerywany kontur, tworzący efekt przerywanej linii.
  • Dotted Outline: Kropkowany kontur, tworzący efekt linii składającej się z kropek.
  • Outline z Offsetem: Kontur z dodatkowym odstępem (outline-offset) między konturem a krawędzią elementu, tworzący efekt przestrzeni między elementem a jego konturem.
  • Brak Outline: Demonstruje usunięcie konturu poprzez ustawienie outline: none.

Różne wartości dla outline

Właściwość outline może przyjmować różne wartości określające styl (solid, dashed, dotted), kolor (np. red, green, blue) i grubość (np. 2px, 3px). Dodatkowo, outline-offset pozwala na dodanie przestrzeni między konturem a elementem.

Podsumowanie

Outlines w CSS3 oferują elastyczny sposób na dodanie wizualnego wyróżnienia do elementów HTML, nie wpływając na ich układ na stronie. Dzięki różnym stylom, kolorom i możliwości dodania offsetu, deweloperzy mogą tworzyć interesujące efekty wizualne, jednocześnie poprawiając dostępność i użytkowość stron internetowych.

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

Poprzedni
Następny
Scroll to Top