Custom HTML5/CSS3 Solid User Interface Kit Freebie

I have been really focusing on custom CSS3 effects for much of 2012 and have built some incredible designs. After accruing a large knowledgebase of techniques I have put together this small UI kit for free download.

Live DemoDownload Source Code

This includes no PSD file as the page elements are created with 100% CSS properties. Some of the background gradients and CSS3 transform/transition effects do not render properly in all versions of Internet Explorer. I’ve gone through a great deal of problem solving to get all the elements working exactly the same in all major browsers (Google Chrome, Firefox, Opera, Safari).

For older versions of Internet Explorer I’ve included some hacks to generate BG gradients and the dropdown navigation items. Overall you shouldn’t have a problem integrating these pieces into your layout. All the styles are cataloged in a neat and organized fashion with CSS comments.

I also want to give a shoutout to Dmitriy Kubyshkin for his amazing article on cross-browser CSS3 checkboxes. Using his style it’s possible to create many custom input fields, including radio buttons and select menus. The check marks are created using CSS3 transform properties and will hopefully gain more traction as IE develops their support.

In total the kit includes a full imageless navigation bar with single-layer dropdown support. Also a series of buttons both standard rectangles and pill-style ovals. Along with the buttons I’ve attached related form inputs with dynamic transition effects. Feel free to download a copy of my code and implement these elements for any projects both personal and commercial.

Cascading Content with CSS3

Next, we’re going to create 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

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:

Jake is a freelance writer and frontend web developer. He can be found writing in many blogs on topics such as mobile interfaces, freelancing, jQuery, and Objective-C. Check out his other articles throughout Google and follow his tweets @jakerocheleau. Jake’s Google+ profile.

Start Your Own Freelance Business!

Learn how I went from a corporate employee to owning my own freelance business and blog. Sign up for my email newsletter and get a FREE copy of my Ebook plus a coupon for 10% off your first billing cycle on any Vandelay Premier plan!

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