Efekty i zmiana wyglądu zdjęć we wpisie

7 września 2015


Dzisiaj nie będzie wielkiej instrukcji. Nie będzie trzeba kombinować, zmagać się z tym co nam przez przypadek nie wyszło. Dzisiaj będziemy pracować tylko w CSS, a Wasza praca będzie się ograniczać tylko do kopiuj - wklej. Nic w kodzie nie trzeba szukać. Wpis na pewno wielu osobom przypadnie do gustu, bo zauważyłam, że większość osób nie lubi bawić się w wyszukiwanie czegoś w kodzie, zmienianie kodu. Zawsze większą popularność mają tzw. gotowce, a ten wpis nie wątpliwie do takich gotowców należy.

Przechodzimy do szablon - dostosuj - zaawansowane - dodaj arkusz CSS 

1. Wysunięcie zdjęcia po najechaniu na nie myszką.


.post img{ -webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
}
.post img:hover { -o-transition: all 0.6s;
 -moz-transition: all 0.6s;
-webkit-transition: all 0.6s;
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
-webkit-transform: scale(1.1); }
2. Zaokrąglone narożniki zdjęć we wpisie


.post img{
padding: 0px !important;
border-radius: 10px;
}

3. Obracające się zdjęcie po najechaniu na nie myszką


.post img{
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
.post img:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
4. Ścięte boki zdjęć


.post img{
padding: 0px !important;
border-radius: 0 15% 0 15%;
}

5. Czarno-białe zdjęcie po najechaniu na nie myszką


.post img
{ -webkit-transition:
all 1s ease; -moz-transition:
all 1s ease; -o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease; }
.post img:hover { -webkit-filter:
grayscale(100%); }

6. Efekt zamglonego zdjęcia po najechaniu na nie myszką


.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;
}
Wszystkie zdjęcia użyte do zaprezentowania efektów są mojego autorstwa. Zostały wykonane aparatem FujiFilm FinePix S6500fd. 

10 komentarzy:

  1. Efekt wysunięcia zdjęcia bardzo nam się podoba :D Prosto i ciekawie :)

    OdpowiedzUsuń
  2. Świetne. Zapisze sobie. :)

    OdpowiedzUsuń
  3. Bardzo przydatny post! Zdecydowanie jestem w stanie zrozumieć czemu 'gotowce' są tutaj takie popularne:)


    alqxx.blogspot.com

    OdpowiedzUsuń
  4. Najprostsze efekty najlepsze :)

    OdpowiedzUsuń
  5. Efekt z przechodzeniem w black&white świetny - chyba zastosuje!

    OdpowiedzUsuń
  6. Genialny pierwszy efekt :) A czy dałoby się zrobić ten efekt tylko na stronie głównej (w postach) a na stronach żeby w ogóle się nie dało powiększyć zdjęcia ani nie stosować żadnego efektu? Byłabym wdzięczna za małą wskazówkę!
    Żeby był pogląd o co chodzi, podsyłam link do bloga:
    http://fotobuturla.blogspot.com/

    OdpowiedzUsuń
  7. Hmm z tego co mi wiadomo, to można to tylko zastosować jak ma się automatyczne skracanie wpisów ;)

    OdpowiedzUsuń
  8. czy da radę aby usunąć całkowicie efekt czarnobiały??

    OdpowiedzUsuń
  9. W sensie, że na Twoim blogu?

    OdpowiedzUsuń
  10. Bardzo przydatny tutorial. :D Dzięki niemu odmieniłam wygląd zdjęć na blogu, nie są takie zwyczajne.
    http://wszystkimi-kolorami-kredek.blogspot.com

    OdpowiedzUsuń

- Komentarze takie jak: spam, obserwacja za obserwacje, prośby o klikanie w banery etc. zostają usuwane - ZAPAMIĘTAJ! MÓJ BLOG TO NIE TABLICA OGŁOSZEŃ
- Uznaje tylko konstruktywną krytykę
- Każdy komentarz to motywacja dla mnie.
- Weryfikacja obrazkowa wyłączona