Posts for tag: Semantic Web 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

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 →

Create a downloadable hCard using Microformats

microformats

First of all what is a hCard?
hCard is a simple format for sematically representing people, companies, organisations or even places in HTML or XHTML.

And what are Microformats?
Well the Microformats website states:

Designed for humans first and machines second, microformats are a set of simple, open data formats built upon existing and widely adopted standards...

Basically Microformats is a way to add semantic meaning to your code that is then searchable and indexable by search engines (Google supports Microformats) and other software and the great thing about using Microformats is that it uses nothing more than the standard HTML that you already know to add semantic meaning to otherwise plain markup. Maybe an example can explain it better that I can!

Perhaps you mark up you company details something like this:


<h4>Midwinter Duncan Grant</h4>
<p>Piazza Donatello<br />
61012 Gradara (PU)<br />
Italia<br />
<br />
<a href="http://www.midwinter-dg.com">www.midwinter-dg.com</a>
<a href="mailto:info@midwinter-dg.com">info@midwinter-dg.com</a><br />
Cell: +39 334 5841192</p>

The following information formatted as a hCard would be something like this:


<div class="vcard">
<a href="http://www.midwinter-dg.com" class="fn org url">Midwinter Duncan Grant</a>
<div class="adr">
<div class="street-address">Piazza Donatello</div>
<span class="postal-code">61012</span> <span class="locality">Gradara</span> <abbr class="region" title="Pesaro Urbino">(PU)</abbr>
<div class="country-name">Italia</div>
<!--end adr--></div>
<div class="email-addr">
email <a class="email" href="mailto:info@midwinter-dg.com">info@midwinter-dg.com</a>
</div>
<div class="tel">
<span class="type">Cell</span> +39 334 5841192
</div>
<!--end vcard--></div>

In order for the hCard to be set up properly, you need to add the "profile" attribute to the <head> tag on any page that features the hCard:


<head profile="http://www.w3.org/2006/03/hcard">

What does it mean?

First of all, everything is enclosed in a div with a class of "vcard" marking it as equivalent to a standard Address Book vCard.

The next line is a link to my site with my name - this has 3 classes applied to it: "fn" (family name) marks it as being my name, "org" (organization) marks it as also being the name of my company and finally "url" - well, yes it's also a link to my site!

From here on it's really quite simple - the div with a class of "adr" contains my address divided up into "street-address", "postal-code", "locality", "region" and "country-name" (note: because I've written the region as (PU) I've used an <abbr> tag with the full name in the 'title' attribute.

Then follows "email-addr" and "tel" containing "type" Cell.

Now you have the hCard set up, there's one last trick you can do - you can offer that information for download straight to your visitor's address book. We can achieve that by using a conversion service - in this case h2vx.com Contacts Coversion Service. Browse to the site, and select 'Contacts Coversion Service', then type in your URL.

Now simply copy and paste the link on to the page with your hCard. Fire it up in your browser and click on the link - the information should be downloaded straight to your address book.

If you are having any problems setting up your hCard, there is a great validator to be found at http://hcard.geekhood.net/

...and finally a working example of the above code:

Midwinter Duncan Grant
Piazza Donatello
61012 Gradara (PU)
Italia
Cell +39 334 5841192
Add to your address book
HOME