Arkusze Css

Witam, oto podstrona dzięki której może jakoś uda wam się ogarnąć kody css. No więc zacznijmy od krótkiego wytłumaczenia:

Kody css to coś, co tworzy wygląd strony internetowej, w naszym przypadku bloga. Wszystkie kody wklejacie do szablon->dostosuj->zaawansowane->arkusze css. Dobra, przechodzimy do kodów :)

KODY PODSTAWOWE

Posty

Wyśrodkowanie tytułu posta:

h3.post-title, .comments h4 {text-align: center;}

 Wyśrodkowanie daty:
h2.date-header {text-align: center;}

Kolor tła w postach 

.post {background-color: #000000;}

Obrazek w tle posta 

.post {background-image: url(adres obrazka);}

Kolor tekstu w postach

.post {color: #000000;} 

Tekst nie przykleja się do ramek

.post {padding: 10px;}

Ramka w postach 

.post {border-style: solid;} 

(kliknij, aby dowiedzieć się więcej o ramkach) 


Rozmiar czcionki w postach

.post {font-size: 20px;} 


Rodzaj czcionki w postach

.post {font-family: courier;} 


Pochyła czcionka w postach

.post {font-style: oblique;}


Drukowana czcionka w postach

.post {text-transform: uppercase;}



Strony / Karty 

 Ramka w kartach

#PageList1 {border-style: solid;}


Wyśrodkowanie górnego menu:

#PageList1 ul {
text-align: center;
}
#PageList1 ul li {
float: none;
display: inline;
}


Przesunięcie górnego menu na prawą stronę:#PageList1 ul {
text-align: right;
}
#PageList1 ul li {
float: none;
display: inline;
}

Zaokrąglone rogi kart 

#PageList1 {border-radius: 30px;} 


Rozmiar czcionki w kartach  

#PageList1 {font-size: 20px;} 


Rodzaj czcionki w kartach

#PageList1 {font-family: courier;} 


Pochyła czcionka w kartach

#PageList1 {font-style: oblique;}


Drukowana czcionka w kartach

#PageList1 {text-transform: uppercase;}



Komentarze 

Obramowanie komentarza 
 .comment {border-style: solid;} 


Zaokrąglone rogi komentarza
  
.comment {border-radius: 30px;}


Wyśrodkowanie tekstu w komentarzach

.comment {text-align: center;}

Tekst nie przykleja się do ramek 

.comment {padding: 10px;} 


Rodzaj czcionki w komentarzach

.comment {font-family: courier;} 


Pochyła czcionka w komentarzach

.comment {font-style: oblique;}


Drukowana czcionka w komentarzach

.comment {text-transform: uppercase;}



KODY DLA ZAAWANSOWANYCH 

Teraz pokażę ciekawe kody dla trochę większych znawców cssa. A jednak, jeżeli masz ambicje i, mimo że jesteś początkujący/a, chcesz spróbować, nie bronię! :)

Sposób na 'znikające' karty
 Jest to naprawdę bardzo prosty kod i tylko z pozoru wydaje się skomplikowany. Taki efekt stosowałam już w kilku szablonach i jest on po prostu super :D Dobra, nie będę się rozpisywać, przejdźmy do kodu!

#PageList1 li a:hover {
opacity: 0;
transition:all 1s;
}

To tyle! Jeżeli znasz w cssie takie coś jak opacity to kod będzie dla ciebie bardzo prosty. Tu nic nie trzeba zmieniać, po prostu wklejamy na bloga i powinno działać jak należy :)

Efekt kolorowego cienia 
Cóż, to jest także prosty kod a wygląda po prostu tak, że po najechaniu (a może być także cały czas) za napisem jest jeszcze kilka takich samych napisów w innych kolorach. Zobaczcie kod. 

#PageList1 a:hover {
opacity: 1;
text-shadow: 3px -5px 0px red,
4px -7px 0px blue,
5px -9px 0px yellow;
transition:all 1s;
} 


Co można w tym kodzie zmienić? Otóż już mówię:

opacity: można zmienić ale efekt będzie brzydszy. Jest to widoczność elementu.

text-shadow: 3px -5px 0px red, 4px -7px 0px blue,
5px -9px 0px yellow: w tym fragmencie wszystko prócz text-shadow można dowolnie zmieniać, zarówno kolory jak i wartości, kombinować aż wyjdzie ładnie :)

 No to tyle co do tego kodu, powinien działaś pięknie również po skopiowaniu na bloga.

Obrazek "płynący" przez karty
Kod daje taki efekt, jak np w tym moim szablonie: http://olgierddlacbxd.blogspot.com/ najeździe na karty z boku i zobaczcie! :) Spodobało się? No to teraz możesz mieć takie na swoim blogu!
Najpierw wklejamy ten kod:

#PageList1 ul a:link, #PageList1 ul a:visited {
display: block;
width: 106px;
text-decoration: none;
background-color: #bbad8e;
color: #000;
padding: 5px;
border: 2px outset #bbad8e;
        text-align: center;

}

Co tutaj można zmienić? Przede wszystkim, możemy zmienić wartość width, czyli liczbę 106. Możemy zmienić też #bbad8e - to. To jest kolor karty przed najechaniem. Tak samo można zmienić #000 i całe wyrażenie border: 2px outset #bbad8e; (oczywiście bez słowa border)
 Żeby ułatwić wam zmienianie kodu, pogrubiłam w nim to, co można zmienić :)

To teraz drugi kod, wklejamy go pod spodem:
#PageList1 ul a:hover {
background-image: url("link do obrazka");
background-position: 50% 50%;
transition:all 1s;
-moz-transition:all 1s;
-webkit-transition:all 1s;
-o-transition:all 1s;
}

Tuta zmieniamy tylko link do obrazka, w tym miejscu oczywiście wklejamy link do obrazka, czyli klikamy na swoim obrazku prawym przyciskiem myszy i wybieramy 'kopiuj adres url obrazka'.

Ten kod jest z pewnością trudniejszy niż pozostałe, ale myślę, że sobie poradzicie. W razie problemów piszcie ;)

Pierwsza litera inna niż pozostałe
Ten efekt możecie zaobserwować na szablonie głównym naszej szabloniarni. Przy wszystkich tytułach gadżetów pierwsza literka jest inna niż pozostałe. Jak tego dokonać? Przykładowo spróbujemy zmienić pierwszą literkę w tytule posta.
h3.post-title:first-letter {
color: red;
}

Wszystko powinno działać, tak więc teraz powinniśmy mieć pierwszą literkę w tytule posta czerwoną. Co można zmienić w tym kodzie? Oh, prawie wszystko! Jak zwykle zmieniamy pogrubione wartości. h3.post-title to oczywiście selektor. Color: red; to nic innego jak określenie co ma się stać z tą literką. Czyli przykładowo, jeśli chcemy by nasza literka była czerwona wpisujemy właśnie color: red; .
Dla leniwych dam gotowy już kod który zmienia pierwszą literkę. Oczywiście będziecie musieli zmienić kolory i selektory ale poza tym nic :)
Selektor:first-letter {
color: #000000
font-style: oblique;
letter-spacing: 1px;
font-weight: normal;
font-size: 15px;
font-family: 'Tahoma';
}
Taki kod wklejacie na bloga i cieszycie się pięknym wyglądem!