Pure CSS HTML Feature Panel

With the HTML5 specification becoming a W3C recommendation a couple of days ago. I thought I would take this opportunity to re-iterate; JavaScript should only be used for logic and interactions which cannot be accomplished via HTML and CSS alone. Control of layout and design should remain with the HTML markup and CSS style rules.

An example code snippet I use quite a bit to demonstrate this; is my pure CSS HTML feature panel (some call it the highlight or hero image on the homepage) I created back in 2011.

The code snippet shows that without the need of JavaScript, we can simulate the basic behaviors and maintain the look and feel of the common feature panel that’s usually created with the help of JavaScript.

The code snippet source code can be found on GitHub here: https://github.com/oscarcao/css-feature-panel

Note: This feature panel code snippet is just an example, it is by far not a complete. You will still need to use JavaScript to “enhance” the feature panel by adding features like auto-scroll, etc.

This is how the GitHub sample code snippet looks like:

Figure 1. Screenshot showing look and feel of sample Pure CSS HTML feature panel.

Leave a Reply

Your email address will not be published. Required fields are marked *