KODY CSS

Zaczynamy zabawe:

PAMIĘTAJCIE, ABY NAJPIERW ZROBIĆ KOPIE ZAPASOWĄ WASZEGO SZABLONU !!!

Postaram SIĘ codziennie dodac jakis nowy kod.

Klikamy utwórz / przywróć kopie zapasową i wyskakuje nam polecenie. Klikamy pobierz szablon i już.

Jeśli Już zrobiliście kopie zapasową szablonu, możemy zacząć zabawę z kodami. 

Przechodzimy zrobić szablon i klikamy w dostosuj

Pojawi SIĘ SIĘ (obrazek niżej) i klikamy Wagowo zaawansowane, szukamy Myszka w dół dodaj arkusz CSS i na Białym Polu wklejamy kody Które nas interesują.

Postaram SIĘ dodac obrazki (różnice) przed í po, wklejeniu kodów.

 1  Wyśrodkowanie nagłówka

.header-wewnętrzna div .widget, .header-wewnętrzna img {

margin-left: auto;

margin-right: auto;

}

2. Wyśrodkowanie Stopki wpisu

.post-footer {text-align: center; }

3.Podkreślenie tytułów Gadżetów

.sidebar .widget h2 {

text-transform: wielkimi literami;

letter-spacing: 1px;

border-bottom: 1px solid # 000;

margin-left: 0px;

margin-right: 0px;

! Padding: 5px 0px 0px 0px Ważne;

margin-bottom: 5px;

}

4. Zmianą wyglądu polecanego wpisu

# FeaturedPost1 {background: # d5a6bd;

text-align: center;

kolor: #fff;}

# FeaturedPost1 h2 {font-size: 15px; background: #fff; padding: 15px; text-align: center;}

# FeaturedPost1 a: link {font-size: 20px; padding: 10px; kolor: #fff;}

5.   Wyjustowanie tekstu możemy wpisie 

.column-center-wewnętrzna {text-align: justify;}

6. Brak podkreślenia linków

: Hover {text-decoration: none;}

7. Usunięcie tytułów Gadżetów 

.column-right-zewnętrzna h2 { 

display: none; 

}

ZDJĘCIA W Postach

8.Wysunięcie ZDJĘCIA po najechaniu  myszką.

.post img {-webkit-Przejście: wszystkie 1s złagodzić;

-moz-Przejście: wszystkie 1s złagodzić;

-o-Przejście: wszystkie 1s złagodzić;

}

.post img: hover {-o-PrzejScie: wszystkie 0.6S;

 -moz-Przejście: wszystkie 0.6S;

-webkit-Przejście: wszystkie 0.6S;

-moz-transform: scale (1,1);

-o-transform: scale (1.1);

-webkit-transform: scale (1,1); }

9. Zaokrąglone Narożniki zdjęć 

.post img {

! Padding: 0px Ważne;

border-radius: 10px;

}

10.Obracające zdjęcie po najechaniu myszka

.post img {

-moz-Przejście: wszystkie 0.8s łatwość-in-out;

-webkit-Przejście: wszystkie 0.8s łatwość-in-out;

-o-Przejście: wszystkie 0.8s łatwość-in-out;

-ms-Przejście: wszystkie 0.8s łatwość-in-out;

Przejście: wszystkie 0.8s łatwość-in-out;

}

.post img: hover {

-moz-transform: rotate (360deg);

-webkit-transform: rotate (360deg);

-o-transform: rotate (360deg);

-ms-transform: rotate (360deg);

transform: rotate (360deg);

}

11.Ścięte Boki zdjęć

.post img {

! Padding: 0px Ważne;

border-radius: 0 15% 0 15%;

}

12.Czarno-białe zdjęcie po najechaniu myszka

.post img

{-webkit-Przejście:

1s WSZYSTKIE złagodzić; -moz-Przejście:

1s WSZYSTKIE złagodzić; -o-Przejście: wszystkie 1s złagodzić;

-ms-Przejście: wszystkie 1s złagodzić;

Przejście: wszystkie 1s złagodzić; }

.post img: hover {-webkit filtr:

W skali Bu szarości (100%); }

13.Efekt zamglonego ZDJĘCIA po najechaniu 

.post img {opacity: 1;

Przejście: krycie 0.4s łatwość-in-out;

-o-Przejście: krycie 0.4s łatwość-in-out;

-moz-Przejście: krycie 0.4s łatwość-in-out;

-webkit-Przejście: krycie 0.4s łatwość-in-out;

}

.post img: hover {

Zadymienie: 0,70;

Przejście: krycie 0.4s łatwość-in-out;

-o-Przejście: krycie 0.4s łatwość-in-out;

-moz-Przejście: krycie 0.4s łatwość-in-out;

-webkit-Przejście: krycie 0.4s łatwość-in-out;

}

14. Wyróżnienie pierwszej Litery Mamy wpisie

.post-Tytuł: first-letter {font-size: 50px; color: # 888; font-family: Times New Roman;}

# 888 kolor czcionki

Rozmiar czcionki 50px

Times New Roman wybrana czcionka.

Tutaj możemy sami sobie wybierać.
Ja zmieniłam kolor czcionki TYLKO.

15. Ramki posta (Wpis)

a) Linia ciągła:
.post {border-style: Ciało Stałe;}

b) Linia podwójna:
.post {border-style: podwójne;}

c) Linia kreskowana:
.post {border-style: przerywana;}

d) Linia kropkowana:
.post {border-style: przerywana;}

                 Komentarze
Na podglądzie sprawdzajcie CZY JEST różnica

16.Kolor TLA:
.comment p {background-color: # afa4b2;}

17. Przezroczystość TLA:
.comment p {opacity: 0.6;}

18. Marginesy:
.comment p {padding: 20px;}

19. Ramki komentarzy:
a) Linia ciągła:
.comment p {border-style: Stały;}

b) Linia podwójna:
.comment p {border-style: podwójne;}

c) Linia kreskowana:
.comment p {border-style: przerywana;}

d) Linia kropkowana:
.comment p {border-style: przerywana;}

20. Grubość Ramki:
.comment p {border-width: 2px;}

21. Kolor tekstu i Ramki Wagowo komentarzach:
.comment p {color: # 000000;}

22 .Zaokrąglone Rogi:
.comment p {border-radius: 90px 90px 40px 40px;}

Pamiętajcie PO #wpisujecie numer koloru jaki chcecie uzyskać.