Web Design & Development Blog
RSS Feed
Subscribe to my
RSS feed
RSS

The Web Design & Development Blog is written, coded and maintained by Duncan Midwinter. It regularly features articles on HTML, CSS, Javascript, PHP, Web Design and more…

Posts for tag: HTML5 3

Animated image captions using the css backface-visibility property

It’s been a while since I published my Pure html5 / css3 animated image captions and I thought I’d revisit the subject. The following demo is a slightly different take on the last – instead of hiding the captions and revealing them on mouseover this time I’m hiding the images and showing the captions first. The resulting animated images/captions are then animated using css3 2d and 3d transforms. Normally if you flip and element using transforms, it appears as a mirror-image, however if you use the backface-visibility property (set to hidden), the resulting element is then hidden. This is the key to the following animations.

Animated image captions using the css backface-visibility property

the set-up

1 The html used is as before, a <figure> element containing an <img> and a <figcaption>, the only difference being this time I’m allowing myself to use a containing <div> that specifies the type of animation (horizontal, diagonal, vertical…).


<div class="vertical">
	<figure>
		<img src="images/joni-mitchell.png" alt="Joni Mitchell" width="200" height="200" />
		<figcaption class="orange">Joni Mitchell</figcaption>
	</figure>
</div>

2 The containing <div> has a position of relative, and from there on the <figure>, <img> and <figcaption> elements are all set to position absolute so they are all positioned on top of each other.

elements positioned in div

3 Now, the <img> tab is flipped over using a transform. Because it has a backface-visibility of hidden it is now invisible.

the image is hidden

4 The final effect is achieved on mouseover. On mouseover, the <figure> element is flipped using a transform that is animated using a css3 transition.

the figure element is flipped

5 Once it if flipped, the <img> which is now flipped back becomes visible whilst the <figcaption> which is flipped over becomes hidden.

the image is visible and the figcaption is hidden

And here’s the full demo of my Animated image captions using the css backface-visibility property

CSS3 tables with rounded corners and css selectors

css3 table with rounded cornersI recently had to style a table for a shopping cart with rounded corners and a drop shadow. So how is this done? It would be great if you could just slap “border-radius: x” straight on to the <table> element and it would be done but unfortunately this doesn’t work. You have to get a rounded corner on to each <th> or <td> at the corners of the table.

So how do you do that? Add a class to each corner cell? I suppose you could but it would mean ugly html. CSS to the rescue! By using child selectors you can get those round corners in there without touching the html at all…

For example: to target the top left-hand cell (assuming you have a header on your table), you target th:first-child (the first <th> element); likewise to get the top right-hand cell you target th:last-child.

To get the bottom left-hand cell you need to target the first cell of the last row of the table. In this case, your selector will be: tr:last-child td:first-child

…and for the final corner: tr:last-child td:last-child

Finally, the zebra striping on the table is done using the :nth-child selector: tr:nth-child(even) will select only the even numbered rows (note: in the following example I have used tr:nth-child(even) td as I am using gradients (the gradients need to be on the <td> element else they stick out of the rounded corner in Firefox).

Here’s a live example of my CSS3 tables with rounded corners on dabblet.com

The html markup for the table was generated using my own Create Table plugin for Coda.

Six fantastic CSS3 animated image captions

Following on from my previous CSS3 demos, here is a demo of pure CSS3 animated image captions – the kind of thing that usually involves a lot of javascript and all too often bloated markup.

6 examples of animated image captions using only html5 and css3

In the following demo, all the examples are created using only CSS3 and the following semantic HTML5 markup for describing an image with a caption:


<figure>
	<img src="sample-image.png" width="200" height="200" alt="sample image description" />
	<figcaption>sample caption</figcaption>
</figure>

You can see the full demo here: CSS3 animated image captions →

HOME