Jak zrobić napis z obramowaniem

poniedziałek, 8 stycznia 2018

Na blogu, przedstawiłam Wam już kilkanaście sposobów na to jak poprawić wygląd swojego bloga oraz jak wyróżnić dany element za pomocą prostych zapisów w CSS. Dzisiaj przedstawię Wam kolejny sposób na to, jak można wyróżnić dane elementy na naszym blogu, a dokładnie - jak wyróżnić nasz tekst za pomocą obramowania, a to wszystko powstanie za pomocą CSSa :)

Zaczynamy!

1. Pierwsze i najważniejsze - wybieramy, co ma być wyróżnione - nagłówki gadżetów, tytuł posta, czy może podtytuł we wpisie.

2. Teraz musimy znaleźć selektor do naszego elementu. W tym wypadku pomoże nam wpis z selektorami CSS.

3. Przechodzimy do motyw - zaawansowane - dodaj arkusz CSS

W arkuszu CSS dodajemy taki kod:


{font-family: Open Sans; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; -webkit-text-fill-color: #D8D484; -webkit-text-stroke-width: 1.4px; -webkit-text-stroke-color: #ABC25F; font-size: 25px;}

Jak widzicie, nie ma on selektora. Selektor dla naszego elementu musimy dodać przed { i tak o to, kod dla tytułu wpisu będzie prezentował się tak:

h3.post-title a {font-family: Open Sans; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; -webkit-text-fill-color: #D8D484; -webkit-text-stroke-width: 1.4px; -webkit-text-stroke-color: #ABC25F; font-size: 25px;}

Zróbmy sobie analizę naszego kodu:

font-family - rodzaj fontu
letter-spacing - odstęp między literami
test-transform - transformacja tekstu - w kodzie ustawione jest na duże litery. Wystarczy wpisać none zamiast uppercase, aby pozbyć się tego efektu
font-weight - grubość fontu
-webkit-text-fill-color: - kolor naszego tekstu (wypełnienie)
-webkit-text-stroke-width: - grubość naszego obramowania
-webkit-text-stroke-color: - kolor naszego obramowania
font-size: - wielkość naszego fontu

Wszystkie wartości są zmienne.

Efekty dla niektórych elementów na blogu 

Tytuł wpisu

Data

Tytuł gadżetu 

Zapamiętaj!

Efekt, zależny jest od tego, jaką ustawimy grubość obramowania oraz grubość fontu :)

Jeśli spodobał Ci się wpis, przekaż go dalej :)