Widget zależny od wyszukiwanej etykiety



Ten widget jest zależny od etykiet i wyświetlany tylko podczas wyszukiwania wybranych - Zobacz opis

piątek, 20 sierpnia 2010

Wydrukuj to...

Interaktywne ramki obrazów w CSS

Dzisiaj przepis na interaktywne rameczki do zdjęć w blogerze
Takie ot cuda przygotowałem dla jednej z blogowiczek





Ładne zaokrąglone rogi w FF interaktywne tło i cienie :)
Poniżej kod który należy dodać do CSS najlepiej tuż pod sekcją .post-body lub .post
UWAGA: ważne każda sekcja zaczyna i kończy się znakiem {...style css...}, warto też wyszukać .post-body img być może mamy już w szablonie jakieś ustawienia, lub skorzystać z projektanta szablonów aby je zmienić.

.post-body img {
border-top:1px solid #BFB186;
border-right:2px solid #BFB186;
border-left:1px solid #BFB186;
border-bottom:2px solid #BFB186;
padding-top:8px;
padding-left:8px;
padding-bottom:7px;
padding-right:7px;
background-color:#ffffdd;
margin:5px;
filter: alpha(opacity=90);
opacity: 0.9;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.post-body img:hover {
border:1px solid #000000;
padding:8px;
background-color:#ffffff;
filter: alpha(opacity=100);
opacity: 9.9;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
10010010001000101010111011101011010101011100111101111000011011100010111011011100011111000010101010101010111001110000000011001110101111000111110

Napisano już 10 komentarze/y. Dyskusja powoli się rozwija...
Już teraz przyłącz się do dyskusji i dodaj nowy komentarz


Podoba ci się modyfikacja sekcji komentarzy - opis znajdziesz tutaj: Tuning komentarzy

Iva pisze...

Dobra sprawa:)

Anonimowy pisze...

@Iva
właśnie tego szukałam...

magda pisze...

fajny efekt :)

swingingwarsaw pisze...

a ja dla odmiany ...chcialem zalozyc biale ramki wokol fotografii.Dość wąskie,zeby odcinaly od czarnego tła.Co mam zrobic???????wpisywalem do kodu coś tam i...fota mi znikala;( Dlaczego nie ma regularnej instrukcji jak zalozyc border na fotke? To elementarna sprawa.P
pozdrawiam

Pemberley pisze...

Fajny pomysl- zastosowalam wlasnie na dwoch blogach, ale chodzil tylko na jednym. W koncu odkrylam, ze brakowalo pierwszej kropki.:)
Dzieki za super pomysl, bo niestety w projektancie szablonow mozna ustawiac ramki tylko w szablonie prostym, w moim przezroczystym juz sie nie dawalo, bo brak tej funkcji.
No i odkrylam, w ktorym miejscu moge zmienic kolor, wiec mam juz w brązie, nie zołtym.
jeszcze raz dziekuje

Paulina pisze...

Właśnie tego szukałam... wyszedł fajny efekt... ;)

Bibliomisiek pisze...

Efekt fajny, niestety głupieje kiedy doda się podpis do zdjęcia, bo wtedy blogger dobudowuje tabelę wokół zdjęcia - wówczas zdjęcie w pozycji "hover" przesuwa się, co wygląda nieciekawie. Przykład znajduje się tutaj: http://bibliomisiek.blogspot.com/2011/11/sekstet-trzydziestokilkulatkow-usta.html . Próbowałem to zniwelować, ale prawdę mówiąc nie wpadłem na żadne rozwiązanie. Gdyby Ci się udało je znaleźć - ufam, ze się niezwłocznie podzielisz :) Pozdrawiam serdecznie.

Maja pisze...

Ramki są świetne, skorzystałam z pomocy, za co dziękuję. Mam jeszcze pytanie, na blogu umieszczam pod postami motyw i nie nie wiem, jak sobie poradzić, by on już nie był w tej ramce. Pozdrawiam :o))

Elisma pisze...

Hmmm...nie bardzo wiem gdzie mam to wpisać. Jestem totalnie zielona w tym temacie. Jedyne co chce to zrobić interaktywną ikonkę odnoszącą do strony "o mnie". Mam grafikę, którą chcę dodać etc. ale nie wiem gdzie mam wpisać powyższy kod. Może mnie ktoś oświecić? :)

stach udin pisze...

co masz na myśli pisząc interaktywną :) możesz użyć gadżetu "dodaj obraz" i podać url do strony o mnie lub pisać kod html i wkleić go do "HTML/JavaScript"

Prześlij komentarz

Zapraszam do komentowania i wyłapywania ew. błędów... Twoje IP:

Losowy post