Codrops » Tutorials

Creating an Animated 3D Bouncing Ball with CSS3

Daniel Sternlicht — Tue, 22 May 2012 10:29:08 +0000

Hi guys! Today we are going to see another great example of how to use the power of CSS3. We will start by creating a very cool and realistic 3D ball with pure CSS3 properties, and add a little CSS3 animations for giving the ball a “bouncing” effect.

Please note: the result of this tutorial will only work as intended in browsers that support the respective CSS properties.

The HTML

Let’s start with some very basic HTML:

What we have here are 3 simple DIV elements. “#ballWrapper” is the main DIV which wraps the ball. This DIV will determine the ball’s position and height on the screen. Next, we have the “#ball” element which is the ball markup, and finally there is the “#ballShadow” which holds the ball’s shadow separately from the ball itself.

The CSS

Note that we won’t be using vendor prefixes in the tutorial. You will, of course, find them in the files.

First, we’ll want to set a basic width and height to our ‘#ballWrapper’ DIV. It will help us position it to the center of the screen:

#ballWrapper {
	width: 140px;
	height: 300px;
	position: fixed;
	left: 50%;
	top: 50%;
	margin: -150px 0 0 -70px;
}

Note that I gave the DIV both top and left position properties of ’50%’, and a negative top and left margin which is calculated to be exactly half of the original height and width of the DIV. That way we can center the ball on the screen.

Next in line, let’s give our ball some styles (grow up, it’s not that funny… :])

#ball {
	width: 140px;
	height: 140px;
	border-radius: 70px;
	background: linear-gradient(top,  rgba(187,187,187,1) 0%,rgba(119,119,119,1) 99%);
	box-shadow: inset 0 -5px 15px rgba(255,255,255,0.4),
				inset -2px -1px 40px rgba(0,0,0,0.4),
				0 0 1px #000;
}

We are giving the ball equal width and height and a ‘border-radius’ property with a value of ’70px’ (which is half of the original width and height we’ve set) so it will be a ball and not an oval shape.

Another thing you’ll notice is the background. I gave the ball’s element a linear background and 3 different box shadow levels so it would get the 3D effect. The first box shadow level is for the dark shadowing at the bottom of the ball (see image). Then, we have the second level that is responsible for the blurry glow – again, at the bottom of the ball. Finally the third level is a hardly noticeable blurry shadow behind the contours of the ball.

If you take a look at the ball you’ll notice that there is another small oval shape on top of the ball that gives it a reflection effect. Here is how I created it:

#ball::after {
	content: "";
	width: 80px;
	height: 40px;
	position: absolute;
	left: 30px;
	top: 10px;
	background: linear-gradient(top,  rgba(232,232,232,1) 0%,rgba(232,232,232,1) 1%,rgba(255,255,255,0) 100%);
	border-radius: 40px / 20px;
}

I used the CSS pseudo element ::after and gave it a linear gradient with an opacity. In addition, I’ve set the border radius to ’40px / 20px’ so it has an oval shape.

Next, let’s handle the ball’s shadow:

 #ballShadow {
	width: 60px;
	height: 75px;
	position: absolute;
	z-index: 0;
	bottom: 0;
	left: 50%;
	margin-left: -30px;
	background: rgba(20, 20, 20, .1);
	box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
	border-radius: 30px / 40px;
}

Again, I used the same properties for centering the shadow, but this time I pinned it to the bottom of ‘#ballWrapper’. I also added a semi-transparent background to it, a fitting box shadow and a border radius.

The bouncing animation

Now let’s take a look at the fun stuff…

I’ll start by adding the animation property to our ball:

#ball {
	animation: jump 1s infinite;
}

All I did was to define the animation’s name (jump), the animation’s duration (1 second) and how many times the animation will happen – in our case we use ‘infinite’ which means that it will run forever.

The animation itself:

@keyframes jump {
	0% {
		top: 0;
	}
	50% {
		top: 140px;
		height: 140px;
	}
	55% {
		top: 160px;
		height: 120px;
		border-radius: 70px / 60px;
	}
	65% {
		top: 120px;
		height: 140px;
		border-radius: 70px;
	}
	95% {
		top: 0;
	}
	100% {
		top: 0;
	}
}

So, basically what I’m doing here is to play with the ‘top’ position property of the ball. Starting from 0, through 160 and back to 0. You’ll notice that in the middle of the animation I’m also playing with the ‘border-radius’ property – that way I handle the “impact” of the ball on the ground.

And now the ball’s shadow; first let’s add the shadow’s relevant animation property:

#ballShadow {
	animation: shrink 1s infinite;
}

I used the same values that I used with the ball, only with a different keyframes animation called shrink which looks as follows:

@-keyframes shrink {
	0% {
		bottom: 0;
		margin-left: -30px;
		width: 60px;
		height: 75px;
		background: rgba(20, 20, 20, .1);
		box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
		border-radius: 30px / 40px;
	}
	50% {
		bottom: 30px;
		margin-left: -10px;
		width: 20px;
		height: 5px;
		background: rgba(20, 20, 20, .3);
		box-shadow: 0px 0 20px 35px rgba(20,20,20,.3);
		border-radius: 20px / 20px;
	}
	100% {
		bottom: 0;
		margin-left: -30px;
		width: 60px;
		height: 75px;
		background: rgba(20, 20, 20, .1);
		box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
		border-radius: 30px / 40px;
	}
}

In the shadow’s animation I played with different properties then in the ball’s animation. In order to give it all a realistic effect when it comes to the ball’s distance from the floor, I needed to animate the shadow width, height and opacity. While the ball is close to the floor, the shadow needs to be darker and smaller. When the ball jumps up, the shadow should be lighter and bigger.

Last, but not least, let’s add the “click effect” to the ball which makes it appear as if it moves away from us when we click and hold. To achieve this effect, all we have to use is the ‘:active‘ pseudo-class, add a transition and play with the CSS3 transform ‘scale’ property like this:

#ballWrapper {
	transform: scale(1);
	transition: all 5s linear 0s;
}

#ballWrapper:active {
	transform: scale(0);
}

The transition from a transform value of scale(1) to scale(0) will make it look as if the element is moving away from you.

View demo Download source

Animated 3D Bar Chart with CSS3

Sergey Lukin — Mon, 21 May 2012 09:37:38 +0000

View demo Download source

It all began with a small experiment that was inspired by a tutorial from Nettuts+ which shows a way how to embed a 3D bar chart into HTML pages using CSS, images and JavaScript. After reading the tutorial I challenged myself to turn this idea into pure CSS and see how far I can take it. The initial challenge was to create a classic semi-transparent 3D box with 6 sides. The final challenge was to create a complete 3D bar chart which we will create in this tutorial.

You can check out what I have done before here.

Please note: the result of this tutorial will only work as intended in browsers that support the respective CSS properties.

Let’s write down some key requirements. The chart should be

background-independent
adaptive (independent of the number of bars)
scalable (just like vector graphics)
easily customizable (colors, sizes and proportions)

The planning phase is the most important part of any project. So let’s make a plan.

Before actually coding, I usually write down all potential challenges with solutions I can think of in a specific project and repeat this process until I get something that looks like a strategy that can be executed. Here is the list of challenges with solutions I came up with for this project:

Challenge #1 – A bar with movable inner block

What we know:

A bar should be represented as 3D box consisting of 6 sides
Inner block should be vertically movable in motion. There should be an option to hide the block.

What we’ll need:

1 div for back casing consisting of 3 sides (back side, bottom side, left side)
1 div for front casing consisting of 3 sides (front side, top side, right side)
1 div for inner block consisting of 3 sides exactly as Front casing but with lower z-index
1 div container to position all three pieces relatively and apply a solid background patch in the bottom right corner
1 div container with overflow: hidden to hide the inner block under the bar when it goes down to zero

That makes a total of 5 divs.

You may wonder why would we need two containers? Well, it may be a tricky part but I will try to explain.
We need at least one container per bar (to hold front casing, back casing and inner block relatively to it). We know that our bar should be scalable, so we use percentages to manipulate the bar’s fill value, which requires our container’s height to be equal to the height of one of the bar’s sides.

Seems fine, but wait, looks like there is another problem – there should be an option to hide the inner block in motion, which means it should go “below the bar” and be hidden there. You may say we have a solution for that – overflow: hidden, right? Yes, but not for that container as its height is shorter than the actual height of the bar. That is why we add another container over it and apply overflow: hidden to it.
Hope this makes sense. Let’s move on.

Challenge #2 – The Graph Holder

The graph holder should

be represented in 3D with axes and with 3 sides (background, bottom, left)
be background-independent
be adaptive to the number of bars and their attributes (height, width etc.)
have X and Y axis labels from outside

What we’ll need:

1 unordered list
1 element inside each list item for the X axis labels
1 bar inside each list item
1 list item with an unordered list inside it for the Y axis labels

Hmm, unordered list? Isn’t it more semantic to use a definition list for a bar chart? Well, it is probably more semantic, but we can’t use it because we have to wrap every bar and its own X axis label in one container in order to position them relatively.

All right, but why wouldn’t we use a list item instead of the bar’s second container then? Well, we can’t do that because we have to place the X axis labels outside the graph and since we know that the bar’s second container hides any content that overflows it, we will use list items just to make sure all elements are positioned properly.

The Implementation

Now that we have a strategy, let’s convert it into code.

Please note that no vendor prefixes will be used in this tutorial. You can, of course, find them in the CSS files of the demo.

Challenge #1 – A bar with movable inner block

Let’s go over the purpose of each element once again:

bar-wrapper – hides .bar-inner when it slides down below the bar
bar-container – positions .bar-foreground, .bar-inner, .bar-foreground relatively and places patch for background in a bottom corner
bar-background – creates 3 sides of casing: back, bottom, left
bar-inner – the most important part probably – inner block
bar-foreground – creates 3 sides of casing: front, top, right

First, let’s style the containers.

/* Bar wrapper - hides the inner bar when it goes below the bar, required */
.bar-wrapper {
  overflow: hidden;
}
/* Bar container - this guy is a real parent of a bar's parts - they all are positioned relative to him */
.bar-container {
  position: relative;
  margin-top: 2.5em; /* should be at least equal to the top offset of background casing */
                     /* because back casing is positioned higher than actual bar */
  width: 12.5em; /* required, we have to define the width of a bar */
}
/* right bottom patch - make sure inner bar's right bottom corner is "cut" when it slides down */
.bar-container:before {
  content: "";
  position: absolute;
  z-index: 3; /* to be above .bar-inner */

  bottom: 0;
  right: 0;

  /* Use bottom border to shape triangle */
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 2.5em 2.5em;
  border-color: transparent transparent rgba(183,183,183,1);
}

Note that we set .bar-container‘s width to 12.5em. This number is a sum of the bar’s front and right sides widths – in our example it’s 10 + 2.5 = 12.5

We also use borders to shape the triangle and place it in the bottom right corner of .bar-container to make sure the inner bar’s side is “cut” when it moves vertically. We use the :before pseudo class to generate this element; we will use :before and :after pseudo classes a lot in this tutorial.

Now let’s style the back casing:

/* Back panel */
.bar-background {
  width: 10em;
  height: 100%;
  position: absolute;
  top: -2.5em;
  left: 2.5em;
  z-index: 1; /* just for reference */
}

.bar-background:before,
.bar-background:after {
  content: "";
  position: absolute;
}

/* Bottom panel */
.bar-background:before {
  bottom: -2.5em;
  right: 1.25em;
  width: 10em;
  height: 2.5em;
  transform: skew(-45deg);
}

/* Left back panel */
.bar-background:after {
  top: 1.25em;
  right: 10em;
  width: 2.5em;
  height: 100%;

  /* skew only the Y-axis */
  transform: skew(0deg, -45deg);
}

As you can see we move the casing 2.5em up and right. And sure enough, we skew the left and bottom sides 45 degrees. Notice that we set the first skew value to 0deg, and the second one to -45deg which allows us to skew this element vertically.

It’s time to style the front casing.

/* Front panel */
.bar-foreground {
    z-index: 3; /* be above .bar-background and .bar-inner */
}
.bar-foreground,
.bar-inner {
  position: absolute;
  width: 10em;
  height: 100%;
  top: 0;
  left: 0;
}

