Gotowe kody CSS - Wygląd posta

Czas na zabawę z kodami CSS. W rzeczywistości nie jest to jakoś strasznie skomplikowane jak się wydaje a naprawdę dodaje blogowi oryginalny charakter. Edycja w bloggerze jest bardzo prosta. Wystarczy wejść w Szablon>Dostosuj>Zaawansowane. Na dole listy jest "Dodaj arkusz CSS" czy coś w tym stylu. Tam wklejacie kody i modyfikujecie je według własnego pomysłu.
Na początek podstawa czyli posty. Wyjaśnię wam w punktach jak przerobić tło posta na własne widzimisie.

UWAGA! Zanim ustalisz tło posta musisz skasować standardowe tło które wybrał blogger tzn. wchodzisz w "Zaawansowane" i znajdujesz opcję post. Tam wybierasz tło posta transparentne (kliknij w kolorowy kwadracik, otworzy ci się paleta kolorów, tam wybierz opcję "Przezroczyste"). To samo z obramowaniem.

Zajmijmy się tymi kodami. Teksty pogrubione można dostosowywać.

1. Tło

a) kolor

.post {background-color: #5a5555;}

Kliknij tutaj aby zobaczyć paletę kolorów z potrzebnymi kodami html

 b) obrazek w tle
.post {background-image: url(adres do obrazka);}

Przezroczystość tła
.post {opacity: 0.7;}

Podpowiedź: Najładniej wygląda przezroczystość 0.5, post wtedy jest półprzezroczysty, ale każdy może zmieniać według własnej woli. Post nie przezroczysty ma jednostkę liczbową 1.0

2. Cienie

a) tekstu

 .post {text-shadow: 2px 2px 5px #5a5555 }

 Podpowiedź: Zmieniając pogrubione liczby zmieniasz rozmiar i kierunek padającego cienia (w lewo/prawo/w dół). Możesz też bez problemu zmieniać kolor cienia.

b)  obramowania posta
.post {box-shadow:0px 0px 2px black}

Tu tak samo zmieniasz kąt padania cienia i kolor, ale tym razem nie potrzebujesz kodu html tylko znajomości języka angielskiego ;)

3. Zaokrąglone rogi posta

.post {border-radius: 90px 90px 5px 5px;}

Parametry odpowiadają wszystkim czterem rogom. Tu możesz troszkę pobawić się z liczbami. Polecam zaokrąglenia od 0 do 90.

4. Marginesy (żeby tekst nie przyklejał się do ramek)

.post {padding: 10px;}

5. Obramowanie posta

a) linia ciągła

.post {border-style: solid;}

b) linia przerywana

 .post {border-style: dashed;}

c) linia kropkowana

 .post {border-style: dotted;}

d) linia podwójna

 .post {border-style: dotted;}

 6. Grubość obramowania

 a) cienkie:
.post {border-width: thin;}

b) średnie:
.post {border-width: medium;}

c) grube:
.post {border-width: thick;}

 

Podobają się wam takie instrukcje? Jeśli wam się spodobało nie zapomnijcie wspomóc mnie udostępnieniami ^^

_Loren_ / NyanCat~