Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library
 
CSS Library
Submit an original CSS code
CSS Layouts
Web Graphics
Online Tools:

Advertise Here

CSS Library: DIVs and containers: CSS3 demos: Here

Pure CSS3 Push Down Panel

CSS is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the layout, colors, and fonts. This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple pages to share formatting, and reduce complexity and repetition in the structural content (such as by allowing for tableless web design). CSS can also allow the same markup page to be presented in different styles for different rendering methods, such as on-screen, in print, by voice (when read out by a speech-based browser or screen reader) and on Braille-based, tactile devices. -Wikipedia

Resources: DD CSS Library, CSS Drive, JavaScript Kit.

Author: Dynamic Drive

This is a CSS3 push down panel that when clicked on reveals some content, pushing the rest of the page's content down in the process. The entire interface is created using CSS only, using a combination of CSS3 shadows, round borders, and CSS2 generated content. To toggle the panel's display state, we employ the classic invisible checkbox technique; when the checkbox is checked, we expand the content DIV using the :checked pseudo class and sibling selector:

div.css3droppanel input[type="checkbox"]:checked ~ div {
height: 250px;
opacity: 1;
overflow: auto;
}

And before you think CSS3 Push Down Panel is only experimental, it works in all modern browsers- IE9, FF, Chrome, Safari, Opera etc. In IE8 and below, the Panel is simply hidden.

The CSS:

The HTML:

Code Info

Rate this code:

Date Posted: 10/26/2012

Revision History: None

Usage Terms: Click here

Your Comments (0)

Got a question or need help customizing this CSS code? Post it in the CSS Forums. If you have a comment or suggestion instead, post it in the comments section below.


Commenting is not available in this weblog entry.
Copyright 2006-2014 Dynamic Drive Read our Usage Terms before using any of the CSS codes.