.bar-foreground:before,
.bar-foreground:after,
.bar-inner:before,
.bar-inner:after {
  content: "";
  position: absolute;
}

/* Right front panel */
.bar-foreground:before,
.bar-inner:before {
  top: -1.25em;
  right: -2.5em;
  width: 2.5em;
  height: 100%;
  background-color: rgba(160, 160, 160, .27);

  transform: skew(0deg, -45deg);
}

/* Top front panel */
.bar-foreground:after,
.bar-inner:after {
  top: -2.5em;
  right: -1.25em;
  width: 100%;
  height: 2.5em;
  background-color: rgba(160, 160, 160, .2);

  transform: skew(-45deg);
}

Nothing new here, everything is the same as in the back casing styles, we just use different directions.
The good part is that we applied those styles to both front casing and the inner block. Why not? They are exactly the same thing in terms of their shape.

All right, and now the styles for the inner block that we have not yet applied.

.bar-inner {
  z-index: 2; /* to be above .bar-background */
  top: auto; /* reset position top */
  background-color: rgba(5, 62, 123, .6);
  height: 0;
  bottom: -2.5em;
  color: transparent; /* hide text values */

  transition: height 1s linear, bottom 1s linear;
}

/* Right panel */
.bar-inner:before {
  background-color: rgba(5, 62, 123, .6);
}

/* Top panel */
.bar-inner:after {
  background-color: rgba(47, 83, 122, .7);
}

Great! The bars are all set. Let’s move on to the graph holder.

Challenge #2 – The Graph Holder (with axis labels)


  
    2011
    <-- HTML markup of a bar goes here -->
  
  
    2012
    <-- HTML markup of a bar goes here -->
  
  
    
      25%
      50%
      75%
      100%

As you can see we use an unordered list and span elements inside the items to position the X- and Y- axis labels.

/** Graph Holder container **/
.graph-container {
  position: relative; /* required Y axis stuff, Graph Holder's left and bottom sides to be positions properly */
  display: inline-block; /* display: table may also work.. */
  padding: 0; /* let the bars position themselves */
  list-style: none; /* we don't want to see any default  markers */

  /* Graph Holder's Background */
  background-image: linear-gradient(left , rgba(255, 255, 255, .3) 100%, transparent 100%);
  background-repeat: no-repeat;
  background-position: 0 -2.5em;
}

The tricky part here is the background. We use a linear gradient to fill the graph container and lift it up by 2.5em. Why? Because our graph holder’s bottom side (which we will style next) is 2.5em high and is skewed by 45 degrees so there is an empty space in the right bottom corner.

Let’s style the bottom side now.

/* Graph Holder bottom side */
.graph-container:before {
  position: absolute;
  content: "";

  bottom: 0;
  left: -1.25em; /* skew pushes it left, so we move it a bit in opposite direction */

  width: 100%; /* make sure it is as wide as the whole graph */

  height: 2.5em;
  background-color: rgba(183, 183, 183, 1);

  /* Make it look as if in perspective */
  transform: skew(-45deg);
}

We skew it by 45 degrees and move it a bit to the left just to make sure it is positioned properly. We gave it 50% width just to make sure it fills the gap before the first bar, then, every bar will continue drawing this line (we will do it shortly).

Now let’s style left the side of our graph holder:

/* Graph Holder left side*/
.graph-container:after {
  position: absolute;
  content: "";

  top: 1.25em; /* skew pushes it up so we move it down a bit */
  left: 0em;

  width: 2.5em;
  background-color: rgba(28, 29, 30, .4);

  /* Make it look as if in perspective */
  transform: skew(0deg, -45deg);
}

Nothing special here. Just skewed the element by 45 degrees as usual and pushed it down a bit in order to position it properly.

We’re done with the graph holder. Now let’s add some magic to the list items that hold our bars:

/* Bars and X-axis labels holder */
.graph-container > li {
  float: left; /* Make sure bars are aligned one next to another*/
  position: relative; /* Make sure X-axis labels are positioned relatively to this element */
}
/* A small hack to make Graph Holder's background side be wide enough
   ...because our bottom side is skewed and pushed to the right, we have to compensate it in the graph holder's background */
.graph-container > li:nth-last-child(2) {
  margin-right: 2.5em;
}
/* X-axis labels */
.graph-container > li > span {
  position: absolute;
  left: 0;
  bottom: -2em;
  width: 80%; /* play with this one if you change perspective depth */
  text-align: center;

  font-size: 1.5em;
  color: rgba(200, 200, 200, .4);
}

A few things happened here. First of all, we float our bars next to each other. Usually, I’m trying to be very careful with using floats, but in this case it fits perfectly in my opinion.

Secondly, we add some right margin to the last bar. That way we make sure we give enough space to the graph holder’s bottom side to show up in the right bottom corner. Try to remove it and you will see what I mean.

OK, we’re almost there. The last thing left is to add Y-axis markers..

/* Markers container */
.graph-container > li:last-child {
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
}

/* Y-axis Markers list */
.graph-marker-container > li {
  position: absolute;
  left: -2.5em;
  bottom: 0;
  width: 100%;
  margin-bottom: 2.5em;
  list-style: none;
}

/* Y-axis lines general styles */
.graph-marker-container > li:before,
.graph-marker-container > li:after {
  content: "";
  position: absolute;
  border-style: none none dotted;
  border-color: rgba(100, 100, 100, .15);
  border-width: 0 0 .15em;
  background: rgba(133, 133, 133, .15);
}

/* Y-axis Side line */
.graph-marker-container > li:before {
  width: 3.55em;
  height: 0;
  bottom: -1.22em;
  left: -.55em;
  z-index: 2; /* be above .graph-container:after */
  transform: rotate(-45deg);
}

/* Y-axis Background line */
.graph-marker-container li:after {
  width: 100%;
  bottom: 0;
  left: 2.5em;
}

/* Y-axis text Label */
.graph-marker-container span {
  color: rgba(200, 200, 200, .4);
  position: absolute;

  top: 1em;
  left: -3.5em; /* just to push it away from the graph.. */
  width: 3.5em; /* give it absolute value of left offset */

  font-size: 1.5em;
}

As you can see, we set 100% width to our markers holder in order to be able to draw throughout the whole graph, use a dotted border to style our Y-axis lines and position the span element so that the Y-axis label is outside of the graph. With the help of :before and :after we could keep our HTML pretty clean.

Well, we finished setting up all the styles for our graph, however we didn’t set some vital variables – sizes, colors and bars fill values! We said that our graph will be customizable, right? So, I decided not to mix variables with the rest of the code so that you can play with them..

/****************
 * SIZES        *
 ****************/
 /* Size of the Graph */
.graph-container,
.bar-container {
  font-size: 8px;
}
/* Height of Bars */
.bar-container,
.graph-container:after,
.graph-container > li:last-child {
  height: 40em;
}

/****************
 * SPACING      *
 ****************/
/* spacing between bars */
.graph-container > li .bar-container {
  margin-right: 1.5em;
}
/* spacing before first bar */
.graph-container > li:first-child {
  margin-left: 1.5em;
}
/* spacing after last bar */
.graph-container > li:nth-last-child(2) .bar-container {
  margin-right: 1.5em;
}

/****************
 *    Colors    *
 ****************/
/* Bar's Back side */
.bar-background {
  background-color: rgba(160, 160, 160, .1);
}
/* Bar's Bottom side */
.bar-background:before {
  background-color: rgba(160, 160, 160, .2);
}
/* Bar's Left Back side */
.bar-background:after {
  background-color: rgba(160, 160, 160, .05);
}
/* Bar's Front side */
.bar-foreground {
  background-color: rgba(160, 160, 160, .1);
}
/* Bar's inner block */
.bar-inner,
.bar-inner:before { background-color: rgba(5, 62, 123, .6); }
.bar-inner:after { background-color: rgba(47, 83, 122, .7); }

/*************************************
 *   Bars Fill                       *
 * Just an example of filling 3 bars *
 *************************************/
.graph-container > li:nth-child(1) .bar-inner { height: 25%; bottom: 0; }
.graph-container > li:nth-child(2) .bar-inner { height: 50%; bottom: 0; }
.graph-container > li:nth-child(3) .bar-inner { height: 75%; bottom: 0; }

In the demo provided with this tutorial you will not find this part as it is here, because I did something even more interesting there – I used radio buttons to let you play with the variables without modifying the code. Feel free to check out its source code. But if you just need to customize a static graph grab the code snippet from above and customize it to your preference.

Conclusion

Let’s go over some featured CSS specifications/techniques we covered in this tutorial. So, we’ve used

transform: skew() and transform: rotate() in order to transform our elements so that together they generate an illusion of a 3D object
:before and :after pseudo classes to generate elements with CSS and keep our HTML markup relatively clean
:nth-last-child() and :not pseudo classes to target specific list items and avoid adding extra classes/ids to the markup
linear-gradient together with background-position to partially fill an element with a background
rgba() for colors with alpha-transparency
borders to create shapes like a triangle

I really hope that this tutorial was useful to you. If you have any questions regarding this tutorial, let me know in the comments below.

Find this project on Github

View demo Download source

Annotation Overlay Effect with CSS3

Mary Lou — Mon, 14 May 2012 13:05:10 +0000

View demo Download source

In this tutorial we’ll create a little overlay effect with CSS using a combination of the :checked pseudo-class with sibling combinators. The idea is to make an image or element clickable and transition to an overlay-like state that will show us some annotation boxes.

The theme preview images used in this tutorial are by talented Ana Segota and you can purchase her themes and templates here.

The beautiful arrow icons are by Alessio Atzeni and you can find them here.

Please note: the result of this tutorial will only work as intended in browsers that support the respective CSS properties.

The Markup

Our structure will consist of a part for some title and description, and a preview part. The preview part will have the overlay effect. The idea is to add a checkbox, an image and a division for the annotations, containing spans. The trick is to actually put the checkbox on top of the other elements, so that it remains clickable. It needs to stay first in the structure though because we want to be able “to reach” its siblings, the image and the annotations division:


	
		Some title
		Some description
	
	
		
		
		
			Full Localisation Support
			Custom Image Widget
			Blog and Contact Widgets
			Easy Theme Options
			4 Footer Widget Columns

There can be any number of spans. We will position each one individually.
Let’s take a look at the CSS.

The CSS

Note that we will exclude vendor prefixes. You will of course find them in the files.
The division with the class ao-item will have a width of 80% because we want the whole thing to be fluid:

.ao-item {
	width: 80%;
	margin: 0 auto;
	padding: 35px 0;
	position: relative;
	clear: both;
}

The two inner divisions will be floating, so let’s clear some floats with this great technique:

.ao-item:before,
.ao-item:after {
    content:"";
    display:table;
}

.ao-item:after {
    clear:both;
}

.ao-item {
    zoom:1; /* For IE 6/7 (trigger hasLayout) */
} /* from CSSTricks: http://css-tricks.com/pseudo-element-roundup/ */

Let’s style the details part with the title and the description. We’ll make it float right and give it a width of 40%. We’ll also add a left padding which will not cause us any trouble because we’ve applied box-sizing: border-box to all our elements in the normalize.css file. So this will ensure that the division is really 40% wide and the padding is “inside” of that and not added to it:

.ao-details {
	float: right;
	width: 40%;
	padding-left: 20px;
}

Then we’ll add some styling to the text elements:

.ao-details h2 {
	color: #498EA5;
	margin-top: 0;
	text-shadow: 1px 1px 1px rgba(255,255,255,0.5);
	padding-bottom: 10px;
	box-shadow:
		0 1px 0 #DFDEDC,
		0 2px 0 rgba(255,255,255,0.5);
}

.ao-details p {
	color: #999;
	text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
	line-height: 22px;
}

.ao-details p a{
	font-weight: bold;
	color: #498EA5;
}

.ao-details p a:hover{
	color: #2A3344;
}

The preview division will be a bit bigger and floating left:

.ao-preview {
	width: 60%;
	float: left;
	position: relative;
}

Now we’ll style the image. In order to make it responsive, we’ll give it a max-width of 100%. This will ensure that it will be contained in the parent division. The image will have a transition. The idea is to scale it down a bit, once we click on the associated checkbox:

