Ramki dla zdjęć można i robi się na kilka sposobów, jedni od razu przy pomniejszaniu zdjęcia w programie graficznym dodają jakiś efekt. Inni tylko za pomocą CSS i znacznika Border ustalają kolor ramki. CSS3 wprowadził możliwość dodania efektu cienia, tym samym nasze zdjęcia w artykułach staną się wizualnie jeszcze lepsze minimalnym kosztem. Tym bardziej, że edytując kilka linijek możemy potem bardzo szybko zmienić efekt, tak aby światłocień był tylko z jednej strony, albo oblewał całe zdjęcie lub inne elementy graficzne.
Sposób użycia jest równie prosty co sam kod, wystarczy do zdjęcie dodać odrębny styl np. class="rameczka"
. Poniżej przykładowy kod /źródło: css3.wikidot.com/, który należy wkleić do pliku stylu CSS:
/* Elegant Image Border */ .rameczka { border: 6px solid white; -webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.3); -moz-box-shadow: 2px 2px 6px rgba(0,0,0,0.3); box-shadow: 2px 2px 6px rgba(0,0,0,0.3); -webkit-transform: rotate(3deg); -webkit-transition: -webkit-transform 0.3s ease; } .rameczka:hover { -webkit-transform: rotate(0deg); }
Z lekka inna metoda (także za pomocą CSS3) opisana jest tu: http://www.zenelements.com. Zachęcam również do odwiedzania strony: www.css3.info.
dobre i szybkie. szkoda ze pod IE 7 i 8 nie dziala :/
Fakt:(. Ale może uda coś się pokombinować.