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:




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:



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 :)

4 komentarze:

  1. Taka drobna sprawa a jak może zmienić wygląd bloga :)

    OdpowiedzUsuń
  2. Bardzo ciekawy totorial, ale ja chyba zostanę przy tradycyjnych napisach 😉

    OdpowiedzUsuń
  3. Nie odpowiadam w komentarzach, na takie zapytania. Proszę pisać na maila.

    OdpowiedzUsuń
  4. Charlotte_Müller15 stycznia 2018 00:00

    Witam, w jaki sposób można zmienić kolor paska górnego jak i kolumny bocznej w szablonie pastel life na własny kolor?

    OdpowiedzUsuń

- Komentarze takie jak: spam, obserwacja za obserwacje, prośby o klikanie w banery etc. zostają usuwane - ZAPAMIĘTAJ! MÓJ BLOG TO NIE TABLICA OGŁOSZEŃ
- Weryfikacja obrazkowa wyłączona

Copyright © Szablon wykonany przez My pastel life