.ao-item img {
	margin: 0 auto;
	max-width: 100%;
	display: block;
	opacity: 0.8;
	box-shadow: 1px 1px 10px rgba(0,0,0,0.2);
	transition: all 0.3s ease-in-out;
}

The annotations division is our overlay and we’ll place it absolutely. We’ll make it invisible by setting the opacity to 0. It will also have a transition: we want it to scale it up and make it become opaque once we click on the checkbox.

.ao-annotations {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	background: rgba(33,62,68,0.3);
	box-shadow: 1px 1px 3px rgba(0,0,0,0.05);
	opacity: 0;
	z-index: 5;
	transform: scale(0.8);
	transition: all 0.3s ease-in-out;
}

The annotation spans will be of absolute position (we’ll set each of the tops and lefts) and we’ll give them a min-width of 140 pixel since the width is in percentage. The transition effect will be to scale down and appear (opacity: 1):

.ao-annotations span {
	display: block;
	position: absolute;
	padding: 10px 25px;
	width: 33%;
	min-width: 140px;
	text-align: center;
	background: rgba(255,255,255,1);
	color: rgba(20,40,47,0.9);
	font-size: 16px;
	font-style: italic;
	text-shadow: 1px 1px 1px rgba(255,255,255,0.9);
	box-shadow: 0px 1px 4px rgba(0,0,0,0.2);
	opacity: 0;
	transform: scale(1.3);
	transition: all 0.3s ease-in-out;
}

Each annotation span is going to have a little arrow and we’ll add it using the pseudo-class :after.

.ao-annotations span:after {
	position: absolute;
	background: transparent url(../images/arrow.png) no-repeat center center;
	width: 32px;
	height: 33px;
	top: 50%;
	left: 100%;
	margin: -16px 0 0 -16px;
	content: '';
}

Two of our spans will have the arrow on the left side:

.ao-annotations span:nth-child(3):after,
.ao-annotations span:nth-child(4):after {
	left: auto;
	right: 100%;
	margin: -16px -16px 0 0;
	background-image: url(../images/arrow_left.png);
}

Now we’ll set the positions for each one of the spans. We’ll use percentages again so that the positioning still makes sense, when we resize things:

.ao-annotations span:nth-child(1) {
	top: 5%;
	left: 5%;
}

.ao-annotations span:nth-child(2) {
	top: 20%;
	left: -13%;
}

.ao-annotations span:nth-child(3) {
	top: 37%;
	right: 2%;
}

.ao-annotations span:nth-child(4) {
	top: 53%;
	right: -8%;
}

.ao-annotations span:nth-child(5) {
	bottom: 18%;
	left: -4%;
}

Let’s take care of that checkbox now. The trick is to put it on top of all the other elements and set its height and width to 100% meaning that it will occupy all the division, so that we can click anywhere to trigger the effect. It will be “hidden” since we set the opacity to 0. But it’s still there, so we can click on it. The z-index needs to be higher than the one of the other elements, so, just to make sure, we’ll set it very high:

input.ao-toggle {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	margin: 0;
	padding: 0;
	opacity: 0;
	z-index: 100;
	border: none;
	cursor: pointer;
}

And now we will define what happens to the siblings when we click on the checkbox. The image will scale down, change its box-shadow and become opaque:

input.ao-toggle:checked + img {
	box-shadow: 1px 1px 6px rgba(0,0,0,0.2);
	opacity: 1;
	transform: scale(0.8);
}

Since we can’t use img:hover anymore (remember, the checkbox is on top of everything else), we’ll use the hover on the checkbox input to trigger the hover effect of the image:

input.ao-toggle:hover + img{
	opacity: 1;
}

The overlay with the class ao-annoations and its spans will scale to 1 and become opaque:

input.ao-toggle:checked ~ .ao-annotations,
input.ao-toggle:checked ~ .ao-annotations span{
	opacity: 1;
	transform: scale(1);
}

To add a little cherry on top, we’ll make each span appear with a delay:

input.ao-toggle:checked ~ .ao-annotations span:nth-child(1) {
	transition-delay: 0.3s;
}

input.ao-toggle:checked ~ .ao-annotations span:nth-child(2) {
	transition-delay: 0.4s;
}

input.ao-toggle:checked ~ .ao-annotations span:nth-child(3) {
	transition-delay: 0.5s;
}

input.ao-toggle:checked ~ .ao-annotations span:nth-child(4) {
	transition-delay: 0.6s;
}

input.ao-toggle:checked ~ .ao-annotations span:nth-child(5) {
	transition-delay: 0.7s;
}

Last, but not least, we’ll add a media query to remove the float for the main divisions and decrease the font size for the annotation spans:


@media screen and (max-width: 730px){
	.ao-item .ao-details,
	.ao-preview {
		float: none;
		width: 100%;
		padding: 0;
		text-align: left;
	}
	.ao-annotations span {
		font-size: 11px;
	}
}

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

View demo Download source

Fluid CSS3 Slideshow with Parallax Effect

Ring Wing — Mon, 30 Apr 2012 11:09:46 +0000

View demo Download source

In this tutorial, we are going to create a slideshow with a parallax effect with the help of some CSS3 properties. We’ll use radio buttons and sibling combinators for controlling which slide is shown. There will be two backgrounds and the idea is to change the background positions and the position of the slider with transitions in order to create a slight parallax effect.

The graphics used in the demo are by: 5Milli (Global Vector Map) and by WeGraphics (Free Vector Infographic Kit).

Please note: the result of this tutorial will only work as intended in browsers that support the respective CSS properties.

The Markup

We will “connect” the input elements to the division with the class sp-content by using the general sibling combinator. For that we will leave the inputs on the same level like the sp-content div. When we click on an input we will change the background color and background position of it (grid pattern) and also the background-position of the sp-parallax-bg div (the world map) with transitions. The respective slide will be shown by moving the sp-slider ul to the right position. The markup looks as follows:

The list elements are the wrappers for each slide and although we are using simply images here, you can use any kind of content.

The CSS

We’ll set the width of the main container to 80% and set the width of the divisions with class sp-content and class sp-parallax-bg to 100%. The sp-content div will have a background color and a background image (grid) that we will move whenever we slide the slider ul. The sp-parallax-bg div will have a map as background image and we will also move the background position.

