View demo Download source

In the last few years, we’ve seen a lot of single page websites lying around the internet, most of them using JavaScript for some transitions effect. Well, now I’m gonna teach you how you can have your own, but instead I’ll be using CSS Transitions and the :target property to do all the magic.

The Dribbble shots used in the demos are by Matt Kaufenberg. Check out his Dribbble profile or visit his An Illustration-a-Day Blog.

Markup

The HTML will contain five main divisions: a header and the four content sections. Each of the content sections is going to have an ID and the class panel. Moreover, we will add another division inside which will have the class content. The first content section which is #home will only have the content class and will not require an extra division:

<!-- Home -->
<div id="home" class="content">
	<h2>Home</h2>
	<p>Some content</p>
	<!-- ... -->
</div>
<!-- /Home -->

<!-- Portfolio -->
<div id="portfolio" class="panel">
	<div class="content">
		<h2>Portfolio</h2>
		<p>Some content</p>
		<!-- ... -->
	</div>
</div>
<!-- /Portfolio -->

<!-- About -->
<div id="about" class="panel">
	<div class="content">
		<h2>About</h2>
		<p>Some content</p>
		<!-- ... -->
	</div>
</div>
<!-- /About -->

<!-- Contact -->
<div id="contact" class="panel">
	<div class="content">
		<h2>Contact</h2>
		<p>Some content</p>
		<!-- ... -->
	</div>
</div>
<!-- /Contact -->

In the header we will have the main heading and the navigation:

<!-- Header with Navigation -->
<div id="header">
	<h1>Page Transitions with CSS3</h1>
	<ul id="navigation">
		<li><a id="link-home" href="#home">Home</a></li>
		<li><a id="link-portfolio" href="#portfolio">Portfolio</a></li>
		<li><a id="link-about" href="#about">About Me</a></li>
		<li><a id="link-contact" href="#contact">Contact</a></li>
	</ul>
</div>

The reason for having such an “unordered” structure by adding the header to the end, is that we make the navigation “reachable” using the general sibling selector (~), so that we can color the respective items differently.

Now, the main idea is to use the pseudo-class :target in order to add a transition to the current section. In this example, we will be sliding up and down our sections.

CSS

First we will give style to our header and the navigation. We want to keep these on the same spot at all the time, even though everything else will be moving.

#header{
	position: absolute;
	z-index: 2000;
	width: 235px;
	top: 50px;
}
#header h1{
	font-size: 30px;
	font-weight: 400;
	text-transform: uppercase;
	color: rgba(255,255,255,0.9);
	text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
	padding: 20px;
	background: #000;
}
#navigation {
	margin-top: 20px;
	width: 235px;
	display:block;
	list-style:none;
	z-index:3;
}
#navigation a{
	color: #444;
	display: block;
	background: #fff;
	background: rgba(255,255,255,0.9);
	line-height: 50px;
	padding: 0px 20px;
	text-transform: uppercase;
	margin-bottom: 6px;
	box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
	font-size: 14px;
}
#navigation a:hover {
	background: #ddd;
}

All the sections except #home have the panel class. Here we will be using the transition whenever an element with this class gets “targeted”. The trick is to use a negative margin in the “normal” class and no margin at all in the :target pseudo-class. Adding a transitions will make the panel slide from the top whenever one is “selected”:

.panel{
	min-width: 100%;
	height: 98%;
	overflow-y: auto;
	overflow-x: hidden;
	margin-top: -150%;
	position: absolute;
	background: #000;
	box-shadow: 0px 4px 7px rgba(0,0,0,0.6);
	z-index: 2;
	-webkit-transition: all .8s ease-in-out;
	-moz-transition: all .8s ease-in-out;
	-o-transition: all .8s ease-in-out;
	transition: all .8s ease-in-out;
}
.panel:target{
	margin-top: 0%;
	background-color: #ffcb00;
}

Next, let’s style the content class that all our sections have:

.content{
	right: 40px;
	left: 280px;
	top: 0px;
	position: absolute;
	padding-bottom: 30px;
}
.content h2{
	font-size: 110px;
	padding: 10px 0px 20px 0px;
	margin-top: 52px;
	color: #fff;
	color: rgba(255,255,255,0.9);
	text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
}
.content p{
	font-size: 18px;
	padding: 10px;
	line-height: 24px;
	color: #fff;
	display: inline-block;
	background: black;
	padding: 10px;
	margin: 3px 0px;
}

In order to change the color of the current item in the navigation, we’ll use the :target pseudo-class with the general sibling selector to “get to” the respective navigation item:

#home:target ~ #header #navigation #link-home,
#portfolio:target ~ #header #navigation #link-portfolio,
#about:target ~ #header #navigation #link-about,
#contact:target ~ #header #navigation #link-contact{
	background: #000;
	color: #fff;
}

And that’s all you need. Check out the demos and you’ll see other examples of how you can do this.

Hope you liked this tutorial and maybe you can experiment with your own effects.

¡Hasta la próxima!

View demo Download source

View demo Download source

Today we’ll show you how to create some neat sliding image panels with CSS only. The idea is to use background images for the panels and animate them when clicking on a label. We’ll use radio buttons with labels and target the respective panels with the general sibling selector.

The beautiful images are by Joanna Kustra and they are licensed under the Attribution-NonCommercial 3.0 Unported Creative Commons License.

You might as well be interested in Filter Functionality with CSS3 where we have used a similar technique for filtering elements based on their type.

Please note: the result of this tutorial will only work as intended in browsers that support CSS transitions and animations.

The Markup

The HTML will consist of three major parts: the radio buttons and the labels, the container with the panels and their “slices” for each image, and the titles. The container with the class cr-bgimg part will have a division for each of the panels and inside we’ll place spans for every image with the right background position. So, the first panel will have four slices, each having the one of the images as background with the left-most position. The second panel will have again four slices but now the background position will be moved to be showing the next part of the respective image:

<section class="cr-container">			

	<!-- radio buttons and labels -->
	<input id="select-img-1" name="radio-set-1" type="radio" class="cr-selector-img-1" checked/>
	<label for="select-img-1" class="cr-label-img-1">1</label>

	<input id="select-img-2" name="radio-set-1" type="radio" class="cr-selector-img-2" />
	<label for="select-img-2" class="cr-label-img-2">2</label>

	<input id="select-img-3" name="radio-set-1" type="radio" class="cr-selector-img-3" />
	<label for="select-img-3" class="cr-label-img-3">3</label>

	<input id="select-img-4" name="radio-set-1" type="radio" class="cr-selector-img-4" />
	<label for="select-img-4" class="cr-label-img-4">4</label>

	<div class="clr"></div>	

	<!-- panels -->
	<div class="cr-bgimg">
		<div>
			<span>Slice 1 - Image 1</span>
			<span>Slice 1 - Image 2</span>
			<span>Slice 1 - Image 3</span>
			<span>Slice 1 - Image 4</span>
		</div>
		<div>
			<span>Slice 2 - Image 1</span>
			<span>Slice 2 - Image 2</span>
			<span>Slice 2 - Image 3</span>
			<span>Slice 2 - Image 4</span>
		</div>
		<div>
			<span>Slice 3 - Image 1</span>
			<span>Slice 3 - Image 2</span>
			<span>Slice 3 - Image 3</span>
			<span>Slice 3 - Image 4</span>
		</div>
		<div>
			<span>Slice 4 - Image 1</span>
			<span>Slice 4 - Image 2</span>
			<span>Slice 4 - Image 3</span>
			<span>Slice 4 - Image 4</span>
		</div>
	</div>

	<!-- titles -->
	<div class="cr-titles">
		<h3>
			<span>Serendipity</span>
			<span>What you've been dreaming of</span>
		</h3>
		<h3>
			<span>Adventure</span>
			<span>Where the fun begins</span>
		</h3>
		<h3>
			<span>Nature</span>
			<span>Unforgettable eperiences</span>
		</h3>
		<h3>
			<span>Serenity</span>
			<span>When silence touches nature</span>
		</h3>
	</div>

</section>

The h3 elements for the titles will have two spans, one for the main headline and one for the sub-headline.

Let’s style this baby.

The CSS

I will omit all the vendor prefixes, but you will, of course, find them in the files.
We’ll be going through the style of demo 1.

Our aim is to first hide those radio buttons by covering them up with labels. In web browsers, clicking on a label will make the respective checkbox or radio button selected. Giving an ID to the input, we can use the for = idref attribute of the label to reference the respective input.

Second, we want to place all the background images correctly and third, we want to show the respective image slices and titles when clicking on a label.

So, lets first syle the section and give it a white border with some subtle box box shadow:

.cr-container{
	width: 600px;
	height: 400px;
	position: relative;
	margin: 0 auto;
	border: 20px solid #fff;
	box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
}

Since we want to use the general sibling selector in order to “reach” the right image slices and titles, we need to place the labels before those containers. Let’s make sure that they are on top as a layer (z-index) and push its position down by adding a top margin of 350px;

.cr-container label{
	font-style: italic;
	width: 150px;
	height: 30px;
	cursor: pointer;
	color: #fff;
	line-height: 32px;
	font-size: 24px;
	float:left;
	position: relative;
	margin-top: 350px;
	z-index: 1000;
}

Let’s prettify the label by adding a little circle. We’ll create a pseudo element and place it centered behind the label text:

.cr-container label:before{
	content:'';
	width: 34px;
	height: 34px;
	background: rgba(130,195,217,0.9);
	position: absolute;
	left: 50%;
	margin-left: -17px;
	border-radius: 50%;
	box-shadow: 0px 0px 0px 4px rgba(255,255,255,0.3);
	z-index:-1;
}

In order to create a separation between the panels we’ll use a little trick. We’ll create another pseudo-element for the label and extend it to stretch over the panel. Using a gradient, we’ll make the line “fade out” at the top:

.cr-container label:after{
	width: 1px;
	height: 400px;
	content: '';
	background: linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
	position: absolute;
	bottom: -20px;
	right: 0px;
}

The last panel should not have that line so we simply give it 0 width:

.cr-container label.cr-label-img-4:after{
	width: 0px;
}

Now, that we’ve taken care of the label look, we can hide the inputs:

.cr-container input{
	display: none;
}

Whenever we click on a label, the respective input gets checked. Now we can target the respective label using the general sibling selector. So, we will change the color the “selected” label:

.cr-container input.cr-selector-img-1:checked ~ label.cr-label-img-1,
.cr-container input.cr-selector-img-2:checked ~ label.cr-label-img-2,
.cr-container input.cr-selector-img-3:checked ~ label.cr-label-img-3,
.cr-container input.cr-selector-img-4:checked ~ label.cr-label-img-4{
	color: #68abc2;
}

And we’ll also change the background color and box shadow of its cicle pseudo-element:

