Elegant Image Frame

Elegant Image Frame

Add some elegance to you wikidot site with this easy, stylish and formal image border.

rose image

We’ve already shown you how to turn your plain old images into polaroids, and now it’s time for a nice, formal image frame.

First, what to put on your wikidot site. Instead of wrapping the image between some <div> tags, we’re going to use the more efficient method of assigning a class (elegant-border) to the image. This means that if you add the relevant CSS to your custom theme, any time you want to use this image frame, just add class="elegant-border" to the image syntax.

[[image :first class="elegant-border" width="250px"]]

And now for the CSS. It’s fairly basic - just a 6px wide white border, and a box shadow.

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

And here it is… a lovely looking formal image frame for your wikidot site.
rose image

Yes, it’s nice, but this site is called Wikidot & CSS3, so surely there’s got to something a bit more…CSS3-ish? Well yes, there is!

For your site visitors using Safari or Chrome, we’re going to add a slight rotation to the image and have it straighten up when hovered over. This can be used to great effect when displaying multiple images side by side or in a grid. And all you have to do is add class=“elegant-border” to each of the images - it couldn’t get much easier than that!

First we’ll rotate the image 3 degrees to the right by adding the following transform to our .elegant-border class:

    -webkit-transform: rotate(3deg);

Then, to the :hover pseudo class, we’ll straighten the image back up:

.elegant-border:hover {
    -webkit-transform: rotate(0deg);
}

And finally, we’ll add a -webkit-transition to smoothly animate the transformation:

.elegant-border {
    -webkit-transition: -webkit-transform 0.3s ease;
}

And here it is - the final result (of course you’ll only see the effect if you’re using Safari, Chrome or another webkit browser).

rose image

Enjoy the article? Tweet it!

Discussion - No comments yet…2 comments

Add a New Comment
or Sign in as Wikidot user
(will not be published)
- +
Site design © BMC WebDesign, 2011. All rights reserved. All tutorials on this site are free for commerical use, subject to conditions outlined in the disclaimer.