.sp-slideshow {
    position: relative;
	margin: 10px auto;
	width: 80%;
	max-width: 1000px;
	min-width: 260px;
	height: 460px;
	border: 10px solid #fff;
	border: 10px solid rgba(255,255,255,0.9);
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.sp-content {
    background: #7d7f72 url(../images/grid.png) repeat scroll 0 0;
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.sp-parallax-bg {
    background: url(../images/map.png) repeat-x scroll 0 0;
    background-size: cover;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

The styles of the inputs and the labels:

.sp-slideshow input {
    position: absolute;
	bottom: 15px;
	left: 50%;
	width: 9px;
	height: 9px;
	z-index: 1001;
	cursor: pointer;
    opacity: 0;
}

.sp-slideshow input + label {
    position: absolute;
    bottom: 15px;
	left: 50%;
    width: 6px;
	height: 6px;
	display: block;
	z-index: 1000;
	border: 3px solid #fff;
	border: 3px solid rgba(255,255,255,0.9);
    border-radius: 50%;
    transition: background-color linear 0.1s;
}
.sp-slideshow input:checked + label {
	background-color: #fff;
    background-color: rgba(255,255,255,0.9);
}

.sp-selector-1, .button-label-1 {
    margin-left: -36px;
}

.sp-selector-2, .button-label-2 {
    margin-left: -18px;
}

.sp-selector-4, .button-label-4 {
    margin-left: 18px;
}

.sp-selector-5, .button-label-5 {
    margin-left: 36px;
}

We’ve set the opacity of the inputs to 0 so that they are not visible. The labels are under the radio button and we will make it look like a little circle. All the inputs and labels will be positioned absolutely and we will place them next to each other by applying a left margin.

Next, we will style the arrows which are simply labels with the respective for attribute. Note, that clicking on a label to active an associated input might not work in mobile browsers. But anyway, you can navigate using the dots since we are actually clicking on the inputs.

The arrow labels have the following style:

.sp-arrow {
    position: absolute;
	top: 50%;
	width: 28px;
	height: 38px;
	margin-top: -19px;
	display: none;
	opacity: 0.8;
	cursor: pointer;
	z-index: 1000;
	background: transparent url(../images/arrows.png) no-repeat;
    transition: opacity linear 0.3s;
}
.sp-arrow:hover{
	opacity: 1;
}
.sp-arrow:active{
	margin-top: -18px;
}

Now, let’s define when each arrow is shown. On the first slide we, for example, don’t want to show the left arrow. And on the last slide we don’t want to show the right arrow:

.sp-selector-1:checked ~ .sp-arrow.sp-a2,
.sp-selector-2:checked ~ .sp-arrow.sp-a3,
.sp-selector-3:checked ~ .sp-arrow.sp-a4,
.sp-selector-4:checked ~ .sp-arrow.sp-a5 {
    right: 15px;
	display: block;
	background-position: top right;
}
.sp-selector-2:checked ~ .sp-arrow.sp-a1,
.sp-selector-3:checked ~ .sp-arrow.sp-a2,
.sp-selector-4:checked ~ .sp-arrow.sp-a3,
.sp-selector-5:checked ~ .sp-arrow.sp-a4 {
    left: 15px;
	display: block;
	background-position: top left;
}

When an input is selected, the sp-content div will have a transition for the background-position and the background-color. The second transition is going to take a bit longer:

.sp-slideshow input:checked ~ .sp-content {
    transition: background-position linear 0.6s, background-color linear 0.8s;
}

The div with the world map (sp-parallax-bg) will also have a transition for the background-position:

.sp-slideshow input:checked ~ .sp-content .sp-parallax-bg {
    transition: background-position linear 0.7s;
}

In this way we can add a background parallax effect.

Let’s define the changes to color and background-position for the sp-content div:

input.sp-selector-1:checked ~ .sp-content {
    background-position: 0 0;
	background-color: #727b7f;
}

input.sp-selector-2:checked ~ .sp-content {
    background-position: -100px 0;
	background-color: #7f7276;
}

input.sp-selector-3:checked ~ .sp-content {
    background-position: -200px 0;
	background-color: #737f72;
}

input.sp-selector-4:checked ~ .sp-content {
    background-position: -300px 0;
	background-color: #79727f;
}

input.sp-selector-5:checked ~ .sp-content {
    background-position: -400px 0;
	background-color: #7d7f72;
}

… and the sp-parallax-bg div:

input.sp-selector-1:checked ~ .sp-content .sp-parallax-bg {
    background-position: 0 0;
}

input.sp-selector-2:checked ~ .sp-content .sp-parallax-bg {
    background-position: -200px 0;
}

input.sp-selector-3:checked ~ .sp-content .sp-parallax-bg {
    background-position: -400px 0;
}

input.sp-selector-4:checked ~ .sp-content .sp-parallax-bg {
    background-position: -600px 0;
}

input.sp-selector-5:checked ~ .sp-content .sp-parallax-bg {
    background-position: -800px 0;
}

The unordered list with the class sp-slider will have a width of 500%. This is because we have 5 slides. It will have a transition for the left value, that we will change depening on the input that is checked:

.sp-slider {
    position: relative;
	left: 0;
    width: 500%;
	height: 100%;
	list-style: none;
    margin: 0;
	padding: 0;
    transition: left ease-in 0.8s;
}

Each list element is a slide and it will also have a transition for the opacity. We will give both, the slide and the image inside the box-sizing property of “border-box”. This will allow us to set a padding but also use 100% values for heights and widths and not worry about any overflow:

.sp-slider > li {
	color: #fff;
	width: 20%;
	box-sizing: border-box;
	height: 100%;
	padding: 0 60px;
    float: left;
	text-align: center;
	opacity: 0.4;
    transition: opacity ease-in 0.4s 0.8s;
}
.sp-slider > li img{
	box-sizing: border-box;
	display: block;
	margin: 0 auto;
	padding: 40px 0 50px 0;
	max-height: 100%;
	max-width: 100%;
}

Now we need to set the correct left values for each selected slide:

input.sp-selector-1:checked ~ .sp-content .sp-slider {
    left: 0;
}

input.sp-selector-2:checked ~ .sp-content .sp-slider {
    left: -100%;
}

input.sp-selector-3:checked ~ .sp-content .sp-slider {
    left: -200%;
}

input.sp-selector-4:checked ~ .sp-content .sp-slider {
    left: -300%;
}

input.sp-selector-5:checked ~ .sp-content .sp-slider {
    left: -400%;
}

Each current slide will then get opacity 1:

input.sp-selector-1:checked ~ .sp-content .sp-slider > li:first-child,
input.sp-selector-2:checked ~ .sp-content .sp-slider > li:nth-child(2),
input.sp-selector-3:checked ~ .sp-content .sp-slider > li:nth-child(3),
input.sp-selector-4:checked ~ .sp-content .sp-slider > li:nth-child(4),
input.sp-selector-5:checked ~ .sp-content .sp-slider > li:nth-child(5){
	opacity: 1;
}

That’s all, hope you like it!

View demo Download source

Rotating Words with CSS Animations

Mary Lou — Tue, 17 Apr 2012 11:21:56 +0000

View demo Download source

In today’s tutorial we’ll create another typography effect. The idea is to have some kind of sentence and to rotate a part of it. We’ll be “exchanging” certain words of that sentence using CSS animations.

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

So let’s start!

In the following, we’ll be going through demo 2.

The Markup

We’ll have a main wrapper with a h2 heading that contains first-level spans and two divisions for the rotating words:


	
		Real poetry is like
		creating
		
			breathtaking moments
			lovely sounds
			incredible magic
			unseen experiences
			happy feelings
			beautiful butterflies
		
		

		with a silent touch of
		
			sugar
			spice
			colors
			happiness
			wonder
			happiness

Now, ignoring the garbage placeholder text, we want each span of the rw-word to appear at a time. For that we’ll be using CSS animations. We’ll create one animation for each division and each span will run it, just with different delays.
So, let’s look at the CSS.

The CSS3

First, we will style the main wrapper and center it on the page:

.rw-wrapper{
	width: 80%;
	position: relative;
	margin: 110px auto 0 auto;
	font-family: 'Bree Serif';
	padding: 10px;
}

We’ll add some text shadow to all the elements in the heading:

.rw-sentence{
	margin: 0;
	text-align: left;
	text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
}

And add some specific text styling to the spans:

.rw-sentence span{
	color: #444;
	white-space: nowrap;
	font-size: 200%;
	font-weight: normal;
}

The divisions will be displayed as inline elements, that will allow us to “insert” them into the sentence without breaking the flow:

.rw-words{
	display: inline;
	text-indent: 10px;
}

Each span inside of a rw-words div will be positioned absolutely and we’ll hide any overflow:

.rw-words span{
	position: absolute;
	opacity: 0;
	overflow: hidden;
	width: 100%;
	color: #6b969d;
}

Now, we’ll run two animations. As mentioned previously, we’ll run the same animation for all the spans in one div, just with different delays:

.rw-words-1 span{
	animation: rotateWordsFirst 18s linear infinite 0s;
}
.rw-words-2 span{
	animation: rotateWordsSecond 18s linear infinite 0s;
}
.rw-words span:nth-child(2) {
	animation-delay: 3s;
	color: #6b889d;
}
.rw-words span:nth-child(3) {
	animation-delay: 6s;
	color: #6b739d;
}
.rw-words span:nth-child(4) {
	animation-delay: 9s;
	color: #7a6b9d;
}
.rw-words span:nth-child(5) {
	animation-delay: 12s;
	color: #8d6b9d;
}
.rw-words span:nth-child(6) {
	animation-delay: 15s;
	color: #9b6b9d;
}

Our animations will run one cycle, meaning that each span will be shown once for three seconds, hence the delay value. The whole animation will run 6 (number of images) * 3 (appearance time) = 18 seconds.
We will need to set the right percentage for the opacity value (or whatever makes the span appear). Dividing 6 by 18 gives us 0.333… which would be 33% for our keyframe step. Everything that we want to happen to the span needs to happen before that. So, after tweaking and seeing what fits best, we come up with the following animation for the first words:

@keyframes rotateWordsFirst {
    0% { opacity: 1; animation-timing-function: ease-in; height: 0px; }
    8% { opacity: 1; height: 60px; }
    19% { opacity: 1; height: 60px; }
	25% { opacity: 0; height: 60px; }
    100% { opacity: 0; }
}

We’ll fade in the span and we’ll also animate its height.

The animation for the words in the second div will fade in and animate their width. We added a bit to the keyframe step percentages here, because we want these words to appear just a tiny bit later than the ones of the first word:

@keyframes rotateWordsSecond {
    0% { opacity: 1; animation-timing-function: ease-in; width: 0px; }
    10% { opacity: 0.3; width: 0px; }
	20% { opacity: 1; width: 100%; }
    27% { opacity: 0; width: 100%; }
    100% { opacity: 0; }
}

And that’s it folks! There are many possibilities for the animations, you can check out the other demos and see what can be applied!

Demos

I hope you enjoyed this tutorial and find it inspiring!

View demo Download source

Animated Content Tabs with CSS3

Ring Wing — Thu, 12 Apr 2012 11:27:45 +0000

View demo Download source

Content tabs are a very common and familiar element in web design, and often their turn out to be pretty useful. So, in this tutorial we are going to implement some simple CSS3 content tabs using radio buttons together with the :checked pseudo-class and sibling combinators.

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

The Markup

We will be using input elements to connect to the division with the class content. The content division includes all of the “tab pages”. For each input element we’ll have a label element. All labels will be styled like tabs.


    
	About us

	
	How we work

	
	References

	
	Contact us

	

	
		
            Some content
		
		
            Some content
		
		
            Some content
		
		
            Some content

Every input element has a value, and we can always make an input selected by default by adding the checked attribute.

The CSS

The first thing we need to do is to define some dimension and hide the inputs by setting their opacity to 0:

tabs {
    position: relative;
	margin: 40px auto;
	width: 750px;
}

.tabs input {
	position: absolute;
	z-index: 1000;
	width: 120px;
	height: 40px;
	left: 0px;
	top: 0px;
	opacity: 0;
	cursor: pointer;
}
.tabs input#tab-2{
	left: 120px;
}
.tabs input#tab-3{
	left: 240px;
}
.tabs input#tab-4{
	left: 360px;
}

The inputs will be covering the labels. It will seem, as if we click on the label, but actually we are clicking on the input. This is a trick that will also work in mobile browsers (in some mobile browsers, simply clicking the label will not focus the associated input).

Next, we will make the labels look like tabs by defining some neat style for them. Note that each of the labels has a different z-index. A box-shadow will add depth and realism to the tabs.

.tabs label {
	background: linear-gradient(top, #5ba4a4 0%,#4e8c8a 100%);
	font-size: 15px;
	line-height: 40px;
	height: 40px;
	position: relative;
	padding: 0 20px;
    float: left;
	display: block;
	width: 80px;
	color: #385c5b;
	letter-spacing: 1px;
	text-transform: uppercase;
	font-weight: bold;
	text-align: center;
	text-shadow: 1px 1px 1px rgba(255,255,255,0.3);
    border-radius: 3px 3px 0 0;
    box-shadow: 2px 0 2px rgba(0,0,0,0.1), -2px 0 2px rgba(0,0,0,0.1);
}

.tabs input:hover + label {
	background: #5ba4a4;
}

.tabs label:first-of-type {
    z-index: 4;
    box-shadow: 2px 0 2px rgba(0,0,0,0.1);
}

.tab-label-2 {
    z-index: 3;
}

.tab-label-3 {
    z-index: 2;
}

.tab-label-4 {
    z-index: 1;
}

Since we don’t want the bottom part of the box-shadow to show, we will cover it by using a :after pseudo-element with no content:

.tabs label:after {
    content: '';
	background: #fff;
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 100%;
	height: 2px;
	display: block;
}

When we click on a tab (label), it will be different in style and color from the others. The important thing is to make sure that the “checked” label will be on top of all of the other layers in the tabs. So, we will give it the highest z-index:

.tabs input:checked + label {
    background: #fff;
	z-index: 6;
}

As mentioned before, the content division will contain all of the tab pages, and we will set its z-index to 5, just to be under the selected label. In this way, the box-shadow of content area will cover all of the other labels.

Inside the content area, there are four divisions and each of them has their own content. By default (when their respective label is not selected/clicked) we want them to be hidden. So, we set the opacity to zero and the z-index to 1. We cannot use the display: none property because it’s not supported in transitions.

.content {
    background: #fff;
	position: relative;
    width: 100%;
	height: 370px;
	z-index: 5;
    box-shadow: 0 -2px 3px -2px rgba(0,0,0,0.2), 0 2px 2px rgba(0,0,0,0.1);
    border-radius: 0 3px 3px 3px;
}

.content div {
    position: absolute;
	top: 0;
	left: 0;
	padding: 10px 40px;
	z-index: 1;
    opacity: 0;
    transition: all linear 0.1s;
}

.content div h2,
.content div h3{
	color: #398080;
}
.content div p {
	font-size: 14px;
	line-height: 22px;
	font-style: italic;
	text-align: left;
	margin: 0;
	color: #777;
	padding-left: 15px;
	font-family: Cambria, Georgia, serif;
	border-left: 8px solid rgba(63,148,148, 0.1);
}

When we want a content to appear (label clicked) we set the opacity to 1 and raise the z-index because we want this content division to be on top of all the others:

.tabs input.tab-selector-1:checked ~ .content .content-1,
.tabs input.tab-selector-2:checked ~ .content .content-2,
.tabs input.tab-selector-3:checked ~ .content .content-3,
.tabs input.tab-selector-4:checked ~ .content .content-4 {
    z-index: 100;
    opacity: 1;
    transition: all ease-out 0.2s 0.1s;
}

In this tutorial we just went through the basic example that will fade in/out the contents. You can find more styles and effects in the demos.

This tutorial is part of the CSS3 series on Codrops. Check out the other experiments:

View demo Download source

Slideshow with jmpress.js

Mary Lou — Thu, 05 Apr 2012 16:17:16 +0000

View demo Download source

You have for sure already seen impress.js, a really great JavaScript library for creating extraordinary 3D presentations. The jQuery port jmpress.js let’s you use this library as a jQuery plugin with some added options. We want to show you today how to use this great plugin to create a responsive slideshow with 3D effects.

The icons used in the demo is by Artcore Illustration and they are licensed under the
Creative Commons BY-NC-ND 3.0 license.

So, let’s start!

The Markup

We will have a main container which is a section with the class jms-slideshow. Inside, we’ll have sevaral divisions with the class step. These will be our single slides. Each step or slide will get a data-color class for it’s background color and some data attributes of jmpress.js. You can find all (inline) options here: jmpress.js Documentation – Options. We’ll use some attributes in order to define the position and rotation of the slides in 3D space:



	
		
			Some headline
			Some text
			Read more

Let’s take care of the style.

The CSS

Since we want to make the slideshow responsive, we will give the main container a percentage width, with some min and max values:

.jms-slideshow {
	position: relative;
	width: 80%;
	max-width: 1400px;
	min-width: 640px;
	margin: 20px auto;
	height: 460px;
}

The next wrapper is dynamically added, and this will be the visible slideshow wrapper:

.jms-wrapper {
	width: auto;
	min-width: 600px;
	height: 440px;
	background-color: #fff;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
	-webkit-background-clip: padding;
	-moz-background-clip: padding;
	background-clip: padding-box;
	border: 10px solid #fff;
	border: 10px solid rgba(255, 255, 255, 0.9);
	outline: none;
	transition: background-color 1s linear;
}

The background color classes will be applied to the previous wrapper. The class is defined in the data atrribute data-color in each step. This gives us the possibility to add a background color for each slide and change it with a transition. (The duration of the transition will be re-defined in the JavaScript.)

.color-1 {
	background-color: #E3D8FF;
	background-color: rgba(227, 216, 268, 1);
}
.color-2 {
	background-color: #EBBBBC;
	background-color: rgba(235, 187, 188, 1);
}
.color-3 {
	background-color: #EED9C0;
	background-color: rgba(238, 217, 192, 1);
}
.color-4 {
	background-color: #DFEBB1;
	background-color: rgba(223, 235, 177, 1);
}
.color-5{
	background-color: #C1E6E5;
	background-color: rgba(193, 230, 229, 1);
}

The steps will have the following style:

.step {
	width: 900px;
    height: 420px;
	display: block;
	transition: opacity 1s;
}
.step:not(.active) {
	opacity: 0;
}

Inactive steps will have 0 opacity. When the slides are moved, the opacity will be set to 1.

The inner parts of the slides will have the following style:

.jms-content{
	margin: 0px 370px 0px 20px;
	position: relative;
	clear: both;
}
.step h3{
	color: #fff;
	font-size: 52px;
	font-weight: bold;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
	margin: 0;
	padding: 60px 0 10px 0;
}
.step p {
	color: #fff;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
	font-size: 34px;
	font-weight: normal;
	position: relative;
	margin: 0;
}

The “read more” link will have a little transition by itself: once a step becomes active, it will move up wile fading in:

a.jms-link{
	color: #fff;
	text-transform: uppercase;
	background: linear-gradient(top, #969696 0%,#727272 100%);
	padding: 8px 15px;
	display: inline-block;
	font-size: 16px;
	font-weight: bold;
	color: #fff;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
	box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
	border: 1px solid #444;
	border-radius: 4px;
	opacity: 1;
	margin-top: 40px;
	clear: both;
	transition: all 0.4s ease-in-out 1s;
}
.step:not(.active) a.jms-link{
	opacity: 0;
	margin-top: 80px;
}

The image will be positioned absolutely on the right side of each slide:

.step img{
	position: absolute;
	right: 0px;
	top: 30px;
}

The navigation dots will positioned at the bottom:

.jms-dots{
	width: 100%;
	position: absolute;
	text-align: center;
	left: 0px;
	bottom: 20px;
	z-index: 2000;
	user-select: none;
}

With “user-select: none” the text of an element and its sub-elements will appear as if they can’t be selected.
The span will be a dark little dot:

.jms-dots span{
	display: inline-block;
	position: relative;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #777;
	margin: 3px;
	cursor: pointer;
	box-shadow:
		1px 1px 1px rgba(0,0,0,0.1) inset,
		1px 1px 1px rgba(255,255,255,0.3);
}

And we’ll style a pseudo-element to look like a little white dot:

.jms-dots span.jms-dots-current:after{
	content: '';
	width: 8px;
	height: 8px;
	position: absolute;
	top: 2px;
	left: 2px;
	border-radius: 50%;
	background: linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%);
}

The arrow navigation spans will be positioned on the left and on the right side of the slideshow. We’ll use background images for the arrows:

.jms-arrows{
	user-select: none;
}
.jms-arrows span{
	position: absolute;
	top: 50%;
	margin-top: -40px;
	height: 80px;
	width: 30px;
	cursor: pointer;
	z-index: 2000;
	box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1);
	border-radius: 3px;
}
.jms-arrows span.jms-arrows-prev{
	background: #fff url(../images/arrow_left.png) no-repeat 50% 50%;
	left: -10px;
}
.jms-arrows span.jms-arrows-next{
	background: #fff url(../images/arrow_right.png) no-repeat 50% 50%;
	right: -10px;
}

