czwartek, 14 listopada 2013

CSS vs. Codzienność

Hejcia
Zmieniłam wygląd, trochę posiedziałam, ale przy okazji znam parę dodatkowych rzeczy, o których może dzisiaj napiszę c:
O moim życiu itd. nie warto pisać...Mam już go serdecznie dość i ledwie wytrzymuję.
Koniec zanudzania...Dodam parę kodów, które postaram się swobodnie wyjaśnić.
Powinnam zacząć od podstaw, ale piszcie, jeśli mam dodać takiego posta.


+ Wszystko dodajemy tu: Blogger/Szablon/Dostosuj/Zaawansowane/Dodaj arkusz CSS

Dodanie obrazka między posty

.post-footer {
background-image:url(URL);
background-repeat:no-repeat; background-position: bottom center;
height:100px;
}

- wprowadzamy link do obrazka,
jeśli np. sami zrobimy taki obrazek, trzeba go zhostingować na jakiejś stronce, najlepiej ImageShack
- dowolna wartość, wedle uznania, 

Zaokrąglone rogi zdjęć w poście

.post-body img {
background: none;
-moz-border-radius: 45px;
-webkit-border-radius: 45px;
border-radius: 45px;
border: 0px;
shadow: none;

Wartości (px) zawsze można zmienić c:

Okrągłe awatary komentarzy

Są przeróżne sposoby, ale najprostszy jest ten:

.avatar-image-container {border-radius: 90px;}

Wartości (px) zawsze można zmienić ;p

Gotowy kod, na podświetlenie zdjęcia po najechaniu

.post img { opacity: 1;
transition:opacity 0.4s ease-in-out;
-o-transition:opacity 0.4s ease-in-out;
-moz-transition:opacity 0.4s ease-in-out;
-webkit-transition:opacity 0.4s ease-in-out;
}
.post img:hover {
opacity: 0.70;
transition:opacity 0.4s ease-in-out;
-o-transition:opacity 0.4s ease-in-out;
-moz-transition:opacity 0.4s ease-in-out;
-webkit-transition:opacity 0.4s ease-in-out;
}
Jeśli ktoś jest uparty/odważny, może wstawić własne parametry c:


Ok...To na razie tyle c:
W następnym poście podstawowe selektory ? Tak ? To poproszę min. 10 komentarzy :P

Brak komentarzy:

Prześlij komentarz