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

Animated page entry with CSS3

Create a subtle yet effective page load effect with pure CSS3.

With the continued development of modern browsers, more and more things are possible with CSS3 animations, and they grow ever more complex. Yet it is the simple things that may be most effective in enhancing user experience. Today we’ll look at one of these very simple ways of using CSS3 animations - using them to progressively fade in a page’s content.

Building on the example used by Apple recently with the release of the Beatles on iTunes, we’ll build a very simple ‘teaser’ page that fades in.

Creating a pure CSS content slider

A simple content slider. No javascript. No flash. Just HTML and CSS3. Oh, and a bit of BMC.

When I was redesigning the homepage for this site, I really wanted to include a simple content slider that would integrate easily with the wikidot syntax and allow the content of the slides to be changed without much thought required, and possibly even automatically with the ListPages module. I have tried getting many javascript and jQuery sliders to work with wikidot, but the amount of time required to get them working properly, and their lack of integration with other parts of the site, put me off them. That, and my very limited knowledge of javascript. So I turned to something I am familiar with, even quite adept at, to create the slider. CSS3. (If you haven’t figured it out yet, the three boxes on the homepage slide to the left if you’re using Safari or Chrome). I know what you’re saying now. CSS3 only works in some browsers! The slider only works in Safari & Chrome! What good is that? Well, read on for my reasoning…

CSS slider preview

So yes, the slider does only work in Safari and Chrome because it uses webkit animations to slide the boxes. But that doesn’t mean it looks like a jumbled-up mess in other browsers. The slider is designed so that even without the animation, it still looks great and incorporates well with the rest of the site. It even looks good in IE6!
When viewed in a non-webkit browser, the user simply sees the first three boxes. When viewed with Safari and Chrome, those first three boxes slide to the left after 25 seconds to reveal another three boxes. This means there is some content on the page that only a limited number of visitors will be able to see, but my reasoning was as follows: the content of the boxes is merely there to promote other parts of the site. There’s nothing in those boxes that is integral to user experience; they’re just glorified links. The animation enhances the user experience for those with modern browsers, as they deserve. And if something important needed to be put in the boxes, I can just place it in the one of the first three - everyone can see those three boxes.
Well, enough explaining myself, lets get on to the juicy stuff…

Recreating the feedback site's bug/wish button

Adding some interactivity to an otherwise static image using CSS.

Every time I visit the wikidot feedback site I expect some sort of user interaction from the bug/wish toggle button in the sidebar - instead it is a static image. So I decided to recreate the button with CSS. Below you can see the original image on the left versus the pure CSS version on the right. By hovering over or clicking the button, you can see how the CSS version adds some user interaction.

bug-wish-feedback.png

bugs wishes


The Markup

There are four main classes used to create the button: two ‘states’ for the toggles - link vs current; and two ‘positions’ - left and right, to maintain the curved corners on the correct side.

[[div class="bug-button"]]
[[span class="current left"]]bugs[[/span]] [[span class="link right"]][[[css3:wish-bug-button | wishes]]][[/span]]
[[/div]]

Using these classes means that by simply swapping the ‘state’ classes while maintaining the ‘position’ classes allows for changing the state of the toggle without having to change the CSS. You'll see in the CSS below that the styles are added only to the span element for the current state, but are added to the anchor (a) element in the link state.

Infobox with Pure CSS 3D Ribbon

Add some style to your site with this pure CSS3 infobox, featuring a 3D ribbon header. Oh, and did we say there’s no images!

Pure CSS Infobox

This is the content of the infobox. It is made with pure CSS - no images. Of course, you can change the colour of the background and header to match your site's theme.
Pretty cool, huh?

Infoboxes are a great way of displaying important information to visitors of your site - and they work even better when they’re easy on the eye. So today we’re brining you an infobox with a twist - it has a ribbon-style header that adds a touch of 3D class to your site. Plus, for the anti-photoshoppers out there, it’s made with pure CSS - which means you don’t need to worry about fiddling around with images or increasing the page loading time.

So how are we going to achieve this?, I hear you ask. Well, as you may or may not know, when browsers render a border, they are created as angles. If you increase the width of the border, that angle becomes a triangle. And by making all but one of the border sides transparent, you end up with a triangle on a transparent background. If you’d like to read more on this, there’s a great explanation here.
Now, back to the infobox. The image below shows the different components that will make up this box and header.

infobox-outline.png
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.