In its most simple form the rule of thirds refers to a 3 by 3 grid that fits on top of any image. There are no specific sizes to the blocks – only that they are equally shaped. The grid works horizontally or vertically and helps you determine how the eye follows an image or group of images (such as a website).

The rule of thirds has been around for several hundred years, with the first written reference by John Thomas Smith in “Remarks on Rural Scenery” (1797). He wrote about the philosophy and how it pertained to painting and art, giving it the name “rule of thirds,” a phrase that is now used commonly among artists, photographers and designers.

While the rule of thirds can be used intentionally in art, photography or design, it is also an ever-present concept. Even when you don’t plan or accommodate for it, the rule of thirds exists. Your job is to use it to your design advantage.

How it Works

The grid-shaped rule of thirds concept helps you understand the places on an image where a person is naturally drawn when viewing an image or even your webpage. In theory, the most eye-catching points are where the grid lines intersect.

Understanding where these key points fall can help you better compose a piece of artwork or photo, determine a more appealing crop and even determine placement of elements on your website’s landing page. Generally, the area that will first attract attention is the top left grid intersection, followed by the intersection below it and then the top right and bottom right cross-sections.

The biggest lesson to come from the rule of thirds is that perfect 2-part symmetry may not be the most appealing configuration. You will get more impact with images and design without it. (And remember, even if your design is created with perfect symmetry from the center out, the rule of thirds will still apply.)

You can work with or against the rule of thirds, but you can’t eliminate it.

Photography and Images

Following the rule of thirds philosophy, images that fall into “thirds” regions are the most pleasing and are associated with balance and harmony. Where the focus of an image falls in the imaginary grid can create associations as well. For example, the placement of an object in one third of the photo can imply motion, such as with the bird above. (You can almost sense that he has just flown in from the left and landed on the branch.)

There are a few rule of thirds guidelines to keep in mind when working with and cropping images.

Watch the horizon: In photos with a horizon line (especially landscapes), try to place that line in the top third of the image. It will help better focus the rest of the image and add the proper feeling of where the sky is located.

Watch the eyes: This can be rather difficult at times, but in portraits think about lining up the subject’s eyes on two of the interesting gridlines. These are areas that first draw attention and your viewer will immediately connect with the person in the photo because you have created a feeling of looking into their eyes.

Watch dead space: Be aware of pieces of objects in the corners of images and crop. Pull the part of the image you really want to be showcased forward and near one of the primary gridlines.

Overall Design

Think about placement of elements on your website in relation to the rule of thirds. At a common screen resolution of 1,024 pixels wide by 786 pixels deep, each third would be about 341 pixels wide by 262 deep.

Think about the composition of your site. It is likely the banner falls side the left-most top third. Much of your content probably begins around the location of the top third gridline, with navigation above it.

Consider where banner ads are placed on many news websites. They strip across the top third gridline, such as the ad and content on the Rolling Stone website.

On homepages, apply the rule of thirds when determining placement of key elements – banners, social media or interactivity icons, advertising and even key parts of your content. On subsequent or content pages, use the rule of thirds to help you determine where to place images or help readers focus when visiting your site. Think about how many sites are structured as well; sites with sidebars on both sides often allow for main content to fall within the center “third” of the site.

Design Considerations

While the rule of thirds can be a very useful tool, it is not necessary to plan your website design around it. Use the philosophy as a guideline or a tool to tweak your design during the finalizing process. Toss an imaginary grid on a new site design and consider making placement changes to items that are close to key spaces on the rule of thirds grid.

More importantly, the rule of thirds can be applied to working with images on your site. Use it to help you better crop and scale images. Remember to keep in mind where the object of each photo falls and what kind of movement or feel it creates.

Successful use of the rule of thirds can create a feel of natural balance, which is often asymmetrical. It can help designers who tend to design with perfect symmetry break out of their comfort zone and try something new, while still maintaining a sense of design order.

Play with using the rule of thirds in different way to bring focus to your site. Consider only vertical (such as Twenty8Twelve) or horizontal thirds. Pick a “third” and use at as a focus throughout your site. Design your homepage by grouping thirds such as Google Ventures, which grouped the first two horizontal thirds for the main image and has a grouping of three images in each third below.

Images courtesy of Alan Cleaver, katerha, photojenni and Illusive Photography.

View demo Download source

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:

<div id="ballWrapper">
	<div id="ball"></div>
	<div id="ballShadow"></div>
</div>

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

Elegant Themes is giving away three free memberships (worth $39) with access to all of their beautiful premium themes!

About Elegant Themes

Elegant Themes provides high-quality WordPress themes that are expertly coded and made compatible with the latest version of WordPress.
There are many reasons for loving Elegant Themes:

• Cross-browser compatibility guaranteed
• Intuitive theme options page gives you control
• A focus on support and community
• Frequent theme additions and upgrades

Check out their beautiful themes in their WordPress Themes Gallery.

