CSS Animation Triggers

css3-markupA recent post on another blog shows how fast CSS3 is now evolving with a)better free online support tools b)more uniform W3C CSS & CSS3 standards implementation by all the browser vendors and c) some useful transition and animation features  to add to a Web Designers repertoire. However, the examples shown have used the :Hover pseudo-element almost exclusively to trigger various CSS styling events. This posting will look at some of the other CSS Trigger options.

The advantage of CSS & CSS3 for many Web Designers is that CSS is better understood and is often simpler to code than JavaScript. In addition for some situations adding CSS is easier  to do. Finally there are WordPress plugins and Joomla extensions that allow users to add CSS to specific pages or posts. So what can we do with CSS Animations?

Dropdown Accordion-like Boxes

As a Web UI Designer, one consistent need is to be able to reveal more information about a topic on a page – details of the specs for a product or a large example photo or screenshot of an event. Tabs are not quite what is needed – more like horizontal accordions or drop down boxes. Bonus – this code does not use CSS3 Transition or Animations. See our CSS Banner Ads for an example of CSS Transitions and Animations:

4 mouseover dropdown boxes activated by hover 

Lets look below at the HTML code for implementing the dropdown box.

Again the HTML uses either a DIV or SECTION blocks containing the dropdown box invisible HTML elements. Within the containing DIV or SECTION is the hidden SECTIONor ASIDE elements. The box dropdowns are triggered by a mouseover which uses the :hover property to change the hidden block to a display:block making it visible. For the sake of the example different containers have been used for the hidden contents.
Note how simple the CSS is for the hidden SECTION hidden blocks – just section.hides {display:none;}.
And the visible dropdown boxes also use CSS that is simple enough:
{border: solid 1px black; width:560px; margin-top:2px;}
Just a block with a border solid black border 560 pixels wide and with a margin of 2 pixels on top.
Now to reveal the hidden blocks we use the :hover [equivalent to JavaScript’s onmouseover], or :focus [equivalent to JavaScript’s onfocus] pseudo-classes. So what do we need to do in the CSS to cause the hidden block to be revealed? Well the selector is  div.accordion:hover section.hides. Read this as “find the DIV with class=accordion and take any contained SECTION with class=hides and make these styling changes”:
1)change the DISPLAY attribute from NONE to BLOCK – this makes the hidden SECTION block content visible;
2)place a 2pixel outset black border around the contents;
3)make the hidden block 560 pixels wide.
As you can see in the CSS code we change for this now visible SECTION block’s styling- a newbackgroud color. The purpose is to suggest some of the different stylings that are possible when the different hidden blocks are made visible. .

Bottom Line

CSS and a rapidly appearing CSS3 will thrive now that all the major browser vendors have implemented more completely W3C standards and particularly here the CSS pseudo-classes. :hover has been available as an onmouseover equivalent for some time. But now :active provides a more robust onmousedown trigger and :focus coupled with tabindex=’1′ or contenteditable=’true’ provides more opportunity in form processing and text display with its onfocus equivalence. In sum, Web Designers now have CSS as a viable alternative to JavaScript and Flash for banner ad, image slider and basic UI widget implementation.