Efekty CSS #1 - Obrazek

(c)moja (stara, jeszcze z początków, ale nie jest taka brzydka xd)

Mamy duże ilości ładnych efektów w kodzie CSS. Muszę się przyznać, że jak zaczynałam przygodę z tworzeniem szablonów to uwielbiałam używać efektu zwijanych rogów zdjęć w poście. Było to dla mnie coś tak estetycznego i satysfakcjonującego, że nie mogłam się powstrzymać i większości szablonów dodawałam ten efekt. Więc jak to należy przychodzę do was z instrukcją na wyżej wspomniane zawijanie rogów obrazków.

Mała dygresja: możemy wykorzystać też ten efekt w sposób odwrotny, czyli na rozwijanie rogów.

Zapraszam więc to przeczytania tej jakże króciutkiej instrukcji.

Vol.1 Live podgląd >> klik.

1. Wchodzimy w Motyw>Dostosuj>Dodaj arkusz CSS.

    1(b). Zalecam wstawienie do postu, który jest na stronie głównej i jest widoczny, obrazka, abyśmy widzieli co robimy.

2. Kiedy mamy już wolny arkusz możemy zacząć pisanie. A więc podaję wam kod i tłumaczenia(szczegółowe na samym dole):

.post-body img {

border-radius: 0px; /*zaokrąglenie rogów*/

transition:all 1s;

-moz-transition:all 1s;

-webkit-transition:all 1s;

-o-transition:all 1s;

}

.post-body img:hover {

border-radius: 40px;

transition:all .60s;

-moz-transition:all .60s;

-webkit-transition:all .60s;

-o-transition:all .60s;

}

Vol.2 Live podgląd >> klik.

.post-body img {

border-radius: 100%;

transition:all 1s;

-moz-transition:all 1s;

-webkit-transition:all 1s;

-o-transition:all 1s;

}

.post-body img:hover {

border-radius: 0%;

transition:all .60s;

-moz-transition:all .60s;

-webkit-transition:all .60s;

-o-transition:all .60s;

}

border-radius - zaokrąglenie rogów, można podawać je w pikselach (px) bądź w procentach (%);

jeśli wpisujemy wartość w pikselach otrzymujemy zaokrąglony kwadrat/prostokąt(zależy od obrazka), jeśli jednak posługujemy się procentami wtedy mamy doczynienia z kołem/owalem

transition - przejście/efekt, tu ustawiamy ile ma trwać przejście; moz - odpowiada mozilli, webkit - dla chrome i safari, o - dla opery

Jedna z krótszych instrukcji i naprawdę prostych. Mam nadzieję, że wszystko jest zrozumiałe, jeśli jednak nie do końca, piszcie w komentarzach bądź w zakładce "Pytania".

Do następnej instrukcji!