A 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 stnadrds implementation by all the browser vendors and c) some useful transition and animation features to add to a Web Designers reportoire. 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 consustent need is to be able to revel 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:
5 dropdowns; 1 click dropdown and 4 mouseover dropdown boxes
Lets look first at the HTML code for implementing the click dropdown box. It follows a simple pattern. A
SPAN of the click character is followed by more visible HTML. The hidden HTML follows in a
NAV block [it could easily have been an HTML5
ARTICLE,
ASIDE or
DETAILS block]. This click dropdown HTML is then followed by HTML used create 4 dropdown boxes each of which has hidden contents.
Again the HTML uses either a
DIV or
SECTION blocks containing the dropdown box visible HTML elements. Within the containing
DIV or
SECTION is the hidden
NAV {
display:none; is the CSS] The box dropdowns are triggered by a mouseover which uses the
:hover property to change the hidden block to display:block making it visible. For the sake of the example different containers including
DIV, SECTION, and
SPAN elements have been used for the containing dropdowns. But all of the hidden contents are contained in
NAV blocks with a a
class=hides setting.
<h4>Different Triggers for CSS-based Dropdown, Accordion-like widgets.</h4>
<span class='reveal' >★</span> <= click here for a RED dropdown
using SPAN with :active trigger
<nav class='hides'>MY Red content is here and stays only as long as mousedown is held.
This dropdown is activated by SPAN:active trigger.</nav>
<div class="accordion">1st box dropdown uses DIV :hover
<nav class='hides'><img src='http://placekitten.com/200/140'><br>
This dropdown will persist as long as the mouse hovers over any part of the dropdown.</nav>
<br>Summary line here should move down</div>
<span style='color:blue;'>Outside the DIV also should move down</span>
<div class="accordion">2nd box dropdown also uses DIV with :hover pseudo-class
<nav tabindex='2' class='hides'>Hidden NAV that is in 2nd dropdown box.</nav></div>
<section class="accordion">3rd box dropdown uses SECTION tag and :hover pseudo-class
<nav tabindex='2' class='hides'>Hidden NAV that is 4th dropdown is also uniquely styled blue because
it is contained in a SECTION tag which has its own CSS styling.</nav></section>
<div tabindex='1' class="accordion">4th box dropdown uses :focus pseudo-class with DIV.
<nav tabindex='2' contenteditable='true' class='hides'>This dropdown responds to two different pseudo-element triggers -
first, the DIV +:hover. But now hit the tab key several times until this DIV is highlighted
- it is now using the :focus trigger and so different CSS styling is applied.
Note the switch to pink background color. This tab initiated
dropdown will persist until you hit the tab key again. </nav></div>
The HTML syntax for each dropdown box is simple. The containing
DIV and
SECTION tags hold the hidden
NAV blocks waiting to be revealed by an
:hover, :active or
:focus event. And this is where the requisite CSS comes into play:
nav.hides {display:none;}
div.accordion {border: solid 1px black; width:400px; margin-top:2px;}
div.accordion:hover nav.hides {display:block;
border: 3px outset #999; width:350px;
height:180px;}
section.accordion {border: solid 1px black; width:400px; margin-top:2px;}
section.accordion:hover nav.hides {display:block;
width:398px; background-color:#eeeeff;}
span.reveal:active+nav{display:block;
border:2px solid red; width:350px;
height:160px; color:red; weight:bold;}
div.accordion:focus nav.hides{display:block;
border:4px groove blue; width:350px;
height:180px; color:green; background-color:pink;}
Note how simple theCSS is for the
NAV hidden blocks - just
nav.hides {display:none;}.
And the visible dropdown boxes also use CSS that is simple enough:
{border: solid 1px black; width:400px; margin-top:2px;}
Just a solid black 1pixel border 400pixels wide and with a margin of 2 pixels on top.
Now to reveal the hidden NAV block we use the :hover [equivalent to JavaScript's onmouseover], :active [equivalent to JavaScript's onmousedown] or :focus [equivalent to JavaScript's onfocus] pseudo-class. 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 nav.hides. Read this as "find the DIV with class=accordion and take any contained NAV with class=hides and make these styling changes":
1)change the
DISPLAY attribute from
NONE to
BLOCK - this makes the hidden
NAV block content visible;
2)place a
2pixel outset black border around the contents;
3)make the hidden block 300 pixels wide and 160 pixels high.
As you can see in the CSS code we change for this now visible
NAV block's styling- a new color or style for the border or none at all. 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.
So with these provisos, here is a JSFiddle full of different dropcap stylings. Enjoy: