Żeby stworzyć ładnie prezentujące się karty nie musisz grzebać w kodzie HTML i szukać igły w stogu siana. Wystarczy pobawić się kodami CSS. Poniżej podałam kilka przykładów ciekawego wyglądu stron, które być może przypadną Ci do gustu. Oczywiście poniższe parametry, tj. wartości dopasowane są do tego posta, więc wszystko możesz zmienić według własnego uznania.
#PageList1 li a:link, #PageList1 li a:visited {
1
}#PageList1 li a:hover {
2
}Skopiuj kod z okienka nr 1 i wklej w miejsce jedynki, następnie kod z okienka nr 2 i wklej tam, gdzie widnieje dwójka.
Mam nadzieję, że sprawnie Ci poszło, jeżeli nie - napisz w komentarzu w czym tkwi problem - pomogę :)
| WYGLĄD |
|
| KOD |
1
color: #fff;
background: #767070;
font-family: oswald;
text-align: center;
font-size: 12px;
text-decoration: none;
display: block;
padding: 7px 30px;
margin: 10px;
|
2
background: #8fb4d0;
border-bottom: 1px dotted #fff;
display: block;
transition:all 1s;
-moz-transition:all 1s;
-webkit-transition:all 1s;
-o-transition:all 1s;
|
| WYGLĄD |
|
| KOD |
1
margin-top: 10px;
font-size: 9px;
text-transform: uppercase;
text-align: center;
font-family: Tahoma;
letter-spacing: 1px;
color: #fff;
background: RGBa(38,75,114,0.6);
display: block;
padding: 7px 30px;
margin: 10px;
|
2
display:block;
box-shadow: inset 520px 0 0 #d9d2e9;
color: #0d6461;
text-shadow: 0px 0px 1px #fff;
transition: all 1s;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
|
| WYGLĄD |
|
| KOD |
1
background: #ff3535;
text-align:center;
color: #fff;
display: block;
padding: 7px 30px;
margin: 10px;
font-family: Gabriola;
font-size: 18px;
letter-spacing: 10px;
text-transform: uppercase;
|
2
background: #ff6d6d;
display: block;
border-radius: 50px;
transition: all 1s;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
|
| WYGLĄD |
|
| KOD |
1
display: block;
padding: 7px 30px;
margin: 10px;
transition:.5s;
cursor: pointer;
background-color:#444444;
color:#ffffff;
font:normal normal 8px Verdana;
text-transform:uppercase;
letter-spacing:1px;
text-align:center;
|
2
box-shadow:inset 0 60px 0 0 #cbc7c7;
color:#000 !important;
|
| WYGLĄD |
|
| KOD |
1
display: block;
padding: 7px 30px;
margin: 10px;
transition:.5s;
cursor: pointer;
background-color:#219867;
color:#ffffff;
font:normal normal 12px oswald;
text-transform:uppercase;
letter-spacing:1px;
text-align:center;
| 2
box-shadow:inset 0 -5px 0 0 #6ad9ab;
color:#fff !important;
border-bottom: 1px dashed #6ad9ab;
|
Bardzo przydatne, jeśli będę robiła odświeżenie bloga pewnie coś z tego użyję.:)
OdpowiedzUsuńSzukałam takiego poradnika od kiedy założyłam bloga. Wielkie dzięki! :)
OdpowiedzUsuńTen komentarz został usunięty przez autora.
OdpowiedzUsuńCzy mogłabyś pokazac jak wygląda gotowy kod? Ja wpisuję #PageList1 li a:link, #PageList1 li a:visited {
OdpowiedzUsuń1
}background: #ff3535; text-align:center; color: #fff; display: block; padding: 7px 30px; margin: 10px; font-family: Gabriola; font-size: 18px; letter-spacing: 10px; text-transform: uppercase;
#PageList1 li a:hover {
2
}background: #ff6d6d; display: block; border-radius: 50px; transition: all 1s; -webkit-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s;
, ale nie działa, więc coś muszę robic źle:)
Pozdrawiam
Kod jest źle wstawiony.
UsuńPierwszy musisz wkleić w miejsc numeru 1, a kolejny w miejsce nr 2 ;)
#PageList1 li a:link, #PageList1 li a:visited {
OdpowiedzUsuńcolor: #fff; background: #767070; font-family: oswald; text-align: center; font-size: 12px; text-decoration: none; display: block; padding: 7px 30px; margin: 10px; }
#PageList1 li a:hover {
background: #8fb4d0; border-bottom: 1px dotted #fff; display: block; transition:all 1s; -moz-transition:all 1s; -webkit-transition:all 1s; -o-transition:all 1s; }
Czy to powinno być tak? Wklejam tak, a nic się nie zmienia.. :/
Ja wklejam u siebie i działa. Kod może nie działać poprawnie jeżeli karty są umieszczone na górze strony, nie w kolumnach bocznych (chociaż rzadko się z tym spotykam). Może również sprawiać problemy, jeśli karty są wpisywane jako kod HTML.
UsuńSprawdź również czy inne selektory masz wpisane dokładnie i są one zamknięte :)
ZNALAZŁAM PROBLEM!
UsuńZamiast #PageList1 li a:link, #PageList1 li a:visited {}
Proszę wpisać #PageList2 li a:link, #PageList2 li a:visited {}
Podobnie tu, zamiast #PageList1 li a:hover {}
Proszę wpisać #PageList2 li a:hover {}
Pomogło! :D Dziękuję! :))
Usuń