HTML/CSS, Poradniki webdevelopera

Jak stworzyć obramowanie w HTML za pomocą CSS?

0

Podczas projektowania strony internetowej, nieraz zastanawiałeś się pewnie, jak ciekawie wyróżnić elementy klikalne, takie jak np. CTA (Call To Action) czy też przyciski ofertowe. Odpowiedź jest dosyć prosta, w celu wyróżnienia takich elementów najlepiej użyć odpowiedniego obramowania. W tym artykule dowiesz się jak tworzyć obramowania oraz przedstawimy ci jak można wykorzystać wiedzę w praktyce.

Właściwości obramowania

Aby nadać elementowi obramowanie, należy nadać mu właściwość:

border: grubość, typ obramowania, kolor

np.: border:1px solid #000

Jak widzimy, przedstawiony przykład wygeneruje nam czarne, pełne obramowanie dookoła akapitu. Sama właściwość border posiada wiele typów obramowania, poniżej przedstawiamy tabelę wraz z efektami:

Typ obramowania Efekt
dotted

Przykładowy tekst obramowania dotted

dashed

Przykładowy tekst obramowania dashed

solid

Przykładowy tekst obramowania solid

double

Przykładowy tekst obramowania double

groove

Przykładowy tekst obramowania groove

ridge

Przykładowy tekst obramowania ridge

inset

Przykładowy tekst obramowania inset

outset

Przykładowy tekst obramowania outset

none Brak obramowania
hidden Obramowanie ukryte

Składowe właściwości Border

Właściwość Border, łączy ze sobą trzy mniejsze właściwości, a mianowicie:

  • border-style – określa typ obramowania (zgodnie z przedstawionymi w tabeli powyżej)
  • border-width – szerokość obramowania
  • border-color – kolor obramowania

Bardzo możliwe, że zauważyłeś już zależność pomiędzy powyższymi elementami wypunktowanymi a pierwszym przykładem:

Border: 1px(border-width) solid (border-style) #000 (border-color)

Obramowanie częściowe

Stosując właściwość border, zawsze określamy efekty dla wszystkich 4 boków. W praktyce możemy nadać indywidualne style dla każdego boku, poprzez określenie, którego boku dotyczy styl np.:

<!DOCTYPE HTML>
<html lang="pl">
<head>
<title>Obramowanie CSS</title>
<style>
.border-paragraf 
{
border-left:3px solid #000;
border-right:3px solid red;
border-top:3px solid green;
border-bottom:3px solid blue;
}
</style>
</head>
<body>
<p class="border-paragraf">
Przykładowy tekst
</p>
</body>
</html>

Jak widzimy, w powyższym przypadku, każdy z naszych boków posiada odrębne oscylowanie.

Przykładowy tekst obramowania w mieszanych stylach

Zaokrąglenie obramowania

Bardzo popularnym efektem dla obramowań są zaokrąglenia. Zaokrąglić obramowanie można poprzez właściwość:

border-radius:wartość;

Powyższa właściwość dotyczy wszystkich boków, praktycznie możemy zaokrąglić tylko wybrane z nich np.:

<!DOCTYPE HTML>
<html lang="pl">
<head>
<title>Obramowanie CSS</title>
<style>
.zaokraglenie
{
border:1px solid red;
border-top-left-radius:15px;
border-bottom-right-radius:15px;
}
</style>
</head>
<body>
<p href="#" class="zaokraglenie">Zaokrąglenie obramowania</p>
</body>
</html>

Efektem naszego kodu będzie:

Akapit z zaokrąglonym obramowaniem

Praktyczny przykład

Posiadamy już wiedzę teoretyczną na temat obramowań, zróbmy coś praktycznego. W tej sekcji przedstawimy jak zrobić ciekawy przycisk przekierowujący do oferty.

Krok 1.

Tworzymy strukturę naszego pliku .html:

<!DOCTYPE HTML>
<html lang="pl">
<head>
<title>Obramowanie CSS</title>
<style>

</style>
</head>
<body>
<a href="#" class="przycisk">Przejdź do oferty</a>
</body>
</html>

Krok 2.

Czas dodać odpowiednie oscylowanie pomiędzy znacznikami <style></style> w sekcji <head></head>

a.przycisk {
text-decoration: none;
border: 1px solid #8c7f7f;
border-radius: 20px;
box-shadow: 1px 1px 5px #999;
padding: 11px 27px;
background: linear-gradient(to right, #0037ff , #3c4977);
color: #fff;
font-size: 15px;
}

Po dodaniu powyższego kodu, otrzymamy następujący efekt:

Efekt obramowanie

Krok 3.

Poniżej przedstawiamy cały koda aplikacji:

<!DOCTYPE HTML>
<html lang="pl">
<head>
<title>Obramowanie CSS</title>
<style>
a.przycisk {
    text-decoration: none;
    border: 1px solid #8c7f7f;
    border-radius: 20px;
    box-shadow: 1px 1px 5px #999;
    padding: 11px 27px;
    background: linear-gradient(to right, #0037ff , #3c4977);
    color: #fff;
    font-size: 15px;
}
</style>
</head>
<body>
<a href="#" class="przycisk">Przejdź do oferty</a>
</body>
</html>

Podsumowanie

Po zapoznaniu się z artykułem, posiadłeś wiedzę na temat obramowań w HTML. Samą wiedzę powinieneś rozwijać poprzez regularne ćwiczenia – projektowanie coraz bardziej zaawansowanych komponentów.

Jeżeli pojawiły się jakieś pytania, bądź coś jest niejasne, to zapraszamy do pozostawienia komentarza.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *