Wykorzystanie obramowań i tła w HTML5

Jest właściwości szeroko stosowane w HTML i CSS, takie jak obramowania i tła, Od czasu włączenia CSS3 zostały one ulepszone w taki sposób, że możemy mieć np. zaokrąglone krawędzie, chociaż jest to coś, co wygląda na dość proste, nie było to dostępne w przeszłości, więc teraz te funkcjonalności ułatwiają w dość rozbudowany sposób praca zarówno projektantów, jak i programistów.
Stosując krawędź musimy wziąć pod uwagę 3 bardzo ważne atrybuty, są to:

• szerokość granicy: inicjuje szerokość obramowania.
• styl obramowania: inicjuje styl rysowania obramowania.
• kolor ramki: inicjuje kolor obramowania.

Po zapoznaniu się z właściwościami spójrzmy na prosty przykład zastosowania krawędzi:

 Przykład
Istnieje wiele różnych rodzajów owoców - tylko ponad 500 odmian bananów. Zanim dodamy niezliczone rodzaje jabłek, pomarańczy i innych dobrze znanych owoców, stajemy przed tysiącami wyborów.

Aby zdefiniować szerokość granicy, możemy pracować na podstawie 3 pomiarów, według jednostek miary, takich jak piksele, cm, em; według wartości procentowych i według ustawień wstępnych, takich jak, cienkie, średnie i grube.
Rodzaj obramowania definiujemy stylem, do tego mamy następujące opcje:

• Żaden
• przerywany
• kropkowany
• podwójnie
• rowek
• wstawka
• początek
• grzbiet
• solidny

Zobaczmy teraz graficznie, co oznacza każdy z tych stylów:

Istnieje również możliwość nałożenia obramowania i stylu na każdą ze stron elementu, do tego posłużymy się poniższą instrukcją:
[kolor = # d3d3d3] szerokość-góry-obramowania
w stylu obramowania-góra
border-top-color [/ color]
obramowanie-dolna-szerokość
styl obramowania na dole
kolor-dolny-obramowania
[kolor = # d3d3d3] szerokość-obramowania-lewego
styl obramowania z lewej strony
kolor-lewy-obramowania [/ kolor]
[kolor = # d3d3d3] obramowanie-prawo-szerokość
obramowanie-prawo-styl
border-right-color [/ color]
Gdzie szczyt odnosi się do góry, spód do niższego, lewo w lewo i dobrze po prawej.
Dzięki temu możemy nawet uzyskać kombinacje typów krawędzi w tym samym elemencie.
Zobaczmy przykład tego ostatniego:

 Przykład
Istnieje wiele różnych rodzajów owoców - tylko ponad 500 odmian bananów. Zanim dodamy niezliczone rodzaje jabłek, pomarańczy i innych dobrze znanych owoców, stajemy przed tysiącami wyborów.

Kod daje nam następujące wyniki:

Aby stworzyć zaokrąglone krawędzie, możemy użyć właściwości promień co pozwala nam wskazać promień krzywizny krawędzi.
Zobaczmy, jak zaimplementować kod:

 Przykład
Istnieje wiele różnych rodzajów owoców - tylko ponad 500 odmian bananów. Zanim dodamy niezliczone rodzaje jabłek, pomarańczy i innych dobrze znanych owoców, stajemy przed tysiącami wyborów.

Powoduje to następujący ekran:

Na tym kończymy ten samouczek dotyczący tych elementów, możemy teraz wprowadzać ulepszenia do naszego CSS bez większego wysiłku i przy użyciu najnowocześniejszych narzędzi technologicznych.Podobał Ci się i pomógł ten samouczek?Możesz nagrodzić autora, naciskając ten przycisk, aby dać mu pozytywny punkt