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.

Cascading Content with CSS3

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

Sale Stickers PSD

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

Cascading Content with CSS3

About the Author:

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

Published June 18th, 2012 by

Looking for hosting? WPEngine offers secure managed WordPress hosting. You’ll get expert WordPress support, automatic backups, and caching for fast page loads. Visit WPEngine.

Join Our Newsletter!

Subscribe to our weekly newsletter chalked full of useful tips, techniques, and design goodies. We have 20,000+ loyal readers and counting! We’ll even send you a free e-book (Freelance Designer’s Guide to Multiple Income Streams) and a $10 discount on our most popular product the Freelance Starter Kit.

5 Responses

Comments are now closed on this post.

  • Designer, June 18, 2012

    Wow, these look awesome , maybe instead of making arrow invisible when mouse is moved out, we can make it light grey in color.

  • Montreal, June 19, 2012

    nice.. must try this out and implement it to my new project.. thanks for sharing this.

  • Alex Braker, June 19, 2012

    Yes, this is the best information and I agree @ Designer that you can make the arrow enable by using different colors so users can easily access it.

  • Caparico, June 23, 2012

    Looking very nice. This technique will be very useful when monkeying around with check boxes in general.

  • johanso, June 24, 2012

    very good to learn things about the new features css3 Site