Now we have styled the slideshow. Let’s move on to the JavaScript!

The JavaScript

We will be using the jmpress.js plugin to create our slideshow. Although you can make use of a lot of its functionality, we will just use the necessary parts to build our script. You can read more about the possibilities and options that jmpress.js offers here.

We will create a jQuery plugin for the slideshow. We can call the plugin like this:

$( '#jms-slider' ).jmslideshow();

The options for the jmpress plugin are defined as default options in our plugin (note that you can specify more than the ones listed):


jmpressOpts	: {
	// set the viewport
	viewPort 		: {
		height	: 400,
		width	: 1300,
		maxScale: 1
	},
	fullscreen		: false,
	hash			: { use : false },
	mouse			: { clickSelects : false },
	keyboard		: { use : false },
	animation		: { transitionDuration : '1s' }
},

You can either change them inside the slideshow plugin, or pass a specific value when you initialize the plugin. As an example:


// specify the jmpress options
var jmpressOpts	= {
	animation		: { transitionDuration : '0.8s' }
};

// call the jmslideshow plugin
$( '#jms-slideshow' ).jmslideshow( $.extend( true, { jmpressOpts : jmpressOpts }, {
	autoplay	: true,
	bgColorSpeed: '0.8s',
	arrows		: false
}));

The following are the set of available options that are available for the slideshow plugin:


$.JMSlideshow.defaults 		= {
	// options for the jmpress plugin.
	// you can add more options...
	jmpressOpts	: {
		// set the viewport
		viewPort 		: {
			height	: 400,
			width	: 1300,
			maxScale: 1
		},
		fullscreen		: false,
		hash			: { use : false },
		mouse			: { clickSelects : false },
		keyboard		: { use : false },
		animation		: { transitionDuration : '1s' }
	},
	// for this specific plugin we will have the following options:
	// shows/hides navigation arrows
	arrows		: true,
	// shows/hides navigation dots/pages
	dots		: true,
	// each step's bgcolor transition speed
	bgColorSpeed: '1s',
	// slideshow on / off
	autoplay	: false,
	// time between transitions for the slideshow
	interval	: 3500
};

Once the slideshow plugin is called, the first function to be executed is the init function:


_init : function( options ) {

	this.options 		= $.extend( true, {}, $.JMSlideshow.defaults, options );

	// the slides
	this.$slides		= $('#jms-slider').children('div');
	// total number of slides
	this.slidesCount	= this.$slides.length;
	// step's bgcolor
	this.colors			= $.map( this.$slides, function( el, i ) { return $( el ).data( 'color' ); } ).join( ' ' );
	// build the necessary structure to run jmpress
	this._layout();
	// initialize the jmpress plugin
	this._initImpress();
	// if support (function implemented in jmpress plugin)
	if( this.support ) {

		// load some events
		this._loadEvents();
		// if autoplay is true start the slideshow
		if( this.options.autoplay ) {

			this._startSlideshow();

		}

	}

},

In the _layout function we are building the necessary structure for the jmpress plugin. Also, we will be adding the navigation arrows / dots in case these are set to true in the options.


_layout				: function() {

	// adds a specific class to each one of the steps
	this.$slides.each( function( i ) {

		$(this).addClass( 'jmstep' + ( i + 1 ) );

	} );

	// wrap the slides. This wrapper will be the element on which we will call the jmpress plugin
	this.$jmsWrapper	= this.$slides.wrapAll( '' ).parent();

	// transition speed for the wrapper bgcolor
	this.$jmsWrapper.css( {
		'-webkit-transition-duration' 	: this.options.bgColorSpeed,
		'-moz-transition-duration' 		: this.options.bgColorSpeed,
		'-ms-transition-duration' 		: this.options.bgColorSpeed,
		'-o-transition-duration' 		: this.options.bgColorSpeed,
		'transition-duration' 			: this.options.bgColorSpeed
	} );

	// add navigation arrows
	if( this.options.arrows ) {

		this.$arrows	= $( '' );

		if( this.slidesCount > 1 ) {

			this.$arrowPrev	= $( '' ).appendTo( this.$arrows );
			this.$arrowNext	= $( '' ).appendTo( this.$arrows );

		}

		this.$el.append( this.$arrows )

	}

	// add navigation dots
	if( this.options.dots ) {

		this.$dots		= $( '' );

		for( var i = this.slidesCount + 1; --i; ) {

			this.$dots.append( ( i === this.slidesCount ) ? '' : '' );

		}

		if( this.options.jmpressOpts.start ) {

			this.$start		= this.$jmsWrapper.find( this.options.jmpressOpts.start ), idxSelected = 0;

			( this.$start.length ) ? idxSelected = this.$start.index() : this.options.jmpressOpts.start = null;

			this.$dots.children().removeClass( 'jms-dots-current' ).eq( idxSelected ).addClass( 'jms-dots-current' );

		}

		this.$el.append( this.$dots )

	}

},

We will initialize the jmpress plugin in the _initImpress function. We will also redefine the “setActive” method of jmpress in order to switch the active navigation dot.


_initImpress		: function() {

	var _self = this;

	this.$jmsWrapper.jmpress( this.options.jmpressOpts );
	// check if supported (function from jmpress.js):
	// it adds the class not-suported to the wrapper
	this.support	= !this.$jmsWrapper.hasClass( 'not-supported' );

	// if not supported remove unnecessary elements
	if( !this.support ) {

		if( this.$arrows ) {

			this.$arrows.remove();

		}

		if( this.$dots ) {

			this.$dots.remove();

		}

		return false;

	}

	// redefine the jmpress setActive method
	this.$jmsWrapper.jmpress( 'setActive', function( slide, eventData ) {

		// change the pagination dot active class
		if( _self.options.dots ) {

			// adds the current class to the current dot/page
			_self.$dots
				 .children()
				 .removeClass( 'jms-dots-current' )
				 .eq( slide.index() )
				 .addClass( 'jms-dots-current' );

		}

		// delete all current bg colors
		this.removeClass( _self.colors );
		// add bg color class
		this.addClass( slide.data( 'color' ) );

	} );

	// add step's bg color to the wrapper
	this.$jmsWrapper.addClass( this.$jmsWrapper.jmpress('active').data( 'color' ) );

},

The _startSlideshow and _stopSlideshow will start and stop the slideshow respectively if the option autoplay is set to true.


// start slideshow if autoplay is true
	_startSlideshow		: function() {

		var _self	= this;

		this.slideshow	= setTimeout( function() {

			_self.$jmsWrapper.jmpress( 'next' );

			if( _self.options.autoplay ) {

				_self._startSlideshow();

			}

		}, this.options.interval );

	},
	// stops the slideshow
	_stopSlideshow		: function() {

		if( this.options.autoplay ) {

			clearTimeout( this.slideshow );
			this.options.autoplay	= false;

		}

	},

Finally, we load the events for the navigation arrows and dots. The touchend event is already defined in the jmpress plugin, but we will need to stop the slideshow in case this event is triggered:


_loadEvents			: function() {

	var _self = this;

	// navigation arrows
	if( this.$arrowPrev && this.$arrowNext ) {

		this.$arrowPrev.on( 'click.jmslideshow', function( event ) {

			_self._stopSlideshow();

			_self.$jmsWrapper.jmpress( 'prev' );

			return false;

		} );

		this.$arrowNext.on( 'click.jmslideshow', function( event ) {

			_self._stopSlideshow();

			_self.$jmsWrapper.jmpress( 'next' );

			return false;

		} );

	}

	// navigation dots
	if( this.$dots ) {

		this.$dots.children().on( 'click.jmslideshow', function( event ) {

			_self._stopSlideshow();

			_self.$jmsWrapper.jmpress( 'goTo', '.jmstep' + ( $(this).index() + 1 ) );

			return false;

		} );

	}

	// the touchend event is already defined in the jmpress plugin.
	// we just need to make sure the slideshow stops if the event is triggered
	this.$jmsWrapper.on( 'touchend.jmslideshow', function() {

		_self._stopSlideshow();

	} );

}

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

View demo Download source

Responsive Horizontal Layout

Mary Lou — Mon, 02 Apr 2012 15:10:26 +0000

View demo Download source

Today we want to show you how to create a horizontal layout with several content panels. The idea is to make each panel individually scrollable and animate a content panel to the left of the viewport once it’s clicked or selected from the menu. The challenge is to deal with different viewport sizes meaning that we will change the layout if the screen is not wide enough in order to be stacked vertically instead of horizontally.

We will be using a couple of useful jQuery plugins:

In the demo we are using Charles Darwin’s The Origin of Species by means of Natural Selection, 6th Edition which you can find as an e-book on Project Gutenberg.

The Markup

The HTML will be built up of a menu that will be fixed at the left side and a container with all the individual panels inside. All will be wrapped by a main container:

The menu will have the following structure:



	
		
			The
			Origin of
			Species
		
		6^th Edition
		by Charles Darwin
	

	
		
			Introduction
		
		
			Chapter I.
			Variation under Domestication
		
		
			Chapter II.
			Variation Under Nature 
		
		
	



Go to the top

We’ll have a headline and a navigation. We’ve also added a loose helper link that we’ll need to show for smaller screens where we will stack the content vertically.

