dcsimg

Web Developer Class: How to Use CSS3 Transforms with vCards

By Michael Rohde

WEBINAR:
On-Demand

Application Security Testing: An Integral Part of DevOps


Using CSS3 transforms to style the hCard microformat provides a powerful means to design your web pages while at the same time providing contact information that, according to Microformats Wiki, "enables applications to retrieve information directly from web pages without having to reference a separate file."

Transforms are made up of four different properties:

  • translate
  • skew
  • rotate
  • scale
The majority of modern browsers all currently support transforms, including Firefox, Google Chrome, Opera, and Safari. Each browser has their own specific prefix. For example:
.vcard {
  -webkit-transform:;
  -moz-transform:;
  -ms-transform:;
  -o-transform:;
}
For the following examples, I'll use the -moz- prefix for the sake of keeping the examples short and uncluttered.

The images will all come from your CSS, not from the HTML. This is done without the use of id attributes and instead relies on :nth-of-type.

.vcard:nth-of-type(1) {
  background-image: url(a.jpg);
  background-repeat: no-repeat;
}
.vcard:nth-of-type(2) {
  background-image: url(a.jpg);
  background-repeat: no-repeat;
 }
.vcard:nth-of-type(3) {
  background-image: url(a.jpg);
  background-repeat: no-repeat;
}
.vcard:nth-of-type(4) {
  background-image: url(a.jpg);
  background-repeat: no-repeat;
}
For the sake of learning, I used the same image for each type. That way, when I start to transform the images, I can see the differences that I'm creating. In an actual web page, you'll most likely use different images.

Now we'll use transform so you can adjust the size of each of the images. Simply add -moz-transform: scale(1.25); to the block of code.

.vcard:nth-of-type(1) {
  background-image: url(a.jpg);
  background-repeat: no-repeat;
 -moz-transform: scale(1.25);
}
Adjust the scale to suit your needs. To increase the image size, use any number over 1.0. To decrease the size, use any number below 1.0. For example, 0.90 scales the image down to 90% of it's original size.

You can use rotate to, you guessed it, rotate the image. You can combine this with transform:
.vcard:nth-of-type(1) {
  background-image: url(a.jpg);
  background-repeat: no-repeat;
 -moz-transform: scale(1.25) rotate(90deg);
}
Last, you can use translate to move the image on the vertical and horizontal axis. You could go so far as piling the images on top of each other:
.vcard:nth-of-type(1) {
  background-image: url(a.jpg);
  background-repeat: no-repeat;
 -moz-transform: scale(1.25) rotate(45deg) translate(90px, 10px);
 }
.vcard:nth-of-type(2) {
  background-image: url(a.jpg);
  background-repeat: no-repeat;
 -moz-transform: scale(.75) rotate(90deg) translate(90px, 300px);
}
For the HTML side of the equation, you can go to hCard creator to help generate the hCard code. You can simply copy and paste the generated code into your HTML and tweak it as needed.

You'll notice that the hCard text is appearing on your web page alongside your text. You may or may not want that to happen. If you want the text off the page, but still accessible to search engines and applications, you'll need to add this to your CSS:

 .vcard * {
 text-indent: -9999px;
}


Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.

    By submitting your information, you agree that htmlgoodies.com may send you HTMLGOODIES offers via email, phone and text message, as well as email offers about other products and services that HTMLGOODIES believes may be of interest to you. HTMLGOODIES will process your information in accordance with the Quinstreet Privacy Policy.

  •  
  •  
  •  
Thanks for your registration, follow us on our social networks to keep up-to-date