On the element you want to have animate, add the following CSS:

1
2
3
4
5
6
7

#id_of_element {
	-webkit-transition: all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	-webkit-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
}

There is a lot of duplication due to vendor prefixes – until the specification if finalised, this is likely to stay the same. If this bothers you, there are various tools such as CSS Scaffold that allow you to define mixins to avoid repetitive code.

The syntax is pretty straightforward – the property you want to animate, all or border-radius or color or whatever, the time to run, then the transition timing function.

To actually animate a property, any time it changes, it will gradually change from one to the other. This can be due to a different set of properties set on hover, or a new class set by javascript.

To find out more, read through the W3C specification.

Here is the demo for a simple transition.

http://www.csscripting.com/css-multi-column/

I have used the css code snippet below in my projects to achieve PNG image transparency. Place it in a css file.

1
2
3
4
5
6
7
8
9
10

* <a class="zem_slink" title="HTML" rel="wikipedia" href="http://en.wikipedia.org/wiki/HTML">html</a> img,
* html .png{
position:relative;
behavior: expression((this.runtimeStyle.behavior="none")&amp;&amp;(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" &amp;&amp; this.src.toLowerCase().indexOf('.png')&gt;-1?(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src = "transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true)
);
}

You can use conditional include for this hack code so that the good browsers do not see this.

The impression of a three dimensional cube can be created using modern CSS techniques, without the need for JavaScript, imagery, canvas or SVG. Supported in recent WebKit and Gecko based browsers, most importantly Firefox 3.5+ -moz-transform and Safari 3.2+ -webkit-transform.

<blockquote>

blockquote is a large quotation. The content of a blockquote
element must include block-level elements such as headings, lists, paragraphs
or div’s. This element can also have an optional attribute cite
that specifies the location (in the form of a URI) where the quote has come from. Example:

<blockquote cite=”http://www.htmldog.com/reference/htmltags/blockquote/”>

   <p>A large quotation. The content of a blockquote element must
      include block-level elements such as headings, lists, paragraphs
      or div’s.</p>
   <p>cite can be used to specify the location (in the form of a URI)
 where the quote has come from.</p>

</blockquote>

<q>

q is a small quotation. The content of this element is an in-line quote. Modern browsers know how to interpret <q> which is why you can style quotations using this HTML-elements via CSS. Example:

<p>Bob said <q>sexy pyjamas</q> but Chris said <q>a kimono</q></p>

Although <q> is almost never used, it has some useful properties. For instance, you can specify the appearance of quotes within the <q>-element via CSS. That’s reasonable as different languages use different quotation marks for the same purpose. For instance, these ones:

Q {}
Q { quotes: '»' '«'   }
Q { quotes: '„' '“' }

Modern browsers support this way of styling. Of course, Internet Explorer (even in its 8th version) doesn’t support it although it knows <q> pretty well. In particular, since some problems with encoding of quotes can appear sometimes it’s useful to provide numeric values (see below).

According to standards you can even specify the appearance of quotation marks depending on the browser’s language of the user. This is how a W3C-example looks like:

:lang(fr) > Q { quotes: '« ' ' »' }
:lang(de) > Q { quotes: '»'   '«' '2039' '203A' }

As pretty as they may be, pull quotes have inherent problems in the way they are placed in the middle of HTML content. To a visual, CSS enabled browser all might seem hunky-dory, but to those browsers that are not CSS-abled and fall back on the plain HTML or to screen readers for visually impaired users, the pull quotes will appear slap bang in the middle of the main content. A quote suddenly appearing between two paragraphs is clearly out of place and will confusingly break the flow.

If you are using pull-quotes, it is wise to provide a little extra information for users who would stumble on this problem. In the XHTML you can provide a message, hidden from view with CSS that reads something like “Start of pull-quote” before the quote and then “end quote” after it. You could even have a link similar to the “skip navigation” link, which would offer the user the ability to skip the pull-quote and continue to the main content.

<cite>

cite defines an in-line citation or reference to another source. Example:

<p>And <cite>Bob</cite> said <q>No, I think it’s a banana</q>.</p>

Summing up: for large quotes use blockquote, for small quotes use q and for references to another sources cite should be used. In practice, usually only blockquote and q are used.