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.