How to enter

All you have to do to get a chance to win is to leave a comment below. You can also tweet about it or share it.

Good Luck!

This giveaway ended on May 28, 2012 at 10 p.m. GMT+0.

The Winners

We are happy to announce the following winners of the giveaway:

• Kyle
• Monk
• Ann

Congratulations, you will be contacted shortly!

Thank you for participating!

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.

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

<div class="bar-wrapper">
  <div class="bar-container">
    <div class="bar-background"></div>
    <div class="bar-inner">50</div>
    <div class="bar-foreground"></div>
  </div>
</div>

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)

<ul class="graph-container">
  <li>
    <span>2011</span>
    <-- HTML markup of a bar goes here -->
  </li>
  <li>
    <span>2012</span>
    <-- HTML markup of a bar goes here -->
  </li>
  <li>
    <ul class="graph-marker-container">
      <li><span>25%</span></li>
      <li><span>50%</span></li>
      <li><span>75%</span></li>
      <li><span>100%</span></li>
    </ul>
  </li>
</ul>

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 <ul> 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.

View demo Download source

I constantly look through websites and wonder why designers allow text and images to get a little too close. Why don’t the elements have room to breathe?

That’s where text- or word-wrapping comes in. Adding space above, below and to the sides of an object embedded in text can make a lot of difference in terms of overall look of your site and even readability.

Wrapping Benefits

The No. 1 reason to use text wrapping settings for images that touch text is to aid readability. The addition of white space around images gives text a cushion, making it easier on the eye.

Depending on your specs, text wrap can also add emphasis to images as well. By separating text and images both will more clearly stand out.

Whether text wrapping is even necessary depends on how your site is constructed. Blogs using a wide columnar design commonly use small photos embedded in text and rely on text wrap settings to make images and text work together. Many sites though have a modular construction that almost makes text wrap unnecessary because text and images are almost exclusively stacked and rarely appear side-by-side.

How Much Wrap?

How much wrap to put around an image is a little trickier. Blogging sites and software (such as WordPress and Blogger) often have a set of defaults that will wrap text for you. The wrap specs correspond to the style template you select when you set up the blog.

These text wrap styles tend to be somewhat tight but typically work effectively for the blog-format. Standard text wraps typically allow for 5 or 6 pixels of space all the way around an image. Personally, this is a little tight for my taste. For a super clean text wrap style consider wrapping text so that the vertical space on either side of an image is equal to the horizontal space above and below the image. You can accomplish this by setting the text wrap specs to mirror the leading of the body copy.

Photo and text alignment can impact the look of text wrap as well. Wrap will always seem more consistent and intentional when it falls next to text that is justified (so that all lines start/stop at the same place. Wrap will appear looser when it falls alongside ragged text.

Types of Wraps

Text wrap typically appears in one of three ways – as a square-shaped box around an image, an oddly-shaped halo around an image to match the contours of the image (for non-square images) or as a wrap that knocks out all of the lines around an image (jump text wrap).

Text wrap can occur outside of an object – to keep text from touching the borders of another frame – or inside of an object. Inside text wraps keep text contained within a frame, such as the text inside the black shape on the Impero site.

Wrap Scenarios to Avoid

Text wrap can cause readability issues if the wrap causes text to break poorly. Watch for very thin columns of text next to a wrap. You may want to rethink your photo size or placement if the wrap causes excessive hyphenation (aim for hyphens no more frequently than at the end of every three lines) or blank lines of text. (This happens when words can’t fit in the space left after the wrap is applied.)

Photo placement can also case wrapping concerns. Avoid having lots of jagged wraps throughout your page. Varying wrap widths and photo sizes can make for a jarring design. Instead, group many small images together and use a single wrap or use photos with equally-sized frames.

Consider alignment as well. Images and text wrap will appear more uniform if all of the images are placed in the same manner – to the left, center or right side of the text block. Centered images can be tough to wrap around because text will often break oddly around the object. Also using a left-aligned image and close to a right-aligned image can create an odd, difficult-to-read block of text squeezed between the images.

Code

When creating your own styles sheets, you might consider developing your own text wrap specs. You can apply classes that will create the desired alignment and spacing.

<img src="images/flower.jpg" alt="A yellow rose" class="my-align-class" />

Where my-align-class could be one of the following:

.align_left {
	float: left;
	margin-right: 1em;
	margin-bottom: 1em;
}

.align_right {
	float: right;
	margin-left: 1em;
	margin-bottom: 1em;
}

.align_center {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

For wrapping text around non-rectangular shapes, you can take a look at the following tools/techniques:

• CSS Text Wrapper: Generate HTML/CSS to wrap content to any shape or curve
• CSS – Wrapping text around non-rectangular shapes

Conclusion

Text wrap is a great thing to keep in your design toolbox. In particular, it works great on sites that have large blocks of text with small images scattered throughout.

But don’t just rely on a template for wrap settings. Play with the code and add more space (or even take away a few pixels) to create a style that works best for your site.

Consider alternatives to wrapping text. Instead of dropping an image into the text, let the image float above it (look at how the images and text wrap on this site).

Text wraps can be tricky. Successful wrapping depends on the size of image, size of text and with of column where everything lives. Make sure your wrap passes the eye test and text is easier, not more difficult to read, with the addition of a text wrap.

Images courtesy of soa2002 and frankjuarez.

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.

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:

<div class="ao-item">
	<div class="ao-details">
		<h2>Some title</h2>
		<p>Some description</p>
	</div>
	<div class="ao-preview">
		<input type="checkbox" id="ao-toggle" class="ao-toggle" name="ao-toggle" />
		<img src="images/image01.jpg" alt="image01" />
		<div class="ao-annotations">
			<span>Full Localisation Support</span>
			<span>Custom Image Widget</span>
			<span>Blog and Contact Widgets</span>
			<span>Easy Theme Options</span>
			<span>4 Footer Widget Columns</span>
		</div>
	</div>
</div>

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

View demo Download source

Today I want to share a little hover slideshow with you. The main idea is to run a super-fast image slideshow on hover and show the current image when mousing out. It’s just a fancy effect to play with and I got the idea from Contain.r. We’ll be using CSS animations for the slideshow and control the pausing and running with animation-play-state.

This is our simple structure:

<div class="hs-wrapper">

	<img src="images/1.jpg" alt="image01"/>
	<img src="images/2.jpg" alt="image02"/>
	<img src="images/3.jpg" alt="image03"/>
	<img src="images/4.jpg" alt="image04"/>
	<img src="images/5.jpg" alt="image05"/>
	<img src="images/6.jpg" alt="image06"/>
	<img src="images/7.jpg" alt="image07"/>
	<img src="images/8.jpg" alt="image08"/>

	<div class="hs-overlay">
		<span>Summer <strong>2012</strong></span>
	</div>

</div>

We’ll show and hide the images using an animation:

.hs-wrapper img{
	top: 0px;
	left: 0px;
	position: absolute;
	animation: showMe 0.8s linear infinite 0s forwards;
	animation-play-state: paused;
}

The animation will be paused and we’ll just run it on hover:

.hs-wrapper:hover img{
	animation-play-state: running;
}

The animation will simply make an image visible and put it on top of the “stack”:

@keyframes showMe {
    0% { visibility: visible; z-index: 100; }
	12.5% { visibility: visible; z-index: 100; }
	25% { visibility: hidden; z-index: 0; }
    100% { visibility: hidden; z-index: 0; }
}

As you can see, each image will have the same animation but we will start the animation for each image with a delay. We also want to reverse the stacking order of the images by setting the z-index accordingly. Since we will run the whole animation for 0.8 seconds, we’ll delay the start for each image with 0.1 second (except the first one):

.hs-wrapper img:nth-child(1){
	z-index: 9;
}
.hs-wrapper img:nth-child(2){
	animation-delay: 0.1s;
	z-index: 8;
}
.hs-wrapper img:nth-child(3){
	animation-delay: 0.2s;
	z-index: 7;
}
.hs-wrapper img:nth-child(4){
	animation-delay: 0.3s;
	z-index: 6;
}

The percentages of the animation are calculated as follows: take the 100% of the animation timespan and distribute 8 images over it. Each one runs 0.1 seconds which means that at 12.5% we want the second image to show. The second image that will show, will be on top of the current one (although they have the same z-index) because it follows in the HTML structure. Having tried some other possibilities (i.e. not messing around with the z-index, setting 12.6% as the next step, etc.) it seems that this variant performs the smoothest. Nonetheless, sometimes there seems to be a bit of a lag.

The overlay, which will be shown on hover, will have an absolute position and since we want to fade it in and animate the box shadow, we’ll add a transition to it:

.hs-overlay{
	position: absolute;
	width: 100%;
	height: 100%;
	opacity: 0;
	z-index: 500;
	background: rgba(0,0,0,0.6);
	box-shadow: 0 0 0 0 rgba(255,255,255,0.3) inset;
	pointer-events: none;
	transition: all 0.3s linear;
}

On hover, when the slideshow starts running, we’ll show the overlay:

.hs-wrapper:hover .hs-overlay{
	opacity: 1;
	box-shadow: 0 0 0 5px rgba(255,255,255,0.3) inset;
}

You can increase the opacity level of the background color of the overlay in order to make the effect more subtle. Note, that the images have the same background which makes this effect less seizure-inducing than if you would use a different color for each one. Black and white images with a not too transparent overlay like in Contain.r are a good fit for this effect.

It’s as well important to note that it should be made sure that the images are of course loaded and apply something similar to what Chris Coyier suggests here.

And that’s it! I hope you find it inspiring.

View demo Download source