The content will have the following structure:



	

		
			
				Introduction
				...
			
		

		
			
				Chapter I.
				Variation Under Domestication
				Causes of Variability
				...

The first wrapper with the class hs-content-scroller will act like a mask, having the width and height that is visible in the viewport. This will be the division that we’ll scroll horizontally because the second wrapper with the class hs-content-wrapper will be as wide as the sum of all article widths.

As you can see, each article will get an ID which we link to in our navigation.

Let’s style this thing.

The CSS

So, our main aim is to fix the sidebar at the left side of the screen and place the content as a horizontal stack.
Let’s first style the body and some headings. We’ll set both, overflow-x and overflow-y to hidden. We use the separate properties instead of the single “overflow” because we want to adjust something in a media query later, but we’ll get back to that.

We’ll first import the normalize.css, a really nice and sensible alternative to the common resets:

@import url('normalize.css');

body{
	font-family: Baskerville, "Hoefler Text", Garamond, "Times New Roman", serif;
	background: #e9f0f5 url(../images/pattern.png) repeat top left;
	font-weight: 400;
	font-size: 12px;
	color: #333;
	overflow-y: hidden;
	overflow-x: hidden;
}

Next, let’s define some general text styles:

h1, h3, h4{
	font-weight: 400;
}
h1{
	font-style: italic;
	border-bottom: 1px solid rgba(126, 126, 126, 0.3);
	padding: 35px 15px 15px 15px;
	margin: 0px 20px 20px 20px;
	position: relative;
	font-size: 38px;
}
h2{
	font-size: 40px;
	padding-bottom: 15px;
	border-bottom: 5px solid rgba(190, 211, 226, 0.2);
	color: #a9becd;
	text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.4);
	box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.4);
	font-weight: 700;
}
h3{
	font-style: italic;
	font-size: 26px;
	color: #585959;
	text-shadow: 1px 0px 1px rgba(255, 255, 255, 0.4);
}
h4{
	text-transform: uppercase;
	letter-spacing: 5px;
	line-height: 20px;
	padding: 10px 0px;
	color: #626a6f;
	border-bottom: 1px solid rgba(126, 126, 126, 0.1);
	box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.4);
}
a{
	color: #308fd9;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 2px;
}
a:hover{
	color: #87b6da;
}
.hs-headline{
	text-align: center;
}
.hs-author{
	text-transform: uppercase;
	display: block;
	letter-spacing: 2px;
	font-weight: 700;
	padding: 20px 10px;
}

Now, let’s position the menu:

.hs-menu{
	position: fixed;
	z-index: 100;
	color: #f8f8f8;
	background: #131313;
	width: 200px;
	left: 0px;
	top: 0px;
	height: 100%;
}

Setting its position to fixed, we’ll stick the sidebar to the left side of the screen.
The navigation will have the following style:

.hs-menu nav{
	position: absolute;
	top: 250px;
	left: 0px;
	right: 0px;
	bottom: 50px;
}

The position of the navigation will be absolute and by setting a top and bottom value, we have a flexible height. Later, we will add custom scrolling to the navigation so that we don’t have to worry about the menu items fitting into the area.

The anchors will have the following style:

.hs-menu nav a{
	display: block;
	padding: 10px 20px;
	text-align: center;
	outline: none;
	border-bottom: 1px dashed rgba(126, 126, 126, 0.2);
}
.hs-menu nav a:active{
	box-shadow: 7px 0px 17px #000 inset;
}
.hs-menu nav a:first-child{
	border-top: 1px dashed rgba(126, 126, 126, 0.2);
}

The second span in a navigation anchor will be styled differently:

.hs-menu nav a span:nth-child(2){
	display: block;
	color: #fff;
	font-style: italic;
	font-weight: 400;
	text-transform: none;
	padding-top: 3px;
}

Now, let’s style the content part. As mentioned before, the division with the class .hs-content-scroller will be acting as a mask where any overflow won’t be visible. This is basically the same principle as in sliders. The left will be set to 200 pixel because of the sidebar:

.hs-content-scroller{
	position: absolute;
	left: 200px;
	right: 0px;
	overflow: hidden;
	height: 100%;
}

The next wrapper will have a width which allows all the inner content panels to fit inside of it if stacked horizontally. We’ll set the overflow to hidden, because each of our content panels will have a custom scroll bar.

.hs-content-wrapper{
	width: 7950px;
	position: absolute;
	height: 100%;
	overflow: hidden;
}

Each content panel is going to have a width of 500 pixel and float left. We’ll add a transition for the background when we hover and when we add a active class:

.hs-content{
	width: 500px;
	overflow-y: scroll;
	height: 100%;
	float: left;
	border-right: 1px dashed rgba(126, 126, 126, 0.2);
	border-left: 1px dashed rgba(255, 255, 255, 0.5);
	background: transparent;
	transition: background 0.3s linear;
}
.hs-content:hover, .hs-content-active{
	background: #f1f5f8;
}

When we add the custom scrolling to the content panels, we only want them to be visible when we hover over them:

.hs-content:hover .jspVerticalBar,
.hs-menu nav:hover .jspVerticalBar{
	opacity: 1;
}

The first content panel will be a bit narrower:

.hs-content:first-child{
	width: 400px;
}

Let’s add some padding and style the text elements:

.hs-inner{
	padding: 30px 20px 10px 30px;
}
.hs-inner p{
	font-size: 18px;
	line-height: 24px;
	text-align: justify;
	position: relative;
	padding: 10px 0px;
	text-shadow: 1px 0px 1px rgba(255, 255, 255, 0.8);
}
.hs-inner p:first-letter{
	font-size: 28px;
}
#introduction .hs-inner p:first-of-type{
	font-size: 24px;
	text-align: left;
	line-height: 36px;
	font-style: italic;
	color: #75838D;
	letter-spacing: 0px;
}

Remember that little anchor right after the sidebar? When clicking that anchor, the page will scroll up. We’ll only need this anchor when our screen is not big enough to stack the content panels horizontally but only vertically, so we’ll set it to display: none initially. In a media query we’ll then show it.

a.hs-totop-link{
	display: none;
	position: fixed;
	z-index: 10000;
	bottom: 0px;
	width: 100%;
	height: 40px;
	line-height: 40px;
	font-size: 14px;
	color: #aaa;
	text-shadow: 1px 1px 1px #fff;
	font-weight: 700;
	cursor: pointer;
	text-transform: uppercase;
	text-align: center;
	background: linear-gradient(top, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%);
	border-top: 1px solid #cacaca;
}

When we reach the size of the iPad, we want to get rid of the hover behavior and show the horizontal scrollbar. This will allow us to “swipe” the content on the iPad:

/* Media Queries */
@media screen and (max-width: 1024px) {
	.jspVerticalBar{
		opacity: 1;
	}
	.hs-content-scroller{
		overflow-x: scroll;
	}
	.hs-content:hover{
		background: transparent;
	}
	.hs-content-active:hover {
		background: #f1f5f8;
	}
}

At this point, we’ll change the layout in order to be stacked vertically. We have to “reset” all the properties that forced the content to be stacked horizontally. We’ll also show the anchor that will bring us back to the top:

@media screen and (max-width: 715px) {
	body{
		overflow-x: auto;
		overflow-y: auto;
	}
	a.hs-totop-link{
		display: block;
	}
	.hs-menu{
		position: relative;
		width: 100%;
		height: 460px;
	}
	.hs-menu nav{
		top: 230px;
		bottom: 20px;
	}
	.hs-content-scroller{
		position: relative;
		height: auto;
		left: 0;
	}
	.hs-content-wrapper{
		height: auto;
		width: auto;
		margin-left: 0px;
	}
	.hs-content{
		border: none;
	}
	.hs-content, .hs-content:first-child{
		width: auto;
		float: none;
		overflow-y: auto;
	}
}

And that’s all the style! Now, let’s take a look at the JavaScript!

The JavaScript

First, we will set some variables and cache some elements:


var $container			= $( '#hs-container' ),
	// the scroll container that wraps the articles
	$scroller			= $container.find( 'div.hs-content-scroller' ),
	$menu				= $container.find( 'aside' ),
	// menu links
	$links				= $menu.find( 'nav > a' ),
	$articles			= $container.find( 'div.hs-content-wrapper > article' ),
	// button to scroll to the top of the page
	// only shown when screen size < 715
	$toTop				= $container.find( 'a.hs-totop-link' ),
	// the browser nhistory object
	History 			= window.History,
	// animation options
	animation			= { speed : 800, easing : 'easeInOutExpo' },
	// jScrollPane options
	scrollOptions		= { verticalGutter : 0, hideFocus : true },

The init function will be the first one to execute:


init				= function() {

	// initialize the jScrollPane on both the menu and articles
	_initCustomScroll();
	// initialize some events
	_initEvents();
	// sets some css properties
	_layout();
	// jumps to the respective chapter
	// according to the url
	_goto();

},

The first step is to create / initialize the jScrollPane (the custom scrollbars) on both the menu and the articles. However, for the articles, we will not do this in case the screen size is smaller than 715px:


_initCustomScroll	= function() {

	// Only add custom scrolling to articles if screen size > 715.
	// If not, the articles will be expanded (vertical layout)
	if( $(window).width() > 715 ) {

		$articles.jScrollPane( scrollOptions );

	}
	// add custom scrolling to menu
	$menu.children( 'nav' ).jScrollPane( scrollOptions );

},

We will load the events for the window, the menu links and the articles.

On window resize, we will need to reinitialize the jScrollPane custom scrollbars, or destroy them in case the screen's size gets smaller than 715px.

On window statechange, we will jump to the respective state / chapter. We are using History.js by Benjamin Lupton to control the history states when the user navigates through the page:


$(window).on({
	// when resizing the window we need to reinitialize or destroy the jScrollPanes
	// depending on the screen size
	'smartresize' : function( event ) {

		_layout();

		$('article.hs-content').each( function() {

			var $article 	= $(this),
				aJSP		= $article.data( 'jsp' );

			if( $(window).width() > 715 ) {

				( aJSP === undefined ) ? $article.jScrollPane( scrollOptions ) : aJSP.reinitialise();

				_initArticleEvents();

			}
			else {

				// destroy article's custom scroll if screen size <= 715px
				if( aJSP !== undefined )
					aJSP.destroy();

				$container.off( 'click', 'article.hs-content' );

			}

		});

		var nJSP = $menu.children( 'nav' ).data( 'jsp' );
		nJSP.reinitialise();

		// jumps to the current chapter
		_goto();

	},
	// triggered when the history state changes - jumps to the respective chapter
	'statechange' : function( event ) {

		_goto();

	}
});

When we click on an article or menu link, we will check to which chapter it refers to, and we will change the state of the browser history object. This will trigger the statechange event which in turn will make the page / scrolling division jump to the respective area.


$links.on( 'click', function( event ) {

	var href		= $(this).attr('href'),
		chapter		= ( href.search(/chapter/) !== -1 ) ? href.substring(8) : 0;

	_saveState( chapter );

	return false;

});

$container.on( 'click', 'article.hs-content', function( event ) {

	var id			= $(this).attr('id'),
		chapter		= ( id.search(/chapter/) !== -1 ) ? id.substring(7) : 0;

	_saveState( chapter );

	return false;

});

_saveState			= function( chapter ) {

	// adds a new state to the history object
	// this will trigger the statechange on the window
	if( History.getState().url.queryStringToJSON().chapter !== chapter ) {

		History.pushState( null, null, '?chapter=' + chapter );

	}

},

We will also control the overflow property of the "scroller" (divison with class "hs-content-scroller") according to the screen size.


_layout				= function() {

	var windowWidth	= $(window).width();
	switch( true ) {

		case ( windowWidth <= 715 ) : $scroller.scrollLeft( 0 ).css( 'overflow', 'visible' ); break;
		case ( windowWidth <= 1024 ): $scroller.css( 'overflow-x', 'scroll' ); break;
		case ( windowWidth > 1024 ) : $scroller.css( 'overflow', 'hidden' ); break;

	};

},

The _goto function triggers the animation for changing the area / chapter on the page. We get the current chapter from the history state URL, and given the respective article we either scroll to the left or top depending on the screen size. Also, if we are in landscape mode, the element scrolling is the div "hs-content-scroller", otherwise it's the BODY element.