.cr-container input.cr-selector-img-1:checked ~ label.cr-label-img-1:before,
.cr-container input.cr-selector-img-2:checked ~ label.cr-label-img-2:before,
.cr-container input.cr-selector-img-3:checked ~ label.cr-label-img-3:before,
.cr-container input.cr-selector-img-4:checked ~ label.cr-label-img-4:before{
	background: #fff;
	box-shadow: 0px 0px 0px 4px rgba(104,171,194,0.6);
}

The container for the image panels will occupy all the width and it will be positioned absolutely. This container will be used later in order to set the background image to the currently selected image. We need to do this in order to have an image visible by default. So we’ll also add some background properties already:

.cr-bgimg{
	width: 600px;
	height: 400px;
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: 1;
	background-repeat: no-repeat;
	background-position: 0 0;
}

Since we have four panels/images, one panel will have the width of 150 pixels (600 divided by 4). The panels will be floating left and we’ll hide their overflow since we don’t want to see the slices coming out when we slide them:

.cr-bgimg div{
	width: 150px;
	height: 100%;
	position: relative;
	float: left;
	overflow: hidden;
	background-repeat: no-repeat;
}

Each slice span will be positioned absolutely and initially, they will be hidden by placing them out of the panel with a left of -150px:

.cr-bgimg div span{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: -150px;
	z-index: 2;
	text-indent: -9000px;
}

Now, let’s take care of the background of the image container and the respective image slices:

.cr-container input.cr-selector-img-1:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(1){
	background-image: url(../images/1.jpg);
}
.cr-container input.cr-selector-img-2:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(2){
	background-image: url(../images/2.jpg);
}
.cr-container input.cr-selector-img-3:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(3){
	background-image: url(../images/3.jpg);
}
.cr-container input.cr-selector-img-4:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(4){
	background-image: url(../images/4.jpg);
}

We also need to give the right background position to the slices depending on the panel:

.cr-bgimg div:nth-child(1) span{
	background-position: 0px 0px;
}
.cr-bgimg div:nth-child(2) span{
	background-position: -150px 0px;
}
.cr-bgimg div:nth-child(3) span{
	background-position: -300px 0px;
}
.cr-bgimg div:nth-child(4) span{
	background-position: -450px 0px;
}

When we click on a label we will simply slide all the slices out to the right:

.cr-container input:checked ~ .cr-bgimg div span{
	animation: slideOut 0.6s ease-in-out;
}
@keyframes slideOut{
	0%{
		left: 0px;
	}
	100%{
		left: 150px;
	}
}

…all except the slices with the respective background image. Those will slide in from -150px to 0px:

.cr-container input.cr-selector-img-1:checked ~ .cr-bgimg div span:nth-child(1),
.cr-container input.cr-selector-img-2:checked ~ .cr-bgimg div span:nth-child(2),
.cr-container input.cr-selector-img-3:checked ~ .cr-bgimg div span:nth-child(3),
.cr-container input.cr-selector-img-4:checked ~ .cr-bgimg div span:nth-child(4)
{
	transition: left 0.5s ease-in-out;
	animation: none;
	left: 0px;
	z-index: 10;
}

Last, but not least, we want to style the h3 title elements and their spans. The h3 will have a opacity transition and once we select the respective label/input the opacity will increase from 0 to 1:

.cr-titles h3{
	position: absolute;
	width: 100%;
	text-align: center;
	top: 50%;
	z-index: 10000;
	opacity: 0;
	color: #fff;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
	transition: opacity 0.8s ease-in-out;
}
.cr-titles h3 span:nth-child(1){
	font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
	font-size: 70px;
	display: block;
	letter-spacing: 7px;
}
.cr-titles h3 span:nth-child(2){
	letter-spacing: 0px;
	display: block;
	background: rgba(104,171,194,0.9);
	font-size: 14px;
	padding: 10px;
	font-style: italic;
	font-family: Cambria, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
}
.cr-container input.cr-selector-img-1:checked ~ .cr-titles h3:nth-child(1),
.cr-container input.cr-selector-img-2:checked ~ .cr-titles h3:nth-child(2),
.cr-container input.cr-selector-img-3:checked ~ .cr-titles h3:nth-child(3),
.cr-container input.cr-selector-img-4:checked ~ .cr-titles h3:nth-child(4){
	opacity: 1;
}

If you don’t want to use the label trick on mobile devices you could, for example, use a media query:

@media screen and (max-width: 768px) {
	.cr-container input{
		display: inline;
		width: 24%;
		margin-top: 350px;
		z-index: 1000;
		position: relative;
	}
	.cr-container label{
		display: none;
	}
}

This is just a quick solution and it might be better to check, if the label trick is supported.

And that’s it! There are many possibilities of animations that can be done here. Check out the demos to see more.

Demos

1. Demo 1: Slide to right
2. Demo 2: Odd/even slide to left/right
3. Demo 3: Odd/even slide up/down
4. Demo 4: Scale up/down

And that’s it! I hope you enjoyed this tutorial and find it inspiring!

View demo Download source

View demo Download source

Hola, amigos. For the last month or so, I’ve been experimenting with the power of CSS pseudo-elements, specially when it comes to mixing them with buttons and that way recreating some great effects that were only possible to do with sprites, in the past.

In this tutorial, I’ll show you how to create buttons with a twist, using just one anchor tag per button and the great power of CSS.

The font used is ‘Open Sans’ by Steve Matteson.

Disclaimer:
I’ll not be using CSS vendor prefixes in this tutorial or else it would be crazy long, but you will find them in the downloadable files.

I avoided CSS transitions since, right now, Firefox is the only browser that supports them on pseudo-elements. Plus, I believe that these buttons work just fine without them.

Markup

The structure of all these buttons needs just one anchor tag for it to work, since we will be creating the other elements with the ::before pseudo-class.

     Click me!

Example 1

I think this is the easiest one, with a very regular CSS.

CSS

First of all, we will give the general style of the button, including its active state. It is important to notice the relative positioning, since it will help us later with the positioning of the ::before element:

.a_demo_one {
	background-color:#ba2323;
	padding:10px;
	position:relative;
	font-family: 'Open Sans', sans-serif;
	font-size:12px;
	text-decoration:none;
	color:#fff;
	border: solid 1px #831212;
	background-image: linear-gradient(bottom, rgb(171,27,27) 0%, rgb(212,51,51) 100%);
	border-radius: 5px;
}

.a_demo_one:active {
	padding-bottom:9px;
	padding-left:10px;
	padding-right:10px;
	padding-top:11px;
	top:1px;
	background-image: linear-gradient(bottom, rgb(171,27,27) 100%, rgb(212,51,51) 0%);
}

Then, we create the gray container using the ::before pseudo-element. Absolute positioning makes our life easier to, believe it or not, position our element:

.a_demo_one::before {
	background-color:#ccd0d5;
	content:"";
	display:block;
	position:absolute;
	width:100%;
	height:100%;
	padding:8px;
	left:-8px;
	top:-8px;
	z-index:-1;
	border-radius: 5px;
	box-shadow: inset 0px 1px 1px #909193, 0px 1px 0px #fff;
}

Example 2

This one is a little bit more complex because of the 3D’ish look. This button is outside of its ‘container’, but when you click it, it goes down:

CSS

.a_demo_two {
	background-color:#6fba26;
	padding:10px;
	position:relative;
	font-family: 'Open Sans', sans-serif;
	font-size:12px;
	text-decoration:none;
	color:#fff;
	background-image: linear-gradient(bottom, rgb(100,170,30) 0%, rgb(129,212,51) 100%);
	box-shadow: inset 0px 1px 0px #b2f17f, 0px 6px 0px #3d6f0d;
	border-radius: 5px;
}

.a_demo_two:active {
	top:7px;
	background-image: linear-gradient(bottom, rgb(100,170,30) 100%, rgb(129,212,51) 0%);
	box-shadow: inset 0px 1px 0px #b2f17f, inset 0px -1px 0px #3d6f0d;
	color: #156785;
	text-shadow: 0px 1px 1px rgba(255,255,255,0.3);
	background: rgb(44,160,202);
}

And here’s the tricky part:

Since the position of the pseudo-element depends on its parent, once the parent moves down a few pixels, you have to move up the pseudo-element that same amount of pixels.

.a_demo_two::before {
	background-color:#072239;
	content:"";
	display:block;
	position:absolute;
	width:100%;
	height:100%;
	padding-left:2px;
	padding-right:2px;
	padding-bottom:4px;
	left:-2px;
	top:5px;
	z-index:-1;
	border-radius: 6px;
	box-shadow: 0px 1px 0px #fff;
}

.a_demo_two:active::before {
	top:-2px;
}

Example 3

I think this one is my favorite since it was the first one I ever made this way and people seem to really like it. It is a divided button that “breaks” once you click it.

CSS

Again, the first thing we have to do is create the lighter part. In here, you’ll notice a right margin, this is in order to compensate for the width of the pseudo-element if you want to center the button. You don’t need it if that is not a problem for you.

.a_demo_three {
	background-color:#3bb3e0;
	font-family: 'Open Sans', sans-serif;
	font-size:12px;
	text-decoration:none;
	color:#fff;
	position:relative;
	padding:10px 20px;
	border-left:solid 1px #2ab7ec;
	margin-left:35px;
	background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
}

.a_demo_three:active {
	top:3px;
	background-image: linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
	box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
}

And then the pseudo-element’s CSS:

.a_demo_three::before {
	content:"·";
	width:35px;
	max-height:29px;
	height:100%;
	position:absolute;
	display:block;
	padding-top:8px;
	top:0px;
	left:-36px;
	font-size:16px;
	font-weight:bold;
	color:#8fd1ea;
	text-shadow:1px 1px 0px #07526e;
	border-right:solid 1px #07526e;
	background-image: linear-gradient(bottom, rgb(10,94,125) 0%, rgb(14,139,184) 100%);
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
	box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 0px 10px 5px #999 ;
}

.a_demo_three:active::before {
	top:-3px;
	box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 1px 1px 0px 0px #044a64, 2px 2px 0px 0px #044a64, 2px 5px 0px 0px #044a64, 6px 4px 2px #0b698b, 0px 10px 5px #999 ;
}

Example 4

This time, we will use the pseudo-element as a pointer, using one image as a background, though you can use some of those great icon fonts.

CSS

.a_demo_four {
	background-color:#4b3f39;
	font-family: 'Open Sans', sans-serif;
	font-size:12px;
	text-decoration:none;
	color:#fff;
	position:relative;
	padding:10px 20px;
	padding-right:50px;
	background-image: linear-gradient(bottom, rgb(62,51,46) 0%, rgb(101,86,78) 100%);
	border-radius: 5px;
	box-shadow: inset 0px 1px 0px #9e8d84, 0px 5px 0px 0px #322620, 0px 10px 5px #999;
}

.a_demo_four:active {
	top:3px;
	background-image: linear-gradient(bottom, rgb(62,51,46) 100%, rgb(101,86,78) 0%);
	box-shadow: inset 0px 1px 0px #9e8d84, 0px 2px 0px 0px #322620, 0px 5px 3px #999;
}

