Sposób na bloga. Kącik graficzny.
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!♥
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 ! ♥
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 ! ♥
5 komentarze
Nie wiem czemu ale mi trzy ostatnie zdjecia jeśli chodzi o efekt to nie działają :/
OdpowiedzUsuń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 ! :)
podobno nie działają w niektórych przeglądarkach :< chyba firefox i chrome jest ok:) buziaki :*
UsuńEfekt z powiększeniem jest najlepszy ;)
OdpowiedzUsuńblog Przygody-Mileny.blogspot.com
U mnie też niestety nie działa :<
OdpowiedzUsuńPozdrawiam!
klaudr.blogspot.com
Super efekty!!! <3
OdpowiedzUsuńhttp://typical-writers.blogspot.com/
Dziękuję za każde napisane słowo !♥
Thank You for every written word !♥