_goto				= function( chapter ) {

	// get the url from history state (e.g. chapter=3) and extract the chapter number
var chapter 	= chapter || History.getState().url.queryStringToJSON().chapter,
	isHome		= ( chapter === undefined ),
	// we will jump to the introduction chapter if theres no chapter
	$article 	= $( chapter ? '#' + 'chapter' + chapter : '#' + 'introduction' );

	if( $article.length ) {

			// left / top of the element
		var left		= $article.position().left,
			top			= $article.position().top,
			// check if we are scrolling down or left
			// is_v will be true when the screen size < 715
			is_v		= ( $(document).height() - $(window).height() > 0 ),
			// animation parameters:
			// if vertically scrolling then the body will animate the scrollTop,
			// otherwise the scroller (div.hs-content-scroller) will animate the scrollLeft
			param		= ( is_v ) ? { scrollTop : (isHome) ? top : top + $menu.outerHeight( true ) } : { scrollLeft : left },
			$elScroller	= ( is_v ) ? $( 'html, body' ) : $scroller;

		$elScroller.stop().animate( param, animation.speed, animation.easing, function() {

			// active class for selected chapter
			$articles.removeClass( 'hs-content-active' );
			$article.addClass( 'hs-content-active' );

		} );

	}

},

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

View demo Download source

Login and Registration Form with HTML5 and CSS3

Stéphanie Walter — Tue, 27 Mar 2012 12:45:23 +0000

View demo Download source

In this tutorial we are going to create two HTML5 forms that will switch between login and registration using the CSS3 pseudo class :target. We will style it using CSS3 and an icon font. The idea behind this demo is to show the user the login form and provide a link to “switch” to the registration form.

Note that this is for demo purpose only, it will only work in browser supporting the :target pseudo class, and you should not use this code on a live website without providing solid fallback.

In the following, we will be going through Demo 1.

The HTML

In the HTML, we will put both forms, hiding the second one with CSS. Here is the code, I’ll explain some of the interesting parts later.


	
	
	
	
		
			
				Log in
				
					 Your email or username 
					
				
				
					 Your password 
					
				
				
					
					Keep me logged in
				
				
					
				
				
					Not a member yet ?
					Join us
				
			
		

		
			
				 Sign up 
				
					Your username
					
				
				
					 Your email
					
				
				
					Your password 
					
				
				
					Please confirm your password 
					
				
				
					
				
				
					Already a member ?
					 Go and log in

We’ve added some HTML5 goodness here and used some of the new inputs. The input type=password automatically hides what the user is typing and replaces it with dots (depending on browser). The input type=email enables the browser to check if what the user entered has the format of a valid email address. We’ve also used the require=required attribute; browsers that support this attribute will not let the user submit the form until this field is filled, no JavaScript required.
The autocomplete=on attribute will prefill values based on earlier user input. We also used some nice placeholders for the inputs that will show some guiding value when the input is not filled.

Now the two tricky parts. You might have noticed the two links at the top of the form. This is a little trick that will make our form behave nicely when playing with anchors, so that it won’t “jump” on long pages when we click on the switching link and trigger the :target pseudo-class.

The second little trick is related to the use of the icon font. We will be using a data-attribute to display the icons. By setting data-icon=”icon_character” with the according character in the HTML we will just need one CSS attribute selector to style all the icons. Read more about this technique on 24 Ways: Displaying Icons with Fonts and Data- Attributes.

The CSS

For the clearness of the code in this tutorial, I will omit all the vendor prefixes, but you will, of course, find them in the files. Once again, I’m using some pretty advanced CSS3 tricks that might not work in all browsers. Let’s get started.

Styling both forms using CSS3

First, let’s give our two forms some general styling for the container.

#subscribe,
#login{
	position: absolute;
	top: 0px;
	width: 88%;
	padding: 18px 6% 60px 6%;
	margin: 0 0 35px 0;
	background: rgb(247, 247, 247);
	border: 1px solid rgba(147, 184, 189,0.8);
	box-shadow:
		0pt 2px 5px rgba(105, 108, 109,  0.7),
		0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset;
	border-radius: 5px;
}
#login{
	z-index: 22;
}

We’ve added a nice box shadow that’s made of two shadows: an inset one to create the inner blue glow, and an outside shadow. We’ll explain the z-index in a bit.

In the following we will style the header with some background clipping:

/**** general text styling ****/
#wrapper h1{
	font-size: 48px;
	color: rgb(6, 106, 117);
	padding: 2px 0 10px 0;
	font-family: 'FranchiseRegular','Arial Narrow',Arial,sans-serif;
	font-weight: bold;
	text-align: center;
	padding-bottom: 30px;
}

/** For the moment only webkit supports the background-clip:text; */
#wrapper h1{
	background:
	-webkit-repeating-linear-gradient(-45deg,
		rgb(18, 83, 93) ,
		rgb(18, 83, 93) 20px,
		rgb(64, 111, 118) 20px,
		rgb(64, 111, 118) 40px,
		rgb(18, 83, 93) 40px);
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
}

#wrapper h1:after{
	content:' ';
	display:block;
	width:100%;
	height:2px;
	margin-top:10px;
	background:
		linear-gradient(left,
			rgba(147,184,189,0) 0%,
			rgba(147,184,189,0.8) 20%,
			rgba(147,184,189,1) 53%,
			rgba(147,184,189,0.8) 79%,
			rgba(147,184,189,0) 100%);
}

Note that at this moment only webkit browsers support background-clip: text, so we will create a stripped background only for webkit here, and clip it to the text to add the stripes to the H1 title. Since the background-clip: text property currently only works in Webkit browsers, I decided to go only with the webkit prefix. That’s the reason why I split the CSS declaration into two parts, and use a webkit prefixed gradient only. Only using the –webkit- prefix is bad practice, it’s only for demo purpose, and you should never do this on real a website! That’s also where the -webkit-text-fill-color: transparent comes in handy: it enables us to only have a transparent background on the webkit browsers, all the other ones will ignore it and give us the provided text color fallback.

We also created a fading line under the title with the help of the :after pseudo-class. We use a 2px height gradient and fade the background to 0 opacity at both ends.

Now let’s style our inputs and give them a nicer look.

/**** advanced input styling ****/
/* placeholder */
::-webkit-input-placeholder  {
	color: rgb(190, 188, 188);
	font-style: italic;
}
input:-moz-placeholder,
textarea:-moz-placeholder{
	color: rgb(190, 188, 188);
	font-style: italic;
}
input {
  outline: none;
}

First we style the inputs, and remove the outline. But be careful here; the outline helps the user know which input is focused, so if you remove it, you should provide some :active and :focus states for the inputs.

/* all the input except submit and checkbox */
#wrapper input:not([type="checkbox"]){
	width: 92%;
	margin-top: 4px;
	padding: 10px 5px 10px 32px;
	border: 1px solid rgb(178, 178, 178);
	box-sizing : content-box;
	border-radius: 3px;
	box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
	transition: all 0.2s linear;
}
#wrapper input:not([type="checkbox"]):active,
#wrapper input:not([type="checkbox"]):focus{
	border: 1px solid rgba(91, 90, 90, 0.7);
	background: rgba(238, 236, 240, 0.2);
	box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;
}

Here we used the :not pseudo class, to style all inputs, except the checkbox. I provided a :focus and :active state, since I decided to remove the outline.

And now the fun part: the icon font. Since we can’t use :before and :after pseudo classes on inputs, we’ll have to cheat a little bit: we’ll add the icon to the label, and then place it in the input. I’m using the fontomas library which puts together some nice icons. You can rearrange them to set the icon to a specific letter. Remember the data-icon attribute? It’s where you should put the letter. I used data-icon=’u’ for user, ‘e’ for email, ‘p’ for password. Once I chose the letters, I downloaded the font, and used the fontsquirrel font generator to transform it into a @font-face compatible format.

@font-face {
    font-family: 'FontomasCustomRegular';
    src: url('fonts/fontomas-webfont.eot');
    src: url('fonts/fontomas-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/fontomas-webfont.woff') format('woff'),
         url('fonts/fontomas-webfont.ttf') format('truetype'),
         url('fonts/fontomas-webfont.svg#FontomasCustomRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/** the magic icon trick ! **/
[data-icon]:after {
    content: attr(data-icon);
    font-family: 'FontomasCustomRegular';
    color: rgb(106, 159, 171);
    position: absolute;
    left: 10px;
    top: 35px;
	width: 30px;
}

Yeah, that’s it folks, you don’t need to have a class for each icon. We used content: attr(data-icon) to retrieve the letter from the data-icon attribute, so we only have to declare the font, choose a nice color and position it.

Now let’s style the submit button for both forms.

/*styling both submit buttons */
#wrapper p.button input{
	width: 30%;
	cursor: pointer;
	background: rgb(61, 157, 179);
	padding: 8px 5px;
	font-family: 'BebasNeueRegular','Arial Narrow',Arial,sans-serif;
	color: #fff;
	font-size: 24px;
	border: 1px solid rgb(28, 108, 122);
	margin-bottom: 10px;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
	border-radius: 3px;
	box-shadow:
		0px 1px 6px 4px rgba(0, 0, 0, 0.07) inset,
		0px 0px 0px 3px rgb(254, 254, 254),
		0px 5px 3px 3px rgb(210, 210, 210);
	transition: all 0.2s linear;
}
#wrapper p.button input:hover{
	background: rgb(74, 179, 198);
}
#wrapper p.button input:active,
#wrapper p.button input:focus{
	background: rgb(40, 137, 154);
	position: relative;
	top: 1px;
	border: 1px solid rgb(12, 76, 87);
	box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset;
}
p.login.button,
p.signin.button{
	text-align: right;
	margin: 5px 0;
}

The trick here is to use the box-shadow in order to create some extra borders. You can only use one border, but as many box-shadows as you want. We will use the length value to create a “fake” second white border, 3px wide, with no blur.

Then we’ll style the checkbox, nothing very special here:

/* styling the checkbox "keep me logged in"*/
.keeplogin{
	margin-top: -5px;
}
.keeplogin input,
.keeplogin label{
	display: inline-block;
	font-size: 12px;
	font-style: italic;
}
.keeplogin input#loginkeeping{
	margin-right: 5px;
}
.keeplogin label{
	width: 80%;
}

We will style the bottom of the form using repeating linear gradients to create a striped background.

p.change_link{
	position: absolute;
	color: rgb(127, 124, 124);
	left: 0px;
	height: 20px;
	width: 440px;
	padding: 17px 30px 20px 30px;
	font-size: 16px	;
	text-align: right;
	border-top: 1px solid rgb(219, 229, 232);
	border-radius: 0 0  5px 5px;
	background: rgb(225, 234, 235);
	background: repeating-linear-gradient(-45deg,
	rgb(247, 247, 247) ,
	rgb(247, 247, 247) 15px,
	rgb(225, 234, 235) 15px,
	rgb(225, 234, 235) 30px,
	rgb(247, 247, 247) 30px
	);
}
#wrapper p.change_link a {
	display: inline-block;
	font-weight: bold;
	background: rgb(247, 248, 241);
	padding: 2px 6px;
	color: rgb(29, 162, 193);
	margin-left: 10px;
	text-decoration: none;
	border-radius: 4px;
	border: 1px solid rgb(203, 213, 214);
	transition: all 0.4s  linear;
}
#wrapper p.change_link a:hover {
	color: rgb(57, 191, 215);
	background: rgb(247, 247, 247);
	border: 1px solid rgb(74, 179, 198);
}
#wrapper p.change_link a:active{
	position: relative;
	top: 1px;
}

Now you’ll notice that we’ve got two nice forms, but we really want only one to show at a time. So now is time for some animations!!

Creating the switching animation

The first thing to do is to hide the second form by setting the opacity to 0:

#register{
	z-index: 21;
	opacity: 0;
}

Remember that our login form had a z-index of 22? We will give the second form a z-index of 21, to put it “under” the login form.

And now the really good part: switching the forms using the :target pseudo class. What you really have to understand about :target, is that we will use anchors to make the transition. The normal behavior of an anchor link, is to jump to the target in the page. But we don’t want to jump anywhere, we only want to switch the forms. And here comes our trick using the two links at the top of the page. Instead of directly linking to the second form, and risking getting a “jumping” effect, we actually put the two links at the top of the page and give them display: none. This will avoid any page jump. Credit where credit’s due: I found this trick on CSS3 create (in French).

