KODY CSS
Zaczynamy zabawe:
PAMIĘTAJCIE, ABY NAJPIERW ZROBIĆ KOPIE ZAPASOWĄ WASZEGO SZABLONU !!!
Postaram SIĘ codziennie dodac jakis nowy kod.
Postaram SIĘ codziennie dodac jakis nowy kod.
Klikamy utwórz / przywróć kopie zapasową i wyskakuje nam polecenie. Klikamy pobierz szablon i już.
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ą.
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;}
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ć.
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
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ć.
dzięki wielkie, potrzebowałam kodu do zdjęć
OdpowiedzUsuń