Category “Tutorials”

Pure CSS – HTML accordion using Details & Summary elements

Monday, 11 June, 2012

Have you ever dream of being able to create an accordion or toggle widget purely using HTML and CSS? Yes it is possible to create a nice looking and easily configurable accordion widget purely using the power of HTML5. No need to load any external javascript plugins or libraries. Gone are the days when you had to depend on javascript plugins to create interactive accordion widgets.

HTML5 – CSS3 duo together is shaping up to be an exciting technology of all time, which can make impacts on almost all areas of webdesign such as animations, user interaction, gaming, geolocation, 3D modeling, visualizations etc… those things were possible only with Javascript or flash earlier.


Before we continue to the css/html code, let’s take a look at the fully-functional accordion widget here…

Details and Summary Elements

By using the <details> and <summary> elements together we can create an accordion like toggle widget.
As per W3C specification the detail element is defined as

The <details> tag specifies additional details that the user can view or hide on demand.

The <details> tag can be used to create an interactive widget that the user can open and close. Inside <details>, there can be put any sort of content. The content of a <details> element will be hidden by default unless the open attribute is set.
W3C defines the summary element as

The <summary> tag defines a visible heading for the <etails> element. The heading can be clicked to view/hide the details.

However it is not always necessary to define the summary element, if there is no child summary element, the user agent will provide its own legend.

Usage – Syntax

   <summary>Click to show/hide</summary>
   <p>content goes here<p>
   <summary>Click to show/hide</summary>
   <p>content goes here<p>
   <summary>Click to show/hide</summary>
   <p>content goes here<p>
   <summary>Click to show/hide</summary>
   <p>content goes here<p>

Browser Support

It is really unfortunate that only chrome and android browser at the moment offer full native support to the detail and summary elements. Opera announced that they will soon support this feature. For the time being wa can get it work on other browsers with the help of polyfills. There is an awesome jquery fallback script created by Manuel Bieh which will do the trick on other browsers.

The DRY Principle in web design

Thursday, 17 June, 2010
Don't repeat yourself principle in web design

The DRY (Don’t Repeat Yourself) is a software development principle, which has been formulated by Andy Hunt and Dave Thomas in their book The Pragmatic Programmer. The DRY code philosophy is stated as “Every piece of knowledge must have a single, unambiguous, authoritative representation within a system.” A system’s knowledge is far broader than just its code. It refers to database schemas, test plans, the build system, even documentation. In simple words DRY principle is a software design theory that stresses the importance of not duplicating code.

Every software programmer these days uses a variety of design principles and design patterns in their day to day programming tasks. It helps them improve the quality, performance and maintainability of the software system by avoiding code redundancy.

DRY principle in CSS coding

Unlike software programming web design lacks formal principles or theories of its own. Knowing and understanding certain software principles can really benefit you as a web designer / developer. Here, by incorporating DRY principle in web design, especially in CSS coding can really enhance our web design experience.

Avoiding code duplication is one of the basic principles of CSS coding from the start. To write clean and optimized CSS code is the key to develop faster loading and less bandwidth-burning websites. In the case of a website with 50000 monthly hits, if you can save 5 KB by optimizing the CSS file, you will eventually save more than 2.5 GB bandwidth a year. The result can be really overwhelming for heavy traffic generating websites. Read the rest of this entry »

RGBa vs Opacity: The Difference Explained

Monday, 29 March, 2010
RGBa vs Opacity: Difference between two CSS3 properties explained with examples...

To be able to effectively handle the alpha transparency or opacity of a particular element purely using CSS/HTML was the dream of any web designer. Because, with alpha transparency or opacity they can make visually more beautiful and easily maintainable websites with less effort. Now with CSS3 we can achieve these using properties such as RGBa and Opacity.

What is RGBa?

In addition to RGB (Red Blue Green) CSS3 has introduced a new feature to color setting, which is called RGBA. RGBA stands for Red Blue Green Alpha. Here “A” in this property name stands for “Alpha”. This additional feature can be used to specify an opacity value for any color. The alpha channel is usually used as an opacity channel. If a pixel has 0% value in its alpha channel, it’s fully transparent (and, thus, invisible), whereas a value of 100% in the alpha channel gives a fully opaque pixel. We can use this for anything that can take the CSS color property.

Sample CSS Code:

P { background-color: rgba(255, 0, 0, 0.5); }

We can use RGBA now on all new-generation browsers including Firefox 3, Chrome, Safari, and Opera 10, but we won’t see the effect in Internet Explorer.

Live Preview (Screenshot for older browsers)

Read the rest of this entry »