Sposób na bloga. Kącik graficzny.

by - 11/10/2015

Cześć!
Wreszcie temat, w którym czuję się jak ryba w wodzie!:D Po pierwsze - znudził mi się mój dotychczasowy szablon, więc możecie szykować się na duże zmiany:) Oprócz tego chcę, żeby ta seria - czyli kącik graficzny - była dla Was kontynuowana według Waszych potrzeb. A żeby tak się stało musicie zacząć być aktywni --> o tutaj

♥♥♥




Dzisiaj pokażę Wam co zrobić, aby nasz post był atrakcyjniejszy. Tym razem mówię tutaj o zdjęciach. Jest kilka ciekawych efektów, które możemy zastosować. Dzięki temu zdjęcia, na które najedziemy kursorem - powiększą się, zrobią się czarno-białe, zamglone albo rozmazane.
Do dzieła!♥

Nie ma w tym większej filozofii. Logujemy się na bloggera i wchodzimy w:
SZABLON > DOSTOSUJ > ZAAWANSOWANE > WKLEJ KOD CSS

Tam już wklejamy tylko wybrany kod:)

ZAMGLENIE 

*najedź kursorem, aby sprawdzić efekt*

.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 { opacity:0.7;
filter:alpha(opacity=50); }

Możecie tutaj kombinować z fragmentem na żółtym tle. 0.1/0.2/0.3,itd. są to przezroczystości. Jeśli wpiszecie "1" zdjęcie będzie normalne i nic się z nim nie stanie. Im mniejsza jednostka - tym bardziej przezroczyste(zamglone) zdjęcie:)

CZERŃ I BIEL


*najedź kursorem, aby sprawdzić efekt* 

.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(1);
filter: grayscale(1);
}
Tutaj też możecie dowolnie edytować tę wartość. "1" to po prostu czarno-białe zdjęcie. Zmniejszając ją (0.8 ; 0.5 ; itd.)  możecie uzyskać po prostu wyblaknięcie.

POWIĘKSZENIE
  
*najedź na zdjęcie kursorem, aby sprawdzić efekt*



.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);
}

Wartość na żółtym tle naturalnie też można dostosowywać. "'1" - to obraz naturalnych rozmiarów, więc im większa jednostka (1.1,1.2...1.8) - tym większe zdjęcie. Uważajcie z tym jednak, bo bardzo duże powiększenie zdjęcia nie wygląda zbyt estetycznie:>

ROZMYCIE

*najedź na zdjęcie kursorem, aby sprawdzić efekt*
.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;
-webkit-filter: blur(3px);
filter: blur(3px); }
 Tutaj z kolei im większą ustawimy ilość px - tym bardziej rozmazane będzie zdjęciu. Sądzę jednak, że jednostki 1 - 3 są wystarczające:)

♥♥♥

Pokażę Wam również kody, które można ustawić w ten sposób, aby zdjęcia w poście posiadały stale jakąś wartość (ramkę, zaokrąglone rogi, czy też taką samą wielkość).

1.WIELKOŚĆ.
.post img {width: 500px; height: auto;}

2.RAMKA.
.post img {border: 1px solid #000000;}

3.PRZEŹROCZYSTOŚĆ.
.post img {opacity: 0.5;}

4.ZAOKRĄGLONE ROGI.
.post img {border-radius: 5px;}

♥♥♥

Ojej. Wiem, że trochę tego jest i na pewno nie każdemu chce się to czytać. Wierzę jednak, że wrzucicie ten post gdzieś do zakładek i że po prostu kiedyś Wam się przyda:)

Podobają Wam się takie posty? Chcecie ich więcej? Jakie efekty chcielibyście uzyskać na swoich blogach? Może chcielibyście, żebym opisała tutaj jak zrobić coś konkretnego?  

Piszcie pod tym postem, lub w zakładce *jak to zrobić?* w moim menu:)

Buziaki !


You May Also Like

5 komentarze

  1. Nie wiem czemu ale mi trzy ostatnie zdjecia jeśli chodzi o efekt to nie działają :/
    Jednak sam pomysł na taka serie jest super i już lece w linka sprawdzić gdzie mam być aktywna ! :)

    Pojawił się nowy post na Official Patty ! :)

    OdpowiedzUsuń
    Odpowiedzi
    1. podobno nie działają w niektórych przeglądarkach :< chyba firefox i chrome jest ok:) buziaki :*

      Usuń
  2. U mnie też niestety nie działa :<
    Pozdrawiam!

    klaudr.blogspot.com

    OdpowiedzUsuń
  3. Super efekty!!! <3
    http://typical-writers.blogspot.com/

    OdpowiedzUsuń

Dziękuję za każde napisane słowo !♥
Thank You for every written word !♥