Wikidot Design & Development

Subtle CSS3 box shadows

Create a sophisticated infobox with subtle CSS3 box shadows.

After reading an article about a page-curling CSS3 box shadow, I was thinking of other ways to make use of the versatile property; this is what I came up with - a sophisticated infobox with shadows that make it pop.

shadow-box-all.png

Showcase - CSS3 Image Gallery

Add some jazz to the lightbox image gallery with these CSS3 improvements.

My dashboard tells me it has been 51 days since I last posted a blog - longer than I had hoped between posts, but inevitable while I'm juggling university study with two on-going wikidot projects. And admittedly, this is not quite the in-depth post I would love to deliver you, but I felt it was time to once again whet your appetite with some CSS3 goodness - this time without the detailed explanation of every knook and cranny.

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"]]
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.