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ć.



1 komentarz:

  1. Anonimowy23/11/16

    dzięki wielkie, potrzebowałam kodu do zdjęć

    OdpowiedzUsuń

Copyright © 2014 Degustująca , Blogger