Obramowanie CSS - Tekstu, tabeli, obrazka

Na wstępnie w tej lekcji omówię obramowanie CSS (border), które pozwala dodawać ramki wokół elementów HTML. Co więcej obramowanie może poprawić wygląd i strukturę strony internetowej, podkreślając ważne elementy lub oddzielając sekcje treści.

Podstawowe właściwości obramowania

border-width – Określa szerokość obramowania.
border-style – Określa styl obramowania (np. solid, dashed, dotted).
border-color – Określa kolor obramowania.

Składnia CSS dla obramowania

element {
  border-width: 2px;
  border-style: solid;
  border-color: black;
}

Alternatywnie można użyć skróconej właściwości border, która łączy wszystkie trzy właściwości:

W przypadku ramki wartość ma postać:

element {
  border: 2px solid black;
}

border-width – szerokość obramowania

Szerokość obramowania może być ustawiona za pomocą jednostek takich jak piksele (px), em (em), procenty (%) i inne. CSS obsługuje również wartości predefiniowane, takie jak thin, medium i thick.

element {
  border-width: 2px;
}

border-style – styl obramowania

Styl obramowania określa, jak obramowanie będzie wyglądać.

element {
  border-style: solid;
}

Dostępne style:

none – brak obramowania
dotted
dashed
solid
double
groove
ridge
inset
outset

border-color – kolor obramowania

Kolor obramowania może być ustawiony za pomocą nazw kolorów, wartości RGB, HEX lub HSL.

element {
  border-color: red;
}

border – składnia skrócona

Na dodatek właściwość border pozwala na jednoczesne ustawienie szerokości, stylu i koloru obramowania.

element {
  border: 2px dashed blue;
}

Obramowanie dla każdej strony

border-top – Obramowanie górne.
border-right – Obramowanie prawe.
border-bottom – Obramowanie dolne.
border-left – Obramowanie lewe.

element {
  border-top: 2px solid red;
  border-right: 2px dashed green;
  border-bottom: 2px dotted blue;
  border-left: 2px double black;
}

Stylowanie obramowania

border-radius – zaokrąglone narożniki

Właściwość border-radius pozwala na zaokrąglenie rogów obramowania. Dodatkowo można ustawić jednolite zaokrąglenie dla wszystkich rogów lub różne wartości dla każdego rogu.

element {
  border: 2px solid red;
  border-radius: 10px;
}

Zaokrąglone narożniki obramowania.

Można także określić różne wartości dla każdego rogu:

element {
  border: 2px solid red;
  border-radius: 10px 20px 30px 40px; /* góra-lewa, góra-prawa, dół-prawa, dół-lewa */
}

box-shadow – cień obramowania

Właściwość box-shadow pozwala dodać cień do obramowania elementu. Ponadto składnia box-shadow zawiera przesunięcie cienia w poziomie i pionie, rozmycie, rozszerzenie oraz kolor.

element {
  border: 2px solid red;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}

Cień obramowania.

border-image – obramowanie jako obraz lub gradient

CSS pozwala na użycie obrazów jako obramowań jak również na tworzenie gradientów na obramowaniach za pomocą właściwości. Co więcej można użyć gradientu liniowego lub radialnego jako obraz obramowania.

Obrazek jako obramowanie

Właściwość border-image pozwala na użycie obrazu jako obramowania. W tym przypadku składnia jest bardziej skomplikowana i wymaga kilku kroków:

Określenie źródła obrazu.
Ustalenie jak obraz ma być podzielony na sekcje.
Określenie jak obraz ma być dopasowany do krawędzi.

element {
  border: 10px solid transparent;
  border-image: url(border.png) 50 round;
}

Gradient jako obramowanie

.element {
  border: 10px solid;
  border-image: linear-gradient(to right, red, yellow) 1;
}

Zaokrąglone narożniki obramowania.

Animacje obramowania

CSS pozwala również na animowanie obramowania, co może dodać dynamiczności stronom internetowym.

@keyframes animate-border {
  0% {
    border-color: red;
  }
  50% {
    border-color: yellow;
  }
  100% {
    border-color: red;
  }
}

.element {
  border: 5px solid red;
  animation: animate-border 3s infinite;
}

Animacja obramowania.

Obramowanie CSS w praktyce

Obramowanie tekstu

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Proste Obramowanie</title>
  <style>
    p {
      width: 200px;
      height: 100px;
      border: 5px dashed blue;
      padding: 10px;
      text-align: center;
    }
  </style>
</head>
<body>
  <p>Tekst będzie w ramce przerywanej w kolorze niebieskim</p>
</body>
</html>

Tekst będzie w ramce przerywanej w kolorze niebieskim

Obramowanie tabeli

Możemy dodatkowo dostosować obramowanie tabeli, aby było bardziej stylowe, na przykład poprzez dodanie zaokrąglonych rogów lub cienia.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Stylowe Obramowanie Tabeli</title>
  <style>
    table {
      width: 100%;
      border-collapse: collapse;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Dodanie cienia */
    }

    th, td {
      border: 1px solid #ddd;
      padding: 12px;
      text-align: left;
    }

    th {
      background-color: #f4f4f4;
      border-bottom: 2px solid #ddd; /* Grubsza linia pod nagłówkami */
    }

    tbody tr:nth-child(even) {
      background-color: #f7f7f7; /* Kolor tła dla co drugiego wiersza */
    }

    tbody tr:hover {
      background-color: #f1f1f1; /* Kolor tła przy najechaniu myszką */
    }
  </style>
</head>
<body>
  <table>
    <thead>
      <tr>
        <th>Nazwa</th>
        <th>Wiek</th>
        <th>Miasto</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Jan Kowalski</td>
        <td>28</td>
        <td>Warszawa</td>
      </tr>
      <tr>
        <td>Anna Nowak</td>
        <td>34</td>
        <td>Kraków</td>
      </tr>
      <tr>
        <td>Piotr Wiśniewski</td>
        <td>23</td>
        <td>Gdańsk</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

Nazwa	Wiek	Miasto
Jan Kowalski	28	Warszawa
Anna Nowak	34	Kraków
Piotr Wiśniewski	23	Gdańsk

Obramowanie obrazka

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Obramowanie Obrazu</title>
  <style>
    img {
      border: 5px solid green;
      border-radius: 10px;
    }
  </style>
</head>
<body>
  <img src="image.jpg" />
</body>
</html>

Obramowanie CSS – podsumowanie

Z pewnością obramowanie w CSS ułatwia tworzenie atrakcyjnych wizualnie i czytelnych stron internetowych. Co więcej pozwala to na dodawanie różnorodnych obramowań do elementów, które mogą być dostosowane pod względem szerokości, stylu, koloru czy zaokrąglenia. Dlatego dzięki obramowaniom można łatwo wyodrębniać wizualnie elementy, dodawać akcenty wizualne i poprawiać ogólną estetykę strony.

Zachęcam do eksperymentowania z różnymi właściwościami obramowań, aby w pełni wykorzystać ich potencjał w swoich projektach.

Share Tweet LinkedIn Email