#toregister:target ~ #wrapper #register,
#tologin:target ~ #wrapper #login{
	z-index: 22;
	animation-name: fadeInLeft;
	animation-delay: .1s;
}

So this is what happens: when we click on the Join us button, we trigger the #toregister. We then do the animation, by using the sibling selector ~ to find our #register element. We use an animation called fadeInLeft. Since we “hide” the form using zero opacity, we will use an animation that fades in, to make it appear. We’ve also changed the z-index, to make it appear on top of the other form.
The same happens for the other form.

And here is the code for the animation. We are using the CSS3 animation framework from Dan Eden and adapted it for this tutorial.

.animate{
	animation-duration: 0.5s;
	animation-timing-function: ease;
	animation-fill-mode: both;
}
@keyframes fadeInLeft {
	0% {
		opacity: 0;
		transform: translateX(-20px);
	}

	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

The form that is “disappearing” will have another animation which will make it fade out to the left:

#toregister:target ~ #wrapper #login,
#tologin:target ~ #wrapper #register{
	animation-name: fadeOutLeftBig;
}

@keyframes fadeOutLeft {
	0% {
		opacity: 1;
		transform: translateX(0);
	}

	100% {
		opacity: 0;
		transform: translateX(-20px);
	}
}

You can now use other animations from Dan Eden’s animate.css: just adjust your .animate class and replace the animation names. You will also find some custom animations at the end of the animate-custom.css file.

Well, that’s it folks. I hope you enjoyed the tutorial!

Please note, that in some browsers background-clip: text is not supported. In Internet Explorer 9 the transitions and animations don’t work, so there will be no fancy form switching. In Internet Explorer 8 and below the :target pseudo-class is not supported, so it won’t work at all (you’ll just see the login form).

Demos

View demo Download source

Responsive Content Navigator with CSS3

Mary Lou — Fri, 23 Mar 2012 14:29:43 +0000

View demo Download source

Today we’ll show you how to create a content navigator with CSS only. The idea is to have several slides or content layers that we’ll show or hide using the :target pseudo-class. With CSS transitions we can make the slides appear in a fancy way. We’ll also make the whole thing responsive.

The images used in the demo are by super-talented Karrie Nodalo. Check out her Flickr photostream. The images are licensed under the Creative Commons Attribution 2.0 Generic License.

Please note: the result of this tutorial will only work as intended in browsers that support the CSS properties in use.

In the following we’ll be going through demo 3.
Let’s do it!

The Markup

For each of the different slides that will either contain a set of links, sub-slides or some content, we will have a division with the class cn-slide. For the sub-slide that will contain two link boxes in a row we’ll add another class called cn-slide-sub. The content slides will simply have the general class cn-slide like all the others.

There will be one main slide that will have links to three sub-slides. Then, each of the sub-slides will have four links, each one pointing to a content slide. So, all together we have one main slide, three sub-slides and twelve content slides:



	
		Explore this
		
			Philosphy
			Science
			Literature
		
	

	
	
		Philosophy
		Back
		
			Epistemology
			Metaphysics
			Aesthetics
			Ethics
		
	

	
		Epistemology
		Back
		
			Some text
		
	

	
		Metaphysics

The sub-slides and the slides with content will have a link back to their previous “layer”. So, all the content slides of the “Philosophy” part will link back to “slide-1″ which is the sub-slide of “Philosophy”.

Let’s take a look at the CSS!

The CSS

The main container will have a min-width and a max-width which will allow us using a percentage for the width but guarantee that it will not become too big or too small:

.cn-container{
	width: 60%;
	min-width: 300px;
	max-width: 820px;
	margin: 10px auto 0 auto;
	text-align: left;
	position: relative;
}

The main headline will be placed absolutely and we will make it fade in and scale up when “opening” a slide. The transition will have a delay because we want it to appear after all the link boxes:

.cn-container h2{
	font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
	color: #fff;
	position: absolute;
	z-index: 10000;
	text-shadow:
		0 0 1px rgba(255,255,255,0.8),
		1px 1px 1px rgba(0,0,0,0.2);
	font-size: 80px;
	line-height: 80px;
	top: 0px;
	right: 0px;
	white-space: nowrap;
	opacity: 0;
	transform: scale(0);
	transition: all 0.5s linear 0.7s;
}
.cn-container .cn-slide:target h2{
	opacity: 1;
	transform: scale(1);
}

The slides will also be placed absolutely. We’ll set the initial opacity of the slides to 0 and show it once we know that it’s the target:

.cn-slide{
	text-align: center;
	position: absolute;
	left: 0px;
	padding-top: 80px;
	margin: 0 5%;
	width: 90%;
	opacity: 0;
}
.cn-slide:target{
	opacity: 1;
	z-index: 1000;
}

Note that in some other demos we are using the transitions on the slides. Here we will use sequential transitions on the link elements.

Now, let’s take a look at the link elements. They will all have a single background image which we will later define for each element. By default, we’ll give 1.jpg as the background image. Initially, the opacity and scale will be 0. We add a transition for the two properties and also for the box-shadow which we need when we hover the element:

.cn-slide nav a{
	text-align: left;
	display: block;
	font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
	border: 8px solid #fff;
	padding: 2%;
	font-size: 66px;
	letter-spacing: 7px;
	text-shadow: 0px 5px 0px rgba(182,105,135,0.4);
	color: #fff;
	line-height: 66px;
	outline: none;
	margin: 0 0 10px 0;
	box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
	background: #fff url(../images/1.jpg) no-repeat center center;
	background-size: 100%;
	background-clip: padding-box;
	opacity: 0;
	transform: scale(0);
	transition:
		opacity 0.4s linear,
		transform 0.4s linear,
		box-shadow 0.3s ease-in-out;
}
.cn-slide nav a:hover{
	box-shadow: 1px 2px 4px rgba(0,0,0,0.2);
}

The target slide’s link elements will fade in and scale up to 1:

.cn-slide:target nav a{
	opacity: 1;
	transform: scale(1);
}

Let’s define a transition delay for the elements, so that they appear one after the other:

.cn-slide nav a:nth-child(2){
	transition-delay: 0.3s, 0.3s, 0s;
}
.cn-slide nav a:nth-child(3){
	transition-delay: 0.6s, 0.6s, 0s;
}
.cn-slide nav a:nth-child(4){
	transition-delay: 0.9s, 0.9s,0s;
}

As you can see, the last delay will be of 0 seconds since this is the delay for the box-shadow transition, the one that get’s applied on hover.

The link elements in the sub-slides will have a width of 42% because we want two to fit into a row:

.cn-slide-sub nav a{
	width: 42%;
	display: inline-block;
	font-size: 40px;
}

To create a little gap between the elements, we’ll give a right margin to the odd children:

.cn-slide-sub nav a:nth-child(odd){
	margin-right: 5px;
}

The slides with a content area are the “final” ones and we’ll also add a transition to that division:

.cn-content{
	background: #80B8CE url(../images/1.jpg) no-repeat center center;
	background-size: cover;
	text-align: left;
	padding: 20px 20px 5px;
	box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
	border: 8px solid #fff;
	margin-top: 5px;
	cursor: pointer;
	opacity: 0;
	transform: scale(0);
	transition: all 0.6s linear;
}
.cn-slide:target .cn-content{
	opacity: 1;
	transform: scale(1);
}

Each content area will, just like their corresponding link elements, have a background image that we will define later.

The paragraphs will also have a transition which will be applied when we click on the content. With the :active pseudo-class we can let the user view the background of the content div by clicking on it (and keeping it clicked):

.cn-content p{
	line-height: 24px;
	text-shadow: 1px 1px 1px rgba(255,255,255,0.9);
	color: rgba(103,59,77,0.9);
	padding: 15px 20px;
	margin-bottom: 10px;
	background: rgba(255,255,255,0.96);
	font-style: italic;
	border-top: 7px solid rgba(103,59,77,0.6);
	user-select: none;
	transform: scale(1);
	transition: all 0.3s linear;
}
.cn-content:active p{
	transform: scale(0);
}

The back arrow will be sliding in from the left. We set it to -100px initially and to 3px when a slide is the target:

.cn-back{
	outline: none;
	text-indent: -9000px;
	width: 49px;
	height: 42px;
	background: transparent url(../images/arrow.png) no-repeat center center;
	position: absolute;
	top: 22px;
	left: -100px;
	cursor: pointer;
	opacity: 0;
	transition: all 0.4s ease-in-out 1s;
}
.cn-slide:target .cn-back{
	left: 3px;
	opacity: 1;
}

Now, let’s define the background images for each link element. With the very helpful attribute selector, we can specify which element will have what background image. We will look at what the href value is and define the image:

/* Main Items */
.cn-slide nav a[href="#slide-1"]{
	background-image: url(../images/1.jpg);
}
.cn-slide nav a[href="#slide-2"]{
	background-image: url(../images/2.jpg);
}
.cn-slide nav a[href="#slide-3"]{
	background-image: url(../images/3.jpg);
}

/* Items and sub-items of slide 1*/
.cn-slide nav a[href="#slide-1-1"],
#slide-1-1 .cn-content {
	background-image: url(../images/4.jpg);
}
.cn-slide nav a[href="#slide-1-2"],
#slide-1-2 .cn-content {
	background-image: url(../images/5.jpg);
}
.cn-slide nav a[href="#slide-1-3"],
#slide-1-3 .cn-content {
	background-image: url(../images/6.jpg);
}
.cn-slide nav a[href="#slide-1-4"],
#slide-1-4 .cn-content {
	background-image: url(../images/7.jpg);
}

/* Items and sub-items of slide 2 ... */
/* ... */

/* Items and sub-items of slide 3 ... */
/* ... */

Finally, we will define some media queries to fix the layout when we view this on a smaller screen. You can of course define the standard media queries for common devices but here we will simply check when our liquid layout breaks and define a rule for that “breaking-point”. In our case, that’s 1060 pixel and 900 pixel. We will adjust the font size and allow the sub-slides to have one item in a row:

@media screen and (max-width: 1060px){
	.cn-slide-sub nav a{
		font-size: 28px;
	}
}
@media screen and (max-width: 900px){
	.cn-container h2{
		font-size: 48px;
		line-height: 95px;
	}
	.cn-slide nav a{
		font-size: 38px;
	}
	.cn-slide-sub nav a{
		width: auto;
		font-size: 36px;
		display: block;
	}
	.cn-slide-sub nav a:nth-child(odd){
		margin-right: 0px;
	}
}

Demos

And that’s it! I hope you enjoyed this tutorial and find it useful!
There are many possibilities for the transitions, just experiment!

View demo Download source

Codrops » Tutorials

Creating an Animated 3D Bouncing Ball with CSS3

The HTML

The CSS

The bouncing animation

Animated 3D Bar Chart with CSS3

Challenge #1 – A bar with movable inner block

Challenge #2 – The Graph Holder

The Implementation

Challenge #1 – A bar with movable inner block

Challenge #2 – The Graph Holder (with axis labels)

Conclusion

Annotation Overlay Effect with CSS3

The Markup

Some title

The CSS

Fluid CSS3 Slideshow with Parallax Effect

The Markup

The CSS

Rotating Words with CSS Animations

The Markup

Real poetry is like creating breathtaking moments lovely sounds incredible magic unseen experiences happy feelings beautiful butterflies with a silent touch of sugar spice colors happiness wonder happiness

The CSS3

Demos

Animated Content Tabs with CSS3

The Markup

The CSS

Slideshow with jmpress.js

The Markup

Some headline

The CSS

The JavaScript

Responsive Horizontal Layout

The Markup

Introduction

Chapter I.

Variation Under Domestication

Causes of Variability

The CSS

The JavaScript

Login and Registration Form with HTML5 and CSS3

The HTML

Log in

Sign up

The CSS

Styling both forms using CSS3

Creating the switching animation

Demos

Responsive Content Navigator with CSS3

The Markup

Explore this

Philosophy

Epistemology

Metaphysics

The CSS

Demos

Real poetry is like creating
breathtaking moments lovely sounds incredible magic unseen experiences happy feelings beautiful butterflies

with a silent touch of
sugar spice colors happiness wonder happiness