Cascading Content with CSS3

Today we’re going to creat a cascade content show with CSS3. The key point is using the checkbox button and a combination of the :checked pseudo-class with sibling combinators.

The stickers used in the demo are from the Sale Stickers PSD available at Vandelay Premier.

Please note that the CSS3 properties will only work in browsers that support them.

View the demo | Download

The HTML

We’ll place an article element inside another article element that is at a higher hierarchical level. Each of the checkbox buttons will control an article element which is their sibling element. All of the label elements will be the arrows in the demo and connect to their corresponding checkbox buttons.

<div id="container">
	<article class="c-1">
		<section>
		    <h2>Pretium</h2>
		    <img src="img/web-badges-5.png" alt="" />
			<p>Curabitur at lacus ac velit ornare lobortis.</p>
		</section>
		<input id="arrow-1" type="checkbox" name="box-set" />
		<article class="c-2">
			<section>
			    <h2>Aliquam</h2>
			    <img src="img/web-badges-4.png" alt="" />
				<p>Ut varius tincidunt libero. Phasellus dolor.</p>
			    <label for="arrow-1" class="arrow-label-1"></label>
			</section>
			<input id="arrow-2" type="checkbox" name="box-set" />
			<article class="c-3">
				<section>
				    <h2>Laoreet</h2>
				    <img src="img/web-badges-3.png" alt="" />
					<p>Phasellus gravida semper nisi. Nullam vel sem.</p>
				    <label for="arrow-1" class="arrow-label-1"></label>
					<label for="arrow-2" class="arrow-label-2"></label>
				</section>
				<input id="arrow-3" type="checkbox" name="box-set" />
				<article class="c-4">
					<section>
					    <h2>Feugiat</h2>
					    <img src="img/web-badges-2.png" alt="" />
						<p>In ac felis quis tortor malesuada pretium.</p>
					    <label for="arrow-1" class="arrow-label-1"></label>
						<label for="arrow-2" class="arrow-label-2"></label>
						<label for="arrow-3" class="arrow-label-3"></label>
					</section>
					<input id="arrow-4" type="checkbox" name="box-set" />
					<article class="c-5">
						<section>
						    <h2>Cubilia</h2>
						    <img src="img/web-badges-1.png" alt="" />
							<p>Morbi nec metus. Phasellus blandit leo ut odio. </p>
						    <label for="arrow-1" class="arrow-label-1"></label>
						    <label for="arrow-2" class="arrow-label-2"></label>
							<label for="arrow-3" class="arrow-label-3"></label>
							<label for="arrow-4" class="arrow-label-4"></label>
						</section>
					</article>
				</article>
			</article>
		</article>
	</article>
</div>

The c-5 article does not need a checkbox button inside of  it.

The CSS

First, we’ll give all of the article elements a background to make them look like paper.

#container {
	width: 770px;
	margin: 100px auto 0;
}

article {
	background: url(../img/paper.png);
	position: absolute;
	top: 0;
	left: 0;
	width: 130px;

	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;

	-webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
	-moz-box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
	box-shadow: 1px 1px 3px rgba(0,0,0,0.2);

	-webkit-transition: left 0.4s ease-out;
	-moz-transition: left 0.4s ease-out;
	-o-transition: left 0.4s ease-out;
	-ms-transition: left 0.4s ease-out;
	transition: left 0.4s ease-out;
}

.c-1 {
	position: relative;
}

Next, we’ll add some content for the article elements, such as titles, sticker graphics, and paragraphs. The CSS:

section h2 {
	margin: 0;
	font-size: 20px;
	line-height: 30px;
	text-align: center;
	text-transform: uppercase;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.3);

    -webkit-border-radius: 4px 4px 0 0;
    -moz-border-radius: 4px 4px 0 0;
    border-radius: 4px 4px 0 0;
}

section img {
    display: block;
	margin: 0 0 0 -10px;
}

section p {
	margin: 0;
	padding: 8px;
    font-size: 15px;
	line-height: 1.4;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.2);

    -webkit-border-radius: 0 0 4px 4px;
    -moz-border-radius: 0 0 4px 4px;
    border-radius: 0 0 4px 4px;
}

We’ll set different text colors for the titles and paragraphs with different stickers.

.c-5 > section > h2, .c-5 > section > p {
    color: #522727;
}

.c-4 > section > h2, .c-4 > section > p {
    color: #350850;
}

.c-3 > section > h2, .c-3 > section > p {
    color: #1c4a23;
}

.c-2 > section > h2, .c-2 > section > p {
    color: #143a49;
}

.c-1 > section > h2, .c-1 > section > p {
    color: #3b2348;
}

Hide the input elements from visually:

input {
    border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}

The articles will fold or unfold when we check or uncheck the checkbox buttons.

input:checked + article {
    left: 160px;

    -webkit-transition: left 0.4s ease-in;
    -moz-transition: left 0.4s ease-in;
    -o-transition: left 0.4s ease-in;
    -ms-transition: left 0.4s ease-in;
    transition: left 0.4s ease-in;
}

The styles of arrows when we uncheck the buttons:

label {
	background: url(../img/arrow-right.png);
	position: absolute;
	top: 170px;
	right: 10px;
	width: 11px;
	height: 17px;
	cursor: pointer;

    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;

    -webkit-transition: opacity 0.1s ease-in-out;
    -moz-transition: opacity 0.1s ease-in-out;
    -o-transition: opacity 0.1s ease-in-out;
    -ms-transition: opacity 0.1s ease-in-out;
    transition: opacity 0.1s ease-in-out;
}

The styles of arrows when we hover over them:

section:hover label {
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;

    -webkit-transition: opacity 0.1s ease-in-out;
    -moz-transition: opacity 0.1s ease-in-out;
    -o-transition: opacity 0.1s ease-in-out;
    -ms-transition: opacity 0.1s ease-in-out;
    transition: opacity 0.1s ease-in-out;
}

The styles of arrows when we check the buttons:

input#arrow-4:checked + article label:nth-of-type(4),
input#arrow-3:checked + article label:nth-of-type(3),
input#arrow-2:checked + article label:nth-of-type(2),
input#arrow-1:checked + article label:nth-of-type(1) {
	background: url(../img/arrow-left.png);
	left: 10px;
}

That’s all, hope you like it!

View the demo | Download

About the Author:

Ring is a front-end development and Web/UI designer from China. Website | Twitter | Forrst | Dribbble

Published June 18th, 2012 by Ring Wing