Elegancka rameczka dla zdjęć

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.