Tutorial: Jak dodać kod css i zrobić datę w kółku

Hej kochani! W dzisiejszym poście pokaże wam jak zrobić datę w kółku za pomocą kodów css. Na pierwszy rzut oka może się to wydawać nieco skomplikowane, ale tak na prawdę jest proste i myślę, że każdy powinien sobie z tym poradzić! Mam w planach zrobić więcej postów dotyczących kodów i gadżetów na bloga!

Jak dodać kod css?

Data w kółku

Kod css, który należy wpisać:

.date-header span {width: 47px; height: 47px; border-radius: 100%;}

   Pogrubiony tekst pisany kursywą to liczba pixeli, którą możemy zmienić.

Jaśniejszy tekst informuje nas o liczbie procentów, które możemy zmienić.

{UWAGA! Tylko liczba 100% daje nam w pełni zaokrąglone rogi!}

Aby zmienić kolor daty należy wpisać kod:

 .date-header span {background-color: #ffd9d9;}  

Możemy wpisać inny kod koloru, który wybrać najlepiej z palety RGB dostępnej na tej stronie --> klik

{UWAGA! Jeśli chcecie, aby kolor był przeźroczysty tak jak na moim blogu, zamiast #dowolnykolor wpisujecie transparent}

Położenie tekstu w dacie:

  .date-header span {text-align:  center;}

Aby zmienić położenie tekstu w dacie, w miejsce jaśniejszej czcionki możemy wpisać:

- center - wyśrodkowanie

- right - do prawej

- left - do lewej 

Dokładniejsze ustawienie położenia daty:

 .date-header span {margin: -11px -100px -85px -55px;}

 Aby dokładnie ustawić położenie daty co do pixela, pogrubione wartości pisane kursywą możecie zmienić.