.a_demo_four::before {
	background-color:#322620;
	background-image:url(../images/right_arrow.png);
	background-repeat:no-repeat;
	background-position:center center;
	content:"";
	width:20px;
	height:20px;
	position:absolute;
	right:15px;
	top:50%;
	margin-top:-9px;
	border-radius: 50%;
	box-shadow: inset 0px 1px 0px #19120f, 0px 1px 0px #827066;
}

.a_demo_four:active::before {
	top:50%;
	margin-top:-12px;
	box-shadow: inset 0px 1px 0px #827066, 0px 3px 0px #19120f, 0px 6px 3px #382e29;
}

Example 5

This example is a bit cheesy, I know, but you can use it in so many and really useful ways.

CSS

.a_demo_five {
	background-color:#9827d3;
	width:150px;
	display:inline-block;
	font-family: 'Open Sans', sans-serif;
	font-size:12px;
	text-decoration:none;
	color:#fff;
	position:relative;
	margin-top:40px;
	padding-bottom:10px;
	padding-top:10px;
	background-image: linear-gradient(bottom, rgb(168,48,232) 100%, rgb(141,32,196) 0%);
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
	box-shadow: inset 0px 1px 0px #ca73f8, 0px 5px 0px 0px #6a1099, 0px 10px 5px #999;
}

.a_demo_five:active {
	top:3px;
	background-image: linear-gradient(bottom, rgb(168,48,232) 0%, rgb(141,32,196) 100%);
	box-shadow: inset 0px 4px 1px #7215a3, 0px 2px 0px 0px #6a1099, 0px 5px 3px #999;
}

.a_demo_five::before {
	background-color:#fff;
	background-image:url(../images/heart.gif);
	background-repeat:no-repeat;
	background-position:center center;
	border-left:solid 1px #CCC;
	border-top:solid 1px #CCC;
	border-right:solid 1px #CCC;
	content:"";
	width:148px;
	height:40px;
	position:absolute;
	top:-30px;
	left:0px;
	margin-top:-11px;
	z-index:-1;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}

.a_demo_five:active::before {
	top: -33px;
	box-shadow: 0px 3px 0px #ccc;
}

In the end

And well, this is it, for now. Remember that these buttons are still kind of experimental, so not every browser supports them that well.

Thank you for reading this tutorial and I hope that you find it useful.

View demo Download source

View demo Download source

Hey there folks! Today we’re going to take a look at spicing up our web banners, ads or any content for that matter, with CSS3 animations.

Firefox and WebKit browsers are currently the only browsers that support CSS animation, but we’ll take a look at how we can easily make these ads also function in other browsers (which I’ll affectionately refer to as 18th century browsers). However, don’t expect perfect support for all browsers (specifically IE 7 and lower) when experimenting with modern CSS techniques.

Ok then, let’s build some kick-butt, animated web banners!

Please note: In order to save space, all vendor prefixes have been removed. Refer to the source files for the complete CSS. If you are unfamiliar with CSS animations, I’d highly recommend reading this first.

The Markup

First off, we’re going to structure the ad’s elements by laying out the HTML. At this point, we’ll need to think through how we want the animation to function – as this will effect the child/parent structure of our markup (I’ll explain further below):

<div id="ad-1">
	<div id="content">
		<h2>Lost at sea?</h2>
		<h3>Relax - we've got your rudder.</h3>
		<form>
			<input type="text" id="email" value="Email address..." />
			<input type="submit" id="submit" value="Guide me" />
		</form>
	</div>
	<div id="clouds">
		<ul id="cloud-group-1">
			<li class="cloud-1"></li>
			<li class="cloud-2"></li>
			<li class="cloud-3"></li>
		</ul>
		<ul id="cloud-group-2">
			<li class="cloud-1"></li>
			<li class="cloud-2"></li>
			<li class="cloud-3"></li>
		</ul>
	</div>
	<ul id="boat">
		<li>
			<div id="question-mark"></div>
		</li>
	</ul>
	<ul id="water">
		<li id="water-back"></li>
		<li id="water-front"></li>
	</ul>
</div>

In order to understand our markup structure, let’s focus in on the boat for a second:

<ul id="boat"> <!-- Groups the boat's elements -->
	<li> <!-- The boat itself -->
		<div id="question-mark"></div> <!-- The question mark (no crap) -->
	</li>
</ul>

Now, when you view the first ad on the demo page, there are 3 separate animations taking place on the boat:

1. An animation that slides the boat in from the left. This is applied directly to the unordered list (group).

2. An animation that gives the boat a nice bobbing effect – simulating the boat floating on water. This is applied directly to the list element (boat).

3. An animation that fades in the question mark. This is applied directly to the div (question mark).

If you’re not already seasick, take another look at the demo page. You’ll see that the bobbing animation applied to the list item (the boat) also affects the div inside of it (the question mark). Similarly, the “slide in” animation that is applied to the unordered list (group) also affects the list item and div inside of it (the boat and question mark). This leads us to an important observation:

Child elements take on their parent’s animation in addition to their own animation. With this knowledge added to our arsenal, we’re just a number of child/parent structures away from creating animations that’ll blow minds (and the processor on your Grandma’s laptop)!

The CSS

Before we jump into the really fun stuff and start animating, we still need to style the ad and come up with a pure CSS fallback for browsers stuck in the 18th century.

The Fallback For 18th Century Browsers

We’ll create a fallback by simply styling the markup as if CSS animations don’t exist (the thought of CSS animations being non-existent is enough to make any grown man cry – but hang in there with me). In other words, if our animations aren’t able to play, the ad should still look decent. This way, when someone is viewing your ad with an 18th century browser, they will see a normal, static web ad – instead of blank ad space.

For example: If someone were to use CSS like this, they’d be in trouble:

/* WRONG WAY! */

@keyframe our-fade-in-animation {
	0%   {opacity:0;}
	100% {opacity:1;}
}

div {
	opacity: 0; /* This div is hidden by default - a big no-no!*/
	animation: our-fade-in-animation 1s 1;
}

If a user’s browser doesn’t support animations, the div will remain invisible for the rest of its sad and lonely life. This is when their client breaks down the door of their office – chainsaw in hand – and demands to know why they haven’t sold a single too-too (or whatever their client is selling)! While failing to comprehend how a browser could be so pathetic, their life will end miserably as they curses Internet Explorer with their last breath…

Don’t worry though – neither of us have to be in that poor, developer’s shoes. This is how we’ll provide increased browser support:

/* CORRECT WAY */

@keyframe our-fade-in-animation {
	0%   {opacity:0;}
	100% {opacity:1;}
}

div {
	opacity: 1; /* This div is visible by default */
	animation: our-fade-in-animation 1s 1;
}

As you can see, the div will show even if the animation is not able to play. If the animation is able to play like God intended, the div will instantly hide and the epic animation you created will follow through.

The Meat

Now that we know how to make our animated ads play nicely with 18th century browsers (and avoid being hacked to pieces by our clients), let’s get to the meat of the CSS and lay this ad out.

While we are doing this, there are 3 key things to keep in mind:

1. Since these ads could be used on different websites, we’ll make all of our CSS selections very specific. We’ll do this by starting every selector with the id: #ad-1. This will keep our ad’s styles from interfering with existing styles and elements.

2. We will purposefully ignore the animation delay feature when setting up our animations. If we used the animation delay feature, as well as styling our elements the correct way (visible by default), things would abruptly fly off the screen (or hide) when their animation finally played. This is why it’s key for our animations to start instantly – allowing our animations enough time to hide and move elements off the screen before they actually display. We will simulate an animation delay by increasing the duration of the animation and manually adjusting keyframes. You’ll see examples of this when we start animating.

3. Whenever possible, use one animation for multiple elements. This way we can save a lot of time and cut down on code bloat (nobody wants a sumo sitting on their bandwidth). You can create slightly different effects with the same animation by adjusting duration and easing.

Alrighty, we’ll start by setting up our “canvas” for the ad. Let’s make sure it has a relative position so that element’s inside can be positioned correctly. We also need to make sure that any overflow is hidden:

#ad-1 {
	width: 720px;
	height: 300px;
	float: left;
	margin: 40px auto 0;
	background-image: url(../images/ad-1/background.png);
	background-position: center;
	background-repeat: no-repeat;
	overflow: hidden;
	position: relative;
	box-shadow: 0px 0px 6px #000;
}

Next, we’ll style the text and input fields and call for the corresponding animations. We also want to make sure this content has the highest z-index of all our moving parts – that way it can’t be accidentally covered up:

#ad-1 #content {
	width: 325px;
	float: right;
	margin: 40px;
	text-align: center;
	z-index: 4;
	position: relative;
	overflow: visible;
}
#ad-1 h2 {
	font-family: 'Alfa Slab One', cursive;
	color: #137dd5;
	font-size: 50px;
	line-height: 50px;
	text-shadow: 0px 0px 4px #fff;
	animation: delayed-fade-animation 7s 1 ease-in-out; /* This will fade in our h2 with a simulated delay */
}
#ad-1 h3 {
	font-family: 'Boogaloo', cursive;
	color: #202224;
	font-size: 31px;
	line-height: 31px;
	text-shadow: 0px 0px 4px #fff;
	animation: delayed-fade-animation 10s 1 ease-in-out; /* This will fade in our h3 with a simulated delay */
}
#ad-1 form {
	margin: 30px 0 0 6px;
	position: relative;
	animation: form-animation 12s 1 ease-in-out;  /* This will slide in our email address form with a cool elastic effect. This also has a simulated delay */
}
#ad-1 #email {
	width: 158px;
	height: 48px;
	float: left;
	padding: 0 20px;
	font-size: 16px;
	font-family: 'Lucida Grande', sans-serif;
	color: #fff;
	text-shadow: 1px 1px 0px #a2917d;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
	border:1px solid #a2917d;
	outline: none;
	box-shadow: -1px -1px 1px #fff;
	background-color: #c7b29b;
	background-image: linear-gradient(bottom, rgb(216,201,185) 0%, rgb(199,178,155) 100%);
}
#ad-1 #email:focus {
	background-image: linear-gradient(bottom, rgb(199,178,155) 0%, rgb(199,178,155) 100%);

}
#ad-1 #submit {
	height: 50px;
	float: left;
	cursor: pointer;
	padding: 0 20px;
	font-size: 20px;
	font-family: 'Boogaloo', cursive;
	color: #137dd5;
	text-shadow: 1px 1px 0px #fff;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	border:1px solid #bcc0c4;
	border-left: none;
	background-color: #fff;
	background-image: linear-gradient(bottom, rgb(245,247,249) 0%, rgb(255,255,255) 100%);
}
#ad-1 #submit:hover {
	background-image: linear-gradient(bottom, rgb(255,255,255) 0%, rgb(255,255,255) 100%);
}

Now we’re going to style the water and call for the corresponding animations:

#ad-1 ul#water{
	/* If we wanted to add another animation to the water (move it horizontally for instance), we could do that here */
}
#ad-1 li#water-back {
	width: 1200px;
	height: 84px;
	background-image: url(../images/ad-1/water-back.png);
	background-repeat: repeat-x;
	z-index: 1;
	position: absolute;
	bottom: 10px;
	left: -20px;
	animation: water-back-animation 3s infinite ease-in-out; /* Bobbing water effect */
}
#ad-1 li#water-front {
	width: 1200px;
	height: 158px;
	background-image: url(../images/ad-1/water-front.png);
	background-repeat: repeat-x;
	z-index: 3;
	position: absolute;
	bottom: -70px;
	left:-30px;
	animation: water-front-animation 2s infinite ease-in-out; /* Another bobbing water effect - yet slightly different. We'll make this animation move a little bit faster in order to create some perspective. */
}

Let’s style the boat and all of its elements. Again, we’ll need to make calls for the corresponding animations:

#ad-1 ul#boat {
	width: 249px;
	height: 215px;
	z-index: 2;
	position: absolute;
	bottom: 25px;
	left: 20px;
	overflow: visible;
	animation: boat-in-animation 3s 1 ease-out; /* Slides the group in when ad starts */
}
#ad-1 ul#boat li {
	width: 249px;
	height: 215px;
	background-image: url(../images/ad-1/boat.png);
	position: absolute;
	bottom: 0px;
	left: 0px;
	overflow: visible;
	animation: boat-animation 2s infinite ease-in-out; /* Simulate the boat bobbing on the water - similar to the animation already used on the water itself. */
}
#ad-1 #question-mark {
	width: 24px;
	height: 50px;
	background-image: url(../images/ad-1/question-mark.png);
	position: absolute;
	right: 34px;
	top: -30px;
	animation: delayed-fade-animation 4s 1 ease-in-out; /* Fade in the question mark */
}

Last but not least, we’ll style the cloud groups and the single clouds. We’ll also call a pretty nifty animation that will give them a continuous, scrolling effect. Here’s an illustration of what’s going on:

Now here’s the CSS:

#ad-1 #clouds {
	position: absolute;
	top: 0px;
	z-index: 0;
	animation: cloud-animation 30s infinite linear; /* Scrolls the clouds off to the left, resets, and repeats */
}
#ad-1 #cloud-group-1 {
	width:720px;
	position: absolute;
	left:0px;
}
#ad-1 #cloud-group-2 {
	width: 720px;
	position: absolute;
	left: 720px;
}
#ad-1 .cloud-1 {
	width: 172px;
	height: 121px;
	background-image: url(../images/ad-1/cloud-1.png);
	position: absolute;
	top: 10px;
	left: 40px;
}
#ad-1 .cloud-2 {
	width: 121px;
	height: 75px;
	background-image: url(../images/ad-1/cloud-2.png);
	position: absolute;
	top: -25px;
	left: 300px;
}
#ad-1 .cloud-3 {
	width: 132px;
	height: 105px;
	background-image: url(../images/ad-1/cloud-3.png);
	position: absolute;
	top: -5px;
	left: 530px;
}

Phew! That was a lot of CSS. Hang in there, the fun part is next!

The Animations

Remember: Up to this point, nothing is actually being animated. If you were to view the ad now, you would see what 18th century browsers will render – a static ad. We will now actually create the animations we have previously called for in our CSS.

Now that our ad is displaying nicely, let’s give this static ad a shock and bring it to life (horrible pun is 100% intended)! Let’s jump right in – I’ll walk you through what’s going on in the comments:

/* An animation with a simulated delay used to fade in multiple elements. We've achieved a simulated delay by starting the fade in process 80% of the way through the animation (instead of starting the process immediately). We can use this technique and increase the animation duration on any element to reach the desired delay duration: */

@keyframes delayed-fade-animation {
	0%   {opacity: 0;}
	80%  {opacity: 0;}
	100% {opacity: 1;}
}

/* An animation that will slide in our email address form. We've spiced this animation up by overshooting the desired position and sliding it back - this creates a nice elastic effect. As you can see, this animation also uses a simulated delay: */

@keyframes form-animation {
	0%   {opacity: 0; right: -400px;}
	90%  {opacity: 0; right: -400px;}
	95%  {opacity: 0.5; right: 20px;}
	100% {opacity: 1; right: 0px;}
}

/* This is as basic as an animation gets. Only two keyframes and no simulated delay. This animation slides the boat in from the left when the ad begins: */

@keyframes boat-in-animation {
	0%   {left: -200px;}
	100% {left: 20px;}
}

/* Here's our really cool cloud animation. The first group of clouds will start off aligned in the center with the second group off to the right of the screen. While the left group of clouds is sliding off the screen to the left, the right group will begin to appear on the right side of the screen. As soon as the left group is completely off the screen, the clouds will reset (very quickly) to their original positions and repeat: */

@keyframes cloud-animation {
	0%       {left: 0px;}
	99.9999%   {left: -720px;}
	100%     {left: 0px;}
}

/* These last 3 animations are all basically the same - the only difference being the position of each element. They will emulate the bobbing effect of an ocean: */

@keyframes boat-animation {
	0%   {bottom: 0px; left: 0px;}
	25%  {bottom: -2px; left: -2px;}
	70%  {bottom: 2px; left: -4px;}
	100% {bottom: -1px; left: 0px;}
}
@keyframes water-back-animation {
	0%   {bottom: 10px; left: -20px;}
	25%  {bottom: 8px; left: -22px;}
	70%  {bottom: 12px; left: -24px;}
	100% {bottom: 9px; left: -20px;}
}
@keyframes water-front-animation {
	0%   {bottom: -70px; left: -30px;}
	25%  {bottom: -68px; left: -32px;}
	70%  {bottom: -72px; left: -34px;}
	100% {bottom: -69px; left: -30px;}
}

Presto! Our ad has finally come to life. :)

In Closing

During the course of this tutorial, we learned the key concepts of creating animated, 18th century browser supporting(ish) web ads:

1. Child elements take on their parent’s animation in addition to their own animation. We can use this to create more complex animations.
2. When styling our ads, we should use very specific selectors so that our ads won’t interfere with existing CSS.
3. Position and style elements so that if our animations aren’t able to run, the ad will still look decent.
4. When possible, use one animation for multiple elements – save time and code bloat.
5. Frequently refer to Internet Explorer as “the 18th century browser” while shaking your fist in disgust and anger.

Don’t let your creativity be limited by these examples – there are plenty of other creative things you can do with CSS animations that I didn’t cover. For instance, try playing around with CSS transformations.

Thanks for reading and happy CSS’ing!

View demo Download source

View demo Download source

Using the general sibling combinator and the :checked pseudo-class, we can toggle states of other elements by checking a checkbox or a radio button. In this tutorial we will be exploring those CSS3 properties by creating a experimental portfolio filter that will toggle the states of items of a specific type.

The idea is inspired by Roman Komarov’s brilliant “Filtering elements without JS” experiment where he uses checkboxes and radio buttons for filtering colored shapes.

The beautiful Dribbble shots used in the demos are by Mike from Creative Mints.

The Markup

Let’s start with the markup. Our aim is to have four filter buttons that, once clicked, will make the respective type appear or stand out. So, we’ll use some radio buttons that all have the same name since they should belong to the same group (hence only one can have the “checked” state). By default, we want the “all” radio button to be selected or checked. We’ll add some labels for the radio buttons that we will use in order to hide the radio buttons. Clicking a label will select the radio buttons with the respective ID:

<section class="ff-container">

	<input id="select-type-all" name="radio-set-1" type="radio" class="ff-selector-type-all" checked="checked" />
	<label for="select-type-all" class="ff-label-type-all">All</label>

	<input id="select-type-1" name="radio-set-1" type="radio" class="ff-selector-type-1" />
	<label for="select-type-1" class="ff-label-type-1">Web Design</label>

	<input id="select-type-2" name="radio-set-1" type="radio" class="ff-selector-type-2" />
	<label for="select-type-2" class="ff-label-type-2">Illustration</label>

	<input id="select-type-3" name="radio-set-1" type="radio" class="ff-selector-type-3" />
	<label for="select-type-3" class="ff-label-type-3">Icon Design</label>

	<div class="clr"></div>

	<ul class="ff-items">
		<li class="ff-item-type-1">
			<a href="http://dribbble.com/shots/366400-Chameleon">
				<span>Chameleon</span>
				<img src="images/1.jpg" />
			</a>
		</li>
		<li class="ff-item-type-2">
			<!-- ... -->
		</li>
		<li class="ff-item-type-3">
			<!-- ... -->
		</li>
		<!-- ... -->
	</ul>

</section>

The unordered list will contain all the portfolio items as anchors with an image and a span. Each list element will have a type class that will make it possible to identify those elements and “filter” them when we click on one of the radio buttons.

The CSS

We’ll be going through three example effects, but first, let’s take a look at the common style.

I will omit all the vendor prefixes, but you will, of course, find them in the files.

The main section container will have a specific width:

.ff-container{
	width: 564px;
	margin: 10px auto 30px auto;
}

The labels will cover the radio buttons and we’ll give them a fancy gradient and some subtle box shadows:

.ff-container label{
	font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
	width: 25%;
	height: 30px;
	cursor: pointer;
	color: #777;
	text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
	line-height: 33px;
	font-size: 19px;
	background: linear-gradient(top, #ffffff 1%,#eaeaea 100%);
	float:left;
	box-shadow:
		0px 0px 0px 1px #aaa,
		1px 0px 0px 0px rgba(255,255,255,0.9) inset,
		0px 1px 2px rgba(0,0,0,0.2);
}

At the corners we want some rounded edges, so the first label and the last one will get this specific border radius:

.ff-container label.ff-label-type-all{
	border-radius: 3px 0px 0px 3px;
}
.ff-container label.ff-label-type-3{
	border-radius: 0px 3px 3px 0px;
}

For every checked radio button, we want the respective label to have this “pressed” style:

.ff-container input.ff-selector-type-all:checked ~ label.ff-label-type-all,
.ff-container input.ff-selector-type-1:checked ~ label.ff-label-type-1,
.ff-container input.ff-selector-type-2:checked ~ label.ff-label-type-2,
.ff-container input.ff-selector-type-3:checked ~ label.ff-label-type-3{
	background: linear-gradient(top, #646d93 0%,#7c87ad 100%);
	color: #424d71;
	text-shadow: 0px 1px 1px rgba(255,255,255,0.3);
	box-shadow:
		0px 0px 0px 1px #40496e,
		0 1px 2px rgba(0,0,0,0.1) inset;
}

Since we have all our elements in one level, we use the general sibling combinator which is represented by a “tilde” (~) character, in order to reach the respective label. With this “trick” we will also get to all those different types in the portfolio list.

The inputs can be hidden, since we have our labels that will do the job:

.ff-container input{
	display: none;
}

Let’s move on to the item list:

.ff-items{
	position: relative;
	margin: 0px auto;
	padding-top: 20px;
}

The anchor and the span element will have the following style:

.ff-items a{
	display: block;
	position: relative;
	padding: 10px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
	margin: 4px;
	width: 160px;
	height: 120px;
}
.ff-items a span{
	display: block;
	background: rgba(113,123,161, 0.9);
	font-style: italic;
	color: #fff;
	font-weight: bold;
	padding: 20px;
	position: absolute;
	bottom: 10px;
	left: 10px;
	width: 120px;
	height: 0px;
	overflow: hidden;
	opacity: 0;
	text-align: center;
	text-shadow: 1px 1px 1px #303857;
	transition: all 0.3s ease-in-out;
}
.ff-items a:hover span{
	height: 80px;
	opacity: 1;
}
.ff-items li img{
	display: block;
}

When we hover over an anchor, we’ll make the span appear from the bottom, animating its opacity with a transition.

Allright, that was all the “common” style. Now, let’s see how we can filter those elements in style!

Example 1

In the first example, we’ll simply make the items that are selected (i.e. when the respective radio button is “checked”) have the highest opacity.
We’ll add a transition to the list item for the opacity:

.ff-items li{
	margin: 0px;
	float: left;
	opacity: 0;
	width: 188px;
	height: 148px;
	transition: opacity 0.6s ease-in-out;
}

Then we’ll use the general sibling combinator to target the selected type and set the opacity to one:

.ff-container input.ff-selector-type-all:checked ~ .ff-items li,
.ff-container input.ff-selector-type-1:checked ~ .ff-items .ff-item-type-1,
.ff-container input.ff-selector-type-2:checked ~ .ff-items .ff-item-type-2,
.ff-container input.ff-selector-type-3:checked ~ .ff-items .ff-item-type-3{
	opacity: 1;
}

Since we have the “all” type checked by default, all items will initially have the opacity 1.

Now, all the other items should get a very low opacity once we choose a type other than “all”. We’ll use the :not() selector to specify that the list elements that don’t have the selected type class should have an opacity of 0.1:

.ff-container input.ff-selector-type-1:checked ~ .ff-items li:not(.ff-item-type-1),
.ff-container input.ff-selector-type-2:checked ~ .ff-items li:not(.ff-item-type-2),
.ff-container input.ff-selector-type-3:checked ~ .ff-items li:not(.ff-item-type-3){
	opacity: 0.1;
}

The description span of those list elements should not be shown on hover:

.ff-container input.ff-selector-type-1:checked ~ .ff-items li:not(.ff-item-type-1) span,
.ff-container input.ff-selector-type-2:checked ~ .ff-items li:not(.ff-item-type-2) span,
.ff-container input.ff-selector-type-3:checked ~ .ff-items li:not(.ff-item-type-3) span{
	display: none;
}

And that was the first example. Let’s take a look at the next one.

Example 2

In this example, we want the selected items to scale up while the others scale down and become more transparent. So, let’s add a transition to the list elements:

.ff-items li{
	margin: 0px;
	float: left;
	width: 188px;
	height: 148px;
	transition: all 0.6s ease-in-out;
}

By default, we will have all the list items scaled normally and with full opacity. When checking one type, we want those respective item to scale up a bit and have full opacity, too:

.ff-container input.ff-selector-type-1:checked ~ .ff-items .ff-item-type-1,
.ff-container input.ff-selector-type-2:checked ~ .ff-items .ff-item-type-2,
.ff-container input.ff-selector-type-3:checked ~ .ff-items .ff-item-type-3{
	opacity: 1;
	transform: scale(1.1);
}

Note here, that we did not include the “all” type like before.

The other items we’ll scale down and apply a low opacity level:

.ff-container input.ff-selector-type-1:checked ~ .ff-items li:not(.ff-item-type-1),
.ff-container input.ff-selector-type-2:checked ~ .ff-items li:not(.ff-item-type-2),
.ff-container input.ff-selector-type-3:checked ~ .ff-items li:not(.ff-item-type-3){
	opacity: 0.1;
	transform: scale(0.5);
}

And we’ll again hide the description span for the items that don’t have the selected type:

.ff-container input.ff-selector-type-1:checked ~ .ff-items li:not(.ff-item-type-1) span,
.ff-container input.ff-selector-type-2:checked ~ .ff-items li:not(.ff-item-type-2) span,
.ff-container input.ff-selector-type-3:checked ~ .ff-items li:not(.ff-item-type-3) span{
	display:none;
}

Example 3

The last example is just an experiment. We want to do something a bit more tricky here: upon selecting a type, we want to scale all items down and then scale only the items with the selected type back up again.

We basically want to make the other items disappear and since we cannot really animate the display property (not even with some combination of opacity), we use this little trick: when we scale the items down, we’ll also animate the width of the ones that should disappear to 0.

So, let’s give the list items 0 width initially and scale them down to 0 (careful, you will want to avoid this practice for older browsers):

.ff-items li{
	margin: 0px;
	float: left;
	height: 148px;
	width: 0px;
	transform: scale(0,0);
}

When the “all type” get’s checked, we will want the scale to be 1 and the width 188px:

.ff-container input.ff-selector-type-all:checked ~ .ff-items li{
	width: 188px;
	transform: scale(1,1);
	transition: transform 0.3s linear;
}

Remember, we are in this state initially, since we have the “all types” check by default, but we will also transition into the state, if we are currently viewing another type and go back to the “all types”.

Now, when we check one specific type, the items with that type class will first transition to their initial state, first scale down and with a delay of 0.3 seconds, get a width of 0 again.

At the same time, the items that are not of the selected type (those ones that we get with the :not() selector) will have the “scaleDown” animation running, which will basically do the same thing: scale them down and give them a width of 0.

After 0.4 seconds, well make the selected type appear again, with the “scaleUp” animation:

.ff-container input.ff-selector-type-1:checked ~ .ff-items .ff-item-type-1,
.ff-container input.ff-selector-type-2:checked ~ .ff-items .ff-item-type-2,
.ff-container input.ff-selector-type-3:checked ~ .ff-items .ff-item-type-3
{
	transition: transform 0.3s linear, width 0s linear 0.3s;
	animation: scaleUp 0.3s linear 0.4s forwards;
}
.ff-container input.ff-selector-type-1:checked ~ .ff-items li:not(.ff-item-type-1),
.ff-container input.ff-selector-type-2:checked ~ .ff-items li:not(.ff-item-type-2),
.ff-container input.ff-selector-type-3:checked ~ .ff-items li:not(.ff-item-type-3)
{
	animation: scaleDown 0.3s linear forwards;
}
@keyframes scaleUp {
	50% { width: 188px; transform: scale(0,0); }
    100% { width: 188px; transform: scale(1,1); }
}
@keyframes scaleDown {
	0% { width: 188px; transform: scale(1,1);}
	99% { width: 188px; transform: scale(0,0);}
    100% { width: 0px; transform: scale(0,0); }
}

Note that this example is very experimental and it will only work properly in browsers supporting CSS animations. In Firefox 9.0.1 the behavior is not as expected (hovering over the labels seems to falsely trigger something) but it works in Aurora 11.0a2, so it might be some kind of bug.

Demos

1. Demo 1: Opacity
2. Demo 2: Scale
3. Demo 3: Scale and “remove”

And that’s it! I hope you enjoyed this tutorial and find it inspiring!

View demo Download source

View demo Download source

Today we want to show you how to create a neat thumbnail proximity effect with jQuery. The idea is to scale thumbnails when hovering over them and also scale their neighbouring thumbnails proportionally to their distance. We’ll also make a description appear.

This is based on a request we once got from a reader who asked if the effect on http://porscheeveryday.com/ could be achieved with jQuery. This is our attempt to recreate the basics of that effect.

We will be using the jQuery Proximity plugin by James Padolsey.

The illustations in the demos are by Florian Nicolle and they are licensed under the Creative Commons Attribution-NonCommercial 3.0 Unported License.

The Markup

We’ll use an unordered list for the thumbnails and add a division for the description of each image (for this tutorial, we will be going through demo 2):

<ul id="pe-thumbs" class="pe-thumbs">
	<li>
		<a href="#">
			<img src="images/thumbs/1.jpg" />
			<div class="pe-description">
				<h3>Time</h3>
				<p>Since time, and his predestinated end</p>
			</div></a>
	</li>
	<li><!-- ... --></li>
</ul>

Let’s style it!

The CSS

The unordered list will be centered on the page and we’ll add a background image to “shine through” the thumbnails that will have a low opacity:

.pe-thumbs{
	width: 900px;
	height: 400px;
	margin: 20px auto;
	position: relative;
	background: transparent url(../images/3.jpg) top center;
	border: 5px solid #fff;
	box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

We’ll also add a bit of tint to the background image by adding a pseudo element with a rgba background color:

.pe-thumbs:before {
	content: "";
	display: block;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background: rgba(255,102,0,0.2);
}

The list items will float left and we’ll set the position of the anchors and images to relative:

.pe-thumbs li{
	float: left;
	position: relative;
}
.pe-thumbs li a,
.pe-thumbs li a img{
	display: block;
	position: relative;
}

Each thumbnail will have an initial width of 100 pixels and an opacity of 0.2:

.pe-thumbs li a img{
	width: 100px;
	opacity: 0.2;
}

The discription will be hidden by default and then we will make it appear using JavaScript:

.pe-thumbs li a div.pe-description{
	width: 200px;
	height: 100px;
	background: rgba(0,0,0,0.8);
	position: absolute;
	top: 0px;
	left: -200px;
	color: white;
	display: none;
	z-index: 1001;
	text-align: left;
}

And finally, let’s style the content of the description division:

.pe-description h3{
	padding: 10px 10px 0px 10px;
	line-height: 20px;
	font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
	font-size: 22px;
	margin: 0px;
}
.pe-description p{
	padding: 10px 0px;
	margin: 10px;
	font-size: 11px;
	font-style: italic;
	border-top: 1px solid rgba(255,255,255,0.3);
}

And that’s all the style! Let’s move on to the JavaScript!

The JavaScript

The main idea is to first of all calculate the description container size and position when we hover over a thumbnail. This depends of course on the maximum scale of the thumbnail and where the thumbnail is located in the main wrapper. For example, when the thumbnail is close to the right edge, we’ll want to make the description box appear on the left side of the thumbnail.

Then we’ll need to bind the proximity event to the images. The idea is to scale the images up or down according to the position of the mouse. Once the image scales to the maximum value, we set its z-index very high, so that it stays on top, and we show the respective description:

	// list of thumbs
var $list		= $('#pe-thumbs'),
	// list's width and offset left.
	// this will be used to know the position of the description container
	listW		= $list.width(),
	listL		= $list.offset().left,
	// the images
	$elems		= $list.find('img'),
	// the description containers
	$descrp		= $list.find('div.pe-description'),
	// maxScale : maximum scale value the image will have
	// minOpacity / maxOpacity : minimum (set in the CSS) and maximum values for the image's opacity
	settings	= {
		maxScale	: 1.3,
		maxOpacity	: 0.9,
		minOpacity	: Number( $elems.css('opacity') )
	},
	init		= function() {

		// minScale will be set in the CSS
		settings.minScale = _getScaleVal() || 1;
		// preload the images (thumbs)
		_loadImages( function() {

			_calcDescrp();
			_initEvents();

		});

	},
	// Get Value of CSS Scale through JavaScript:
	// http://css-tricks.com/get-value-of-css-rotation-through-javascript/
	_getScaleVal= function() {

		var st = window.getComputedStyle($elems.get(0), null),
			tr = st.getPropertyValue("-webkit-transform") ||
				 st.getPropertyValue("-moz-transform") ||
				 st.getPropertyValue("-ms-transform") ||
				 st.getPropertyValue("-o-transform") ||
				 st.getPropertyValue("transform") ||
				 "fail...";

		if( tr !== 'none' ) {	 

			var values = tr.split('(')[1].split(')')[0].split(','),
				a = values[0],
				b = values[1],
				c = values[2],
				d = values[3];

			return Math.sqrt( a * a + b * b );

		}

	},
	// calculates the style values for the description containers,
	// based on the settings variable
	_calcDescrp	= function() {

		$descrp.each( function(i) {

			var $el		= $(this),
				$img	= $el.prev(),
				img_w	= $img.width(),
				img_h	= $img.height(),
				img_n_w	= settings.maxScale * img_w,
				img_n_h	= settings.maxScale * img_h,
				space_t = ( img_n_h - img_h ) / 2,
				space_l = ( img_n_w - img_w ) / 2;

			$el.data( 'space_l', space_l ).css({
				height	: settings.maxScale * $el.height(),
				top		: -space_t,
				left	: img_n_w - space_l
			});

		});

	},
	_initEvents	= function() {

		$elems.on('proximity.Photo', { max: 80, throttle: 10, fireOutOfBounds : true }, function(event, proximity, distance) {

			var $el			= $(this),
				$li			= $el.closest('li'),
				$desc		= $el.next(),
				scaleVal	= proximity * ( settings.maxScale - settings.minScale ) + settings.minScale,
				scaleExp	= 'scale(' + scaleVal + ')';

			// change the z-index of the element once
			// it reaches the maximum scale value
			// also, show the description container
			if( scaleVal === settings.maxScale ) {

				$li.css( 'z-index', 1000 );

				if( $desc.offset().left + $desc.width() > listL + listW ) {

					$desc.css( 'left', -$desc.width() - $desc.data( 'space_l' ) );

				}

				$desc.fadeIn( 800 );

			}
			else {

				$li.css( 'z-index', 1 );

				$desc.stop(true,true).hide();

			}	

			$el.css({
				'-webkit-transform'	: scaleExp,
				'-moz-transform'	: scaleExp,
				'-o-transform'		: scaleExp,
				'-ms-transform'		: scaleExp,
				'transform'			: scaleExp,
				'opacity'			: ( proximity * ( settings.maxOpacity - settings.minOpacity ) + settings.minOpacity )
			});

		});

	},
	_loadImages	= function( callback ) {

		var loaded 	= 0,
			total	= $elems.length;

		$elems.each( function(i) {

			var $el = $(this);

			$('').load( function() {

				++loaded;
				if( loaded === total )
					callback.call();

			}).attr( 'src', $el.attr('src') );

		});

	};

return {
	init	: init
};

Demos

Check out all three examples:

1. Demo 1: Scale
2. Demo 2: Scale with description
3. Demo 3: Less scaling with description

View demo Download source

View demo Download source

Happy new year, everybody! Today we will create a CSS-only fullscreen background image slideshow. We’ll create different image transitions and also make a title appear using CSS animations.

The images are by Mark Sebastian and they are licensed under the Creative Commons Attribution-ShareAlike 2.0 Generic License.

Note that this will only work in browsers supporting CSS animations.

This tutorial is a part of our latest CSS3 experiments; you can find more of those here:

• Original Hover Effects with CSS3
• Animated Buttons with CSS3
• Splash and Coming Soon Page Effects with CSS3
• Experiments with background-clip: text
• Experimental CSS3 Animations for Image Transitions
• Slopy Elements with CSS3
• CSS3 Lightbox

The Markup

We’ll use an unordered list for the slideshow and we’ll add a span for each image and a division with a heading:

<ul class="cb-slideshow">
	<li>
		<span>Image 01</span>
		<div>
			<h3>re·lax·a·tion</h3>
		</div>
	</li>
	<li><!--...--></li>
	<li><!--...--></li>
</ul>

The spans are going to be the elements that will have the background images of the slideshow.

The CSS

Let’s style the unordered list first. It will be fixed and we will stretch it over the viewport. We’ll also use a :after pseudo-element in order to place a pattern on top of the image:

.cb-slideshow,
.cb-slideshow:after {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 0;
}
.cb-slideshow:after {
    content: '';
    background: transparent url(../images/pattern.png) repeat top left;
}

We’ll use a repeated dot pattern but you could as well use, for example, a css gradient with some transparency.

The span that will contain a slideshow image will be positioned absolutely and have a width and height of 100%. Since we have some text inside, we’ll make the color transparent because we don’t want to see it. The background-size property value “cover” will make sure that the background image covers all the area of the element and hence it is the size of the screen, it will cover all the visible viewport. The opacity is set to 0. We’ll then change that in our animation:

.cb-slideshow li span {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    opacity: 0;
    z-index: 0;
    animation: imageAnimation 36s linear infinite 0s;
}

The animation for each span will last 36 seconds and run an inifinite number of times. But let’s look at the details in a while, first, we will style the division with the headline:

.cb-slideshow li div {
    z-index: 1000;
    position: absolute;
    bottom: 30px;
    left: 0px;
    width: 100%;
    text-align: center;
    opacity: 0;
    color: #fff;
    animation: titleAnimation 36s linear infinite 0s;
}
.cb-slideshow li div h3 {
    font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
    font-size: 240px;
    padding: 0;
    line-height: 200px;
}

The animation for the title division will also take 36 seconds.

Now, we will define the background images for all the spans and the animation delay, so that each following slideshow image and title appear after 6 second of the previous one:

.cb-slideshow li:nth-child(1) span {
    background-image: url(../images/1.jpg)
}
.cb-slideshow li:nth-child(2) span {
    background-image: url(../images/2.jpg);
    animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) span {
    background-image: url(../images/3.jpg);
    animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) span {
    background-image: url(../images/4.jpg);
    animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) span {
    background-image: url(../images/5.jpg);
    animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) span {
    background-image: url(../images/6.jpg);
    animation-delay: 30s;
}

.cb-slideshow li:nth-child(2) div {
    animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) div {
    animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) div {
    animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) div {
    animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) div {
    animation-delay: 30s;
}

Now, let’s have a look at the slideshow animation. Each span will have an animation time of 36 seconds. In those 36 seconds we will change the opacity from 0 to 1 when the animation reaches 8%. And then this opacity gets kept until 17% are reached. When reaching 25% the opacity should already be 0 again and stay like that until the end.

Now, why those values? We want each image to be visible for 6 seconds and we know that at the end of a cycle, we want the first image to show again. We have 6 images, so we will need 36 seconds for a whole cycle to finish. Now, we need to “time” the opacity values accordingly. Knowing that our second image will start animating at 6 seconds, we need to know at what percentile of the animation this will require the first image to fade out. Dividing 6 by 36 gives us 0.166… which would be 16% for our keyframe step. Now, because we don’t want out image to just fade all the time, we’ll define an inbetween step, which we’ll set at half of what we calculated, i.e. 8%. That’s the point that we want to show the image completely and we only want to start fading it out at 17%, making it disappear completely at 25%.

@keyframes imageAnimation {
    0% { opacity: 0; animation-timing-function: ease-in; }
    8% { opacity: 1; animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

We have the same reasoning for the title, just that we want it to disappear a bit quicker, hence the opacity 0 at 19%:

@keyframes titleAnimation {
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}

For browsers that don’t support animations, we’ll simply show the last slideshow image by setting the opacity of the span to 1:

.no-cssanimations .cb-slideshow li span{
	opacity: 1;
}

The no-cssanimations class is added by Modernizr.

Let’s as well take care of the title’s font size when the viewport is smaller. We’ll use media queries in order to set the font size smaller at specific widths:

@media screen and (max-width: 1140px) {
    .cb-slideshow li div h3 { font-size: 140px }
}
@media screen and (max-width: 600px) {
    .cb-slideshow li div h3 { font-size: 80px }
}

And that’s all for the simple version of the slideshow! Now, let’s see how we can spice up the transitions a bit.

Alternative animation example

Now, we can play a bit with the animations for showing the images and their titles.

The following animation will make the image scale up a bit and rotate it slightly:

@keyframes imageAnimation {
	0% {
	    opacity: 0;
	    animation-timing-function: ease-in;
	}
	8% {
	    opacity: 1;
	    transform: scale(1.05);
	    animation-timing-function: ease-out;
	}
	17% {
	    opacity: 1;
	    transform: scale(1.1) rotate(3deg);
	}
	25% {
	    opacity: 0;
	    transform: scale(1.1) rotate(3deg);
	}
	100% { opacity: 0 }
}

The title will slide in from the right (we’ll have to change the text-align for the title division to “right”), and disappear by sliding to the left and fading out:

@keyframes titleAnimation {
	0% {
	    opacity: 0;
	    transform: translateX(200px);
	}
	8% {
	    opacity: 1;
	    transform: translateX(0px);
	}
	17% {
	    opacity: 1;
	    transform: translateX(0px);
	}
	19% {
	    opacity: 0;
	    transform: translateX(-400px);
	}
	25% { opacity: 0 }
	100% { opacity: 0 }
}

There are many possibilities for the image and title transitions, just experiment!

Demos

Here you can find some demos with alternative animations:

1. Demo 1: Simple Fade in, fade out
2. Demo 2: Slight rotation, title slides from the right
3. Demo 3: Image moves up, title moves down
4. Demo 4: Image scales, title moves up, scales and fades out

Currently, the animations are smoothest in Webkit broswers like Chrome and especially Safari.

I hope you enjoyed this tutorial and find it useful and inspiring!

View demo Download source

Today we want to show you how to create a neat lightbox effect using only CSS. The idea is to have some thumbnails that are clickable, and once clicked, the respective large image is shown. Using CSS transitions and animations, we can make the large image appear in a fancy way.

With the help of the pseudo-class :target, we will be able to show the lightbox images and navigate through them.

The beautiful images are by Joanna Kustra and they are licensed under the Attribution-NonCommercial 3.0 Unported Creative Commons License.

Please note that this will only work with browsers that support the :target pseudo class.

Let’s do it!

The Markup

We want to show a set of thumbnails, each one having a title that will appear on hover. When clicking on a thumbnail, we want to show a large version of the image in an overlay container that will make the background a bit more opaque. So, let’s use an unordered list where each list item will contain a thumbnail and a division for the overlay with the respective large version of the image:

<ul class="lb-album">
	<li>
		<a href="#image-1">
			<img src="images/thumbs/1.jpg" alt="image01">
			<span>Pointe</span>
		</a>
		<div class="lb-overlay" id="image-1">
			<img src="images/full/1.jpg" alt="image01" />
			<div>
				<h3>pointe <span>/point/</h3>
				<p>Dance performed on the tips of the toes</p>
				<a href="#image-10" class="lb-prev">Prev</a>
				<a href="#image-2" class="lb-next">Next</a>
			</div>
			<a href="#page" class="lb-close">x Close</a>
		</div>
	</li>
	<li>
		<!-- ... -->
	</li>
</ul>

The anchor for the thumbnail will point to the element with the id image-1 which is the division with the class lb-overlay. In order to navigate through the images, we will add two link elements that point to the previous and next (large) image.
In order to “close” the lightbox, we will somply click on the link with the class lb-close which points to the element with the ID page which is our body.

Note that we only use a navigation in the last demo.

Let’s beautify this naked markup.

The CSS

I’ll omit the vendor prefixes for some of the new properties here in order not to bloat the tutorial. You can, of course, find them in the download files.

Let’s give some basic layout to our unordered list and the thumbnails:

.lb-album{
	width: 900px;
	margin: 0 auto;
	font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
}
.lb-album li{
	float: left;
	margin: 5px;
	position: relative;
}
.lb-album li > a,
.lb-album li > a img{
	display: block;
}
.lb-album li > a{
	width: 150px;
	height: 150px;
	position: relative;
	padding: 10px;
	background: #f1d2c2;
	box-shadow: 1px 1px 2px #fff, 1px 1px 2px rgba(158,111,86,0.3) inset;
	border-radius: 4px;
}

The title for each thumbnail will be invisible and we’ll add a transitions for the opacity which will change to 1 once we hover over the thumbnail anchor. We’ll use a smooth radial gradient as background:

.lb-album li > a span{
	position: absolute;
	width: 150px;
	height: 150px;
	top: 10px;
	left: 10px;
	text-align: center;
	line-height: 150px;
	color: rgba(27,54,81,0.8);
	text-shadow: 0px 1px 1px rgba(255,255,255,0.6);
	font-size: 24px;
	opacity: 0;
	background:
		radial-gradient(
			center,
			ellipse cover,
			rgba(255,255,255,0.56) 0%,
			rgba(241,210,194,1) 100%
		);
	transition: opacity 0.3s linear;
}
.lb-album li > a:hover span{
	opacity: 1;
}

The overlay will have the same radial gradient and we’ll set its position to fixed, with zero height and width:

.lb-overlay{
	width: 0px;
	height: 0px;
	position: fixed;
	overflow: hidden;
	left: 0px;
	top: 0px;
	padding: 0px;
	z-index: 99;
	text-align: center;
	background:
		radial-gradient(
			center,
			ellipse cover,
			rgba(255,255,255,0.56) 0%,
			rgba(241,210,194,1) 100%
		);
}

Once we click on a thumbnail, we’ll cover the whole screen with the overlay, but first, let’s take a look at the children.

Let’s style the division for the main title and the description:

.lb-overlay > div{
	position: relative;
	color: rgba(27,54,81,0.8);
	width: 550px;
	height: 80px;
	margin: 40px auto 0px auto;
	text-shadow: 0px 1px 1px rgba(255,255,255,0.6);
}
.lb-overlay div h3,
.lb-overlay div p{
	padding: 0px 20px;
	width: 200px;
	height: 60px;
}
.lb-overlay div h3{
	font-size: 36px;
	float: left;
	text-align: right;
	border-right: 1px solid rgba(27,54,81,0.4);
}
.lb-overlay div h3 span,
.lb-overlay div p{
	font-size: 16px;
	font-family: Constantia, Palatino, serif;
	font-style: italic;
}
.lb-overlay div h3 span{
	display: block;
	line-height: 6px;
}
.lb-overlay div p{
	font-size: 14px;
	text-align: left;
	float: left;
	width: 260px;
}

We’ll position the link element for closing the lightbox absolutely above the image:

.lb-overlay a.lb-close{
	background: rgba(27,54,81,0.8);
	z-index: 1001;
	color: #fff;
	position: absolute;
	top: 43px;
	left: 50%;
	font-size: 15px;
	line-height: 26px;
	text-align: center;
	width: 50px;
	height: 23px;
	overflow: hidden;
	margin-left: -25px;
	opacity: 0;
	box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
}

The image will have a maximum height of 100%. That’s one way of making the image somewhat reponsive and nicely fittin into the viewport (i.e our overlay). We’ll also add a transition for the opacity level. Once we “open” a large image, the opacity will get animated. We’ll see later how we can use an animation for the image.

.lb-overlay img{
	max-height: 100%;
	position: relative;
	opacity: 0;
	box-shadow: 0px 2px 7px rgba(0,0,0,0.2);
	transition: opacity 0.5s linear;
}

Let’s style the navigation elements:

.lb-prev, .lb-next{
	text-indent: -9000px;
	position: absolute;
	top: -32px;
	width: 24px;
	height: 25px;
	left: 50%;
	opacity: 0.8;
}
.lb-prev:hover, .lb-next:hover{
	opacity: 1;
}
.lb-prev{
	margin-left: -30px;
	background: transparent url(../images/arrows.png) no-repeat top left;
}
.lb-next{
	margin-left: 6px;
	background: transparent url(../images/arrows.png) no-repeat top right;
}

When we click on a thumbnail anchor, it will point to the respective large version of the image which is in the division with the class lb-overlay. So, in order to address this element we can use the pseudo class :target. We’ll add a padding to the overlay and “stretch it” over the whole viewport by setting the width and height to auto (it’s actually not needed explicitely) and set the right and bottom to 0px. Remember, we’ve already set the top and left before.

.lb-overlay:target {
	width: auto;
	height: auto;
	bottom: 0px;
	right: 0px;
	padding: 80px 100px 120px 100px;
}

Now we will also set the opacity of the image and the closing link to 1. The image will fade in, because we’ve set a transition:

.lb-overlay:target img,
.lb-overlay:target a.lb-close{
	opacity: 1;
}

And that’s all the style!
Let’s take a look at the two alternatives that we are using in demo 1 and demo 2.

In the first demo we make the image appear by using an animation that scales it up and increases it’s opacity value:

.lb-overlay:target img {
	animation: fadeInScale 1.2s ease-in-out;
}
@keyframes fadeInScale {
  0% { transform: scale(0.6); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

In the second demo we’ll create the opposite effect, i.e. scale the image down:

.lb-overlay:target img {
	animation: scaleDown 1.2s ease-in-out;
}
@-webkit-keyframes scaleDown {
  0% { transform: scale(10,10); opacity: 0; }
  100% { transform: scale(1,1); opacity: 1; }
}

Demos

• Demo 1: Scale-up / fade-in animation
• Demo 2: Scale-down / fade-in animation
• Demo 3: Fade-in & navigation

You will see that each browser performs quite differently when it comes to the transitions/animations. Adjusting duration, timing functions and delays, one can make the effects smoother, i.e. you can change the timing for Firefox only by changing the -moz- properties.

And that’s it! I hope you enjoyed this tutorial and find it inspiring!

View demo Download source

View demo Download source

It’s always a delight to see some non-straight elements in web design. Angled shapes and diagonal lines can create an interesting visual flow and add some unexpected excitement. Inspired by many superb designs that use non-straight elements, I want to show you some simple examples and ways how to create slopy, skewed elements with CSS only.

So, let’s begin!

Example 1

In our first example, we want to have a pretty normal layout with a little twist: we want a diagonal separation between the elements. We will achieve that by rotating the wrappers of the content articles. But, since we don’t want the content itself to be rotated, we’ll simply rotate each article back.

The Markup

Let’s create a section for our whole content and inside we’ll add some divisions with the class se-slope. Each one is going to have an article with some headline and text:

<section class="se-container">
	<div class="se-slope">
		<article class="se-content">
			<h3>Some headline</h3>
			<p>Some text</p>
		</article>
	</div>
	<div class="se-slope">
		<!-- ... -->
	</div>
	<!-- ... -->
</section>

Now, let’s check our the style.

The CSS

The body will have the same background color like all the even se-slope elements, which is pink. This will “hide” some edges of the rotated elements:

body{
	background: #e90089;
}

The main wrapper will have the overflow hidden because we will want to pull the rotated elements in a way that they would stick out, so let’s not show that:

.se-container{
	display: block;
	width: 100%;
	overflow: hidden;
	padding-top: 150px;
}

The divisions will all be rotated: the odd ones will be black and rotated 5 degrees and the even ones will be pink and rotated -5 degrees. Because of the rotation, we’ll need to adjust the positioning of the odd elements in order to fit as we want them to. So, we’ll add a negative top margin in order to pull them up:

.se-slope{
	margin: 0 -50px;
	transform-origin: left center;
}
.se-slope:nth-child(odd){
	background: #000;
	transform: rotate(5deg);
	margin-top: -200px;
	box-shadow: 0px -1px 3px rgba(0,0,0,0.4);
}
.se-slope:nth-child(even){
	background: #e90089;
	transform: rotate(-5deg);
	box-shadow: 0px 2px 3px rgba(0,0,0,0.4) inset;
}

Let’s center the article:

.se-content{
	margin: 0 auto;
}

Let’s give the headline a special look. We’ll add the :before and :after pseudo element in order to create some asymmetric triangles on both sides using the transparent border trick:

.se-content h3{
	font-size: 60px;
	position: relative;
	display: inline-block;
	padding: 10px 30px 8px 30px;
	height: 80px;
	line-height: 80px;
	margin-bottom: 20px;
	font-family: 'Bitter', 'Trebuchet MS', Arial;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.9);
}
.se-slope:nth-child(odd) .se-content h3{
	background: #e90089;
	color: #000;
}
.se-slope:nth-child(even) .se-content h3{
	background: #000;
	color: #e90089;
}
.se-content h3:before{
	content: '';
	width: 0;
	height: 0;
	border-top: 38px solid transparent;
	border-bottom: 60px solid transparent;
	border-right: 60px solid black;
	position: absolute;
	left: -59px;
	top: 0px;
}
.se-content h3:after{
	content: '';
	width: 0;
	height: 0;
	border-top: 38px solid transparent;
	border-bottom: 60px solid transparent;
	border-left: 60px solid black;
	position: absolute;
	right: -59px;
	top: 0px;
}

Let’s adjust the color for the odd elements:

.se-slope:nth-child(odd) .se-content h3:before,
.se-slope:nth-child(odd) .se-content h3:after{
	border-right-color: #e90089;
	border-left-color: #e90089;
}

The style for the paragraph will be the following:

.se-content p{
	width: 75%;
	max-width: 500px;
	margin: 0 auto;
	font-style: italic;
	font-size: 18px;
	line-height: 24px;
	padding-top: 10px;
}

With the :first-letter selector we can style the first letter differently:

.se-content p:first-letter{
	font-size: 40px;
	font-family: 'Adobe Garamond Pro', Georgia, serif;
}

Let’s rotate the article back to 0 and adjust the paddings to fit the content nicely:

.se-slope:nth-child(odd) .se-content{
	transform: rotate(-5deg);
	color: #e90089;
	padding: 130px 100px 250px 100px;
}
.se-slope:nth-child(even) .se-content{
	transform: rotate(5deg);
	color: #000;
	padding: 150px 100px 250px 100px;
}

And that was the first example! Let’s look at the second one.

Example 2

In the second example, we’ll only use the transparent border trick and some pseudo elements in order to create an arrow-shaped, alternating structure.

The Markup

In the second example we’ll have the same structure, except for some classes: we’ll be adding the class sl-slope-black or sl-slope-pink, depening on which color we want the division to be:

<section class="se-container">
	<div class="se-slope sl-slope-black">
		<article class="se-content">
			<h3>Some headline</h3>
			<p>Some text</p>
		</article>
	</div>
	<div class="se-slope sl-slope-pink">
		<!-- ... -->
	</div>
	<!-- ... -->
</section>

Let style ‘em!

The CSS

The container will have the same style as before and the body will have a pink background, again:

body{
	background: #e90089
}
.se-container{
	display: block;
	width: 100%;
	overflow: hidden;
	box-shadow: 0px 0px 10px #000;
}

The slope divisions will be floating and we’ll stack two next to each other, so let’s set the width to 50%:

.se-slope{
	width: 50%;
	height: 300px;
	position: relative;
	float: left;
	overflow: hidden;
}

Let’s add some padding to the content:

.se-slope .se-content{
	margin: 50px 100px 0px 100px;
}

Let’s give the background colors to the black and pink divisions:

.se-slope-black{
	background: #000;
}
.se-slope-pink{
	background: #e90089;
}

So, each black element is going to have a :after pseudo element style for the arrow shape. The odd black elements will have it pointing to the left and the even ones will have it pointing to the right:

.se-slope-black:nth-child(odd):after,
.se-slope-black:nth-child(even):after{
	content: '';
	position: absolute;
	bottom: 0px;
	width: 0px;
	height: 0px;
	border-top: 150px solid transparent;
	border-bottom: 150px solid transparent;
}
.se-slope-black:nth-child(odd):after{
	border-right: 60px solid #e90089;
	right: 0px;
}
.se-slope-black:nth-child(even):after{
	border-left: 60px solid #e90089;
	left: 0px;
}

Let’s style the headlines and give them the respective background color:

.se-content h3{
	z-index: 10;
	font-size: 30px;
	margin-top: 60px;
	position: relative;
	display: inline-block;
	padding: 15px 20px;
	line-height: 40px;
	font-family: 'Bitter', 'Trebuchet MS', Arial;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.9);
}
.se-slope.se-slope-black h3{
	background: #e90089;
}
.se-slope.se-slope-pink h3{
	background: #000;
}

Let’s add some skewed shape to the ends of the heading using :after and :before:

.se-slope.se-slope-black h3:after,
.se-slope.se-slope-black h3:before,
.se-slope.se-slope-pink h3:after,
.se-slope.se-slope-pink h3:before{
	content: '';
	width: 0px;
	height: 0px;
	top: 0px;
	position: absolute;
}
.se-slope.se-slope-black h3:after{
	border-top: 70px solid transparent;
	border-left: 30px solid #e90089;
	right: -30px;
}
.se-slope.se-slope-black h3:before{
	border-bottom: 70px solid transparent;
	border-right: 30px solid #e90089;
	left: -30px;
}
.se-slope.se-slope-pink h3:after{
	border-top: 70px solid transparent;
	border-right: 30px solid #000;
	left: -30px;
}
.se-slope.se-slope-pink h3:before{
	border-bottom: 70px solid transparent;
	border-left: 30px solid #000;
	right: -30px;
}

We’ll use the paragraph as a decorative element. The ones on the left side will be rotated 15 degrees and the ones on the right side will be rotated -15 degrees:

.se-content p{
	position: absolute;
	z-index: 9;
	opacity: 0.3;
	font-size: 50px;
	text-align: left;
	transform-origin: top center;
}
.se-slope:nth-child(even) .se-content p{
	transform: rotate(-15deg);
	top: -100px;
	right: -50px;
	text-align: left;
	width: 95%;
}
.se-slope:nth-child(odd) .se-content p{
	transform: rotate(15deg);
	top: -100px;
	left: -50px;
	text-align: right;
	width: 90%;
}
.se-slope.sl-slope-pink .se-content p{
	color: #000;
}

And that’s it! I hope you enjoyed this tutorial and find it useful!

View demo Download source

View demo Download source

Today we want to show you how to create a simple blur effect for text-based items. The idea is to have a set of text boxes that will get blurred and scaled down once we hover over them. The item in focus will scale up. This will create some kind of “focus” effect that drwas the attention to the currently hovered item.

We’ll be using CSS3 transitions and some jQuery to apply the respective classes. Since CSS3 transitions are not supported in order browsers, the demo should be best viewed in Safari or Chrome (here we got the smoothest transitions).

Since we will be using transitions, this effect will only work properly in browsers that support them.

So let’s start!

The Markup

The structure will be a section with some articles in i. Each article item will have a header and a paragraph:

<section class="ib-container" id="ib-container">
	<article>
		<header>
			<h3><a href="#">Some Headline</a></h3>
			<span>Some other text</span>
		</header>
		<p>Some introduction</p>
	</article>
	<article>
		<!-- ... -->
	</article>
	<!-- ... -->
</section>

Let’s look at the style.

The CSS

The main container will be of fixed width and centered:

.ib-container{
	position: relative;
	width: 800px;
	margin: 30px auto;
}

Let’s clear the floats (out articles will be floating) with the help of the :before and :after pseudo elements:

.ib-container:before,
.ib-container:after {
    content:"";
    display:table;
}
.ib-container:after {
    clear:both;
}

Now, let’s style the article items. We’ll make them float and add two box shadows, of which the white one will have a large spread distance. Also, we’ll add the transition for three properties: opacity, transform (we want to scale it) and box-shadow:

.ib-container article{
	width: 140px;
	height: 220px;
	background: #fff;
	cursor: pointer;
	float: left;
	border: 10px solid #fff;
	text-align: left;
	text-transform: none;
	margin: 15px;
	z-index: 1;
	box-shadow:
		0px 0px 0px 10px rgba(255,255,255,1),
		1px 1px 3px 10px rgba(0,0,0,0.2);
	transition:
		opacity 0.4s linear,
		transform 0.4s ease-in-out,
		box-shadow 0.4s ease-in-out;
}

For Webkit browsers we’ll also add

-webkit-backface-visibility: hidden

to avoid a short flicker. (You can remove this if you prefer to have a crisp looking text, though).

Let’s style the text elements and create some nice typography. The color and the text-shadow of each element will be matching:

.ib-container h3 a{
	font-size: 16px;
	font-weight: 400;
	color: rgba(0, 0, 0, 1);
	text-shadow: 0px 0px 0px rgba(0, 0, 0, 1);
	opacity: 0.8;
}
.ib-container article header span{
	font-size: 10px;
	font-family: "Big Caslon", "Book Antiqua", "Palatino Linotype", Georgia, serif;
	padding: 10px 0;
	display: block;
	color: rgba(255, 210, 82, 1);
	text-shadow: 0px 0px 0px rgba(255, 210, 82, 1);
	text-transform: uppercase;
	opacity: 0.8;
}
.ib-container article p{
	font-family: Verdana, sans-serif;
	font-size: 10px;
	line-height: 13px;
	color: rgba(51, 51, 51, 1);
	text-shadow: 0px 0px 0px rgba(51, 51, 51, 1);
	opacity: 0.8;
}

And now we’ll add the transition to all three. Again, we’ll have three properties: opacity, text-shadow and color:

.ib-container h3 a,
.ib-container article header span,
.ib-container article p{
	transition:
		opacity 0.2s linear,
		text-shadow 0.5s ease-in-out,
		color 0.5s ease-in-out;
}

The blur class will be applied to all the siblings of the currently hovered item. We want to scale them down a bit and add a big white box shadow, to make the box look blurry. We’ll also decrease the opacity a bit:

.ib-container article.blur{
	box-shadow: 0px 0px 20px 10px rgba(255,255,255,1);
	transform: scale(0.9);
	opacity: 0.7;
}

In order to make the text elements look blurry, we’ll make the color transparent by setting the opacity of the rgba value to 0, and we’ll enlarge the text-shadow blur distance:

.ib-container article.blur h3 a{
	text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.9);
	color: rgba(0, 0, 0, 0);
	opacity: 0.5;
}
.ib-container article.blur header span{
	text-shadow: 0px 0px 10px rgba(255, 210, 82, 0.9);
	color: rgba(255, 210, 82, 0);
	opacity: 0.5;
}
.ib-container article.blur  p{
	text-shadow: 0px 0px 10px rgba(51, 51, 51, 0.9);
	color: rgba(51, 51, 51, 0);
	opacity: 0.5;
}

The currently hovered item will be slightly enlarged and adjust the box shadow. We’ll also set a high z.index to guarantee that the item will always be on top of the other ones when we hover over it:

.ib-container article.active{
	transform: scale(1.05);
	box-shadow:
		0px 0px 0px 10px rgba(255,255,255,1),
		1px 11px 15px 10px rgba(0,0,0,0.4);
	z-index: 100;
	opacity: 1;
}

Last, but not least, we’ll set the opacity of the text elements to 1:

.ib-container article.active h3 a,
.ib-container article.active header span,
.ib-container article.active p{
	opacity; 1;
}

And that’s all the style! Let’s have a look at the JavaScript.

The JavaScript

So, when we hover over an article, we will give all the other articles the class blur and the current one will receive the class active:

var $container	= $('#ib-container'),
	$articles	= $container.children('article'),
	timeout;

$articles.on( 'mouseenter', function( event ) {

	var $article	= $(this);
	clearTimeout( timeout );
	timeout = setTimeout( function() {

		if( $article.hasClass('active') ) return false;

		$articles.not($article).removeClass('active').addClass('blur');

		$article.removeClass('blur').addClass('active');

	}, 75 );

});

$container.on( 'mouseleave', function( event ) {

	clearTimeout( timeout );
	$articles.removeClass('active blur');

});

And that’s all! I hope you enjoyed this little tutorial and find it useful!

View demo Download source