The main characteristics of this grid system is that all the columns have percentage based width so they adapt to the container element. It means that with using this system you will not have to define a width of each column by hand, you can simply throw it inside any container and the column widths and column gutters will be automatically set.

This system supports up to 6 equal width columns, so you can choose anywhere from 2 to 6 columns in the set. In each column set you can have double, triple, quadruple or even quintuple columns. The column gutters are set to 2 percent for each column set, so in case you have different column sets in one container you will have equal column gutters.

Naming the columns and column containers

Grid system often compromise the semantics. Unfortunately that is something we have to live with if we want to use this kind of approach.
Important thing about Easy Percentage Grid System is that column containers must have the base class name cols (as in columns – plural) while each column must have a class name col (column – singular). By using this base classes alone the grid system can properly display two equal columns. So this code

<div class="cols">
    <div class="col first"></div>
    <div class="col"></div>
</div>

can be used for creating 2 equal columns. Note the class name first. I am using it (along with :first-child pseudo selector) to erase the left margin for the first column.

If you want to create more than 2 column set you need to add a class name colsX to the container where X represents the number of columns in the set. Here’s a sample:

<div class="cols cols4">
    <div class="col first"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
</div>

If you need to include a column with multiple width (double or triple width column) you can add a class name colX where X is the number that defines how wide the column is. Again note the singular here! Here’s an example of 5 columns set where second column is double the width of the default ones.

<div class="cols cols5">
    <div class="col first"></div>
    <div class="col col2"></div>
    <div class="col"></div>
    <div class="col"></div>
</div>

Demos

Take a look at the demos to see how it all looks like.

• 2, 3 and 4 columns demo – fixed width
• 5 columns demo – fixed width
• 6 columns demo – fixed width
• 2, 3 and 4 columns demo – fluid width
• 5 columns demo – fluid width
• 6 columns demo – fluid width

So, to recap, Easy Percentage Grid System features:

• place inside any fluid or fixed width container, without having to worry about each column width
• supports up to 6 equal columns
• supports multiple width columns (double width, triple width etc.)
• column gutters have the same width for each column set
• basic, solid CSS styling for HTML elements included

Download the Easy Percentage Grid System

Edit: Column Padding

It is possible to add side paddings to columns expressed in percentages too. The principle would be, add padding you desire to the “global” column definition (let’s say we want 1% side padding):

.col, .col2, .col3, .col4, .col5{
    float:left;
    display:inline;	
    margin-left:2%;
    padding:0 1%;
    background:#f1f1f1; /* only for demo purposes - remove this line */
    }

What we need to do is decrease the width of each column by double that percentage. Left padding 1% and right padding 1% makes 2% decrease in column width. So instead of 49% width for default column, it will now be 47%. You need to manually adjust the width for each column, but it’s not that big edit. I prepared a 1% side padding demo for you.

Take a look at the fixed width container demo with 1% side padding

Simple demo
Styled demo
Auto pagination
Download the plugin

How does it work?

The plugin takes a list of items, calculates a number of child elements of a certain object, divides it by step parameter (which can be easily adjusted) and generates "control buttons". Controls are inserted immediately after the selected object in a form of ordered list.

For target object I recommend using unordered list, although plugin will work with any other type of element that contains any type of child elements. If you want to have it set up that way, child elements can be of a different type!

To apply this plugin you will of course need to link to jQuery library and the plugin js file:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
  <script type="text/javascript" src="js/easypaginate.js"></script>

You will need to initiate the plugin:

<script type="text/javascript">
  
  jQuery(function($){ 
  $('ul#items').easyPaginate();
  }); 
  
</script>

This is the source code for the target object I am using in my example:

<ul id="items">
  <li>Page 1</li>
  <li>Page 2</li>
  <li>Page 3</li>
  <li>Page 4</li>
  <li>Page 5</li>
  <li>Page 6</li>
  <li>Page 7</li>
  <li>Page 8</li>
  <li>Page 9</li>
  <li>Page 10</li>
  <li>Page 11</li>
  <li>Page 12</li>
  <li>Page 13</li>
  <li>Page 14</li>
</ul>

This is the generated source code for control buttons (inserted immediately after the target element):

<ol id="pagination">
  <li class="prev">Previous</li>
  <li class="current" data-index="1">1</li>
  <li data-index="2">2</li>
  <li data-index="3">3</li>
  <li data-index="4">4</li>
  <li class="next">Next</li>
</ol>

Options

There are several options you can modify. First and most important is the step parameter. Step parameter defines how many child items will be visible at a time. It is also used in calculating of number of pages. By default this parameter is set to 4. To use your own step value, change the step parameter:

jQuery(function($){
  
  $('ul#items').easyPaginate({
  step:3
  });
  
}); 

Here’s the full list of available options:

step

Default value: 4
Defines a number of items visible on each "page".

delay

Default value: 100
Items on each "page" fade in one by one. This parameter controls the pause between each item’s appearance so we can create "wave" effect. It is defined in milliseconds.

numeric

Default value: true
Boolean. If set to true then the numeric pagination buttons will show.

nextprev

Default value: true
Boolean. If set to true then the next and previous pagination buttons will show.

auto

Default value: false
Boolean. If set to true then the plugin will automatically rotate the "pages"

pause

Default value: 4000
If set to auto pagination, this parameter controls the length of the pause in milliseconds between each "page turn".

clickstop

Default value: true
If set to auto pagination, this parameter controls whether the pages will continue to automatically rotate. If you want to continue the rotation set this parameter to false.

controls

Default value: ‘pagination’
As mentioned, the plugin generates an ordered list for the purpose of navigating through "pages". This parameter defines the list’s ID.

current

Default value: ‘current’
This parameter defines a class name of a current "page" in the numeric navigation. It is used for styling purposes.

If you want to create multiple paginations on the same page, have in mind that this plugin uses IDs to target control buttons so you need to define control id parameter for each pagination.

Enjoy!

Just as with all my script I try to keep things as lightweight as possible, and most important, as customizable as possible. I hope you’ll find this very easy to apply to your own websites.

Take a look at the demo or
Download the plugin

Introduction

First I suggest you check out the demo to see what the plugin is all about. Then come back here and continue reading this article

Markup

I usually start this section of my articles with the same sentence: "the markup couldn’t be simpler" The main idea behind this and other plugins I write is – keeping the markup as simple as possible. No unnecessary elements and bloated HTML. Also markup (for all of my plugins) makes content accessible even with JavaScript turned off, which is important.

All you need for this plugin to work is anchor element containing the small image linking to the large image, but this structure is required:

<a href="large.jpg"><img src="small.jpg" alt="Small image" /></a>

The script (and CSS) takes care fo the rest.

Options

This plugin is customizable with several options and simple CSS definitions. In terms of CSS all you need to do is define the newly created image zoom element’s size, position and appearance. In my demo I am using this definition:

#easy_zoom{
	width:600px;
	height:400px;	
	border:5px solid #eee;
	background:#fff;
	color:#333;
	position:absolute;
	top:15px;
	left:400px;
	overflow:hidden;
	-moz-box-shadow:0 0 10px #555;
	-webkit-box-shadow:0 0 10px #555;
	box-shadow:0 0 10px #555;
	/* vertical and horizontal alignment used for preloader text */
	line-height:400px;
	text-align:center;
	}

You will notice the line-height property… I am using if for vertical alignment of the message text that is displayed while the detailed image is loading. Of course you can use your own positioning methods, your own text, insert extra markup if you want to and add your own CSS to style the preloader. Perhaps some preloader gif as a preloader image? I’ll leave that to you, what I am showing here is a bare-bone example that you can easily customize.

Let’s take a look at the plugin options. Here is a list of them with default values and descriptions:

id

Default value: "easy_zoom"
The ID of the newly created image zoom element. Of course you can use your own, but make sure you update the CSS accordingly.

parent

Default value: "body"
This defines the DOM element where newly created image zoom element will be inserted. You can insert it anywhere you like in the DOM by editing this option.

append

Default value: "true"
If set to true (by default) the newly created element will be inserted as a last child of the parent element. If this option is set to false then the newly created element will be inserted as a first child of the parent element.

preload

Default value: "Loading…"
A message that appears before the large image is loaded. You can use this option to write your own preload messages and insert any HTML you want. If you want to use the preloader gifs, I suggest you go with background images.

error

Default value: "There has been a problem with loading the image."
In case the large image is not found or can’t be loaded, this error message will appear. You can use this option for custom error messages.

Here’s a sample code for using some custom options:

jQuery(function($){
	
	$('a.zoom').easyZoom({
		id: 'imagezoom',
		preload: '<p class="preloader">Loading the image</p>'
		parent: '#container'
	});

});

In one of the next articles here on CSS Globe I will offer a one page portfolio template that uses this image preview, so stay tuned!

Login forms are very simple in terms of the required elements. When it comes to forms, it doesn’t get simpler than that. But some of the elements that could be valuable to your users (or potential members) are often neglected.

Let’s take a look at what I think are necessary elements.

Take a look at the login page or
Download the demo

1. The title

I believe that each form should have a prominent title that briefly explains what the form is about. If you use login page, like in my example, it is important to mention the name of your website here, so the accidental visitors know where they are.

2. Non members

Non-member visitors may stumble upon your login page one way or another. Why not think of them and offer them a direct link to the registration page. It will save them some time and you increase your chance of more new member signing up.

3. Input fields and labels

Although login forms usually contain two input fields, it is important that they’re styled nicely so the labels are readable, and there is no. One thing that I often notice on the various websites is the lack of clickable labels. You should use FOR attribute on labels “connect” them with appropriate input field. It is such a small effort when coding and it can make a huge difference in terms if usability.

4. Forgot password link

This is also very important link. Many users have numerous accounts and passwords and they often can’t remember which one they used on your site. The best placement for this link is near the password field itself.

5. Submit button

This should, of course, be the most prominent thing in the form. For best results (by results I mean best user experience) it should always look like a button.

6. Remember me

Very useful feature that your returning users will appreciate. If your application supports it, include this option and your members will be thankful.
One thing that I believe that is very important is wrapping the checkbox and the text inside the same label. Checkboxes are small and therefor hard to click on. If you wrap entire text inside the label, you enlarge the clickable area and that way making the life easier for your users.

7. Back link

If you have full login pages, then you MUST allow users to change their mind about logging in and provide a link back to your home page.

Validation

Although the form shouldn’t rely on JavaScript validation alone, I believe that JavaScript based validation scripts are important. They provide instant filtering of the valid data, allowing users to immediately correct their info and also making sure that the valid data is sent to the server-side.

Demo

I have prepared a demo page for you to download (for free). The login page is contains a pure CSS3 styled form and a simple validation script, ideal for learning purposes. Hope you’ll enjoy it!

The final result looks like the image below.

Take a look at the demo

HTML

As mentioned the HTML I am using for making this calendar icon to work is very simple:

<p class="calendar">7 <em>February</em></p>

We have a wrapping paragraph, although you may go with the DIV (or HTML5′s new element – TIME). Inside the wrapping element you need one extra element that contains a month’s name.

The principle

Now, I have 2 elements to work with, plus I will create 2 pseudo element for each of the real elements which will give me total of 6 elements I can use to draw shapes and position them properly. Pseudo elements will be used for the calendar’s spiral (actually those are some kind of rings, not sure what is the correct English word for it… sorry about that).

If you take a look at the image below the idea behind this will be more clear.

First we style the container element. You will notice that I used box-shadow, border-radius and CSS gradients. Not all browsers will render all of these properties, but at least it will degrade nicely.
Note that the fixed height is not defined, you control the overall height with line-height properties in both container and nested em element.

.calendar{
	margin:.25em 10px 10px 0;
	padding-top:5px;
	float:left;
	width:80px;
	background:#ededef;
	background: -webkit-gradient(linear, left top, left bottom, from(#ededef), to(#ccc)); 
	background: -moz-linear-gradient(top,  #ededef,  #ccc); 
	font:bold 30px/60px Arial Black, Arial, Helvetica, sans-serif;
	text-align:center;
	color:#000;
	text-shadow:#fff 0 1px 0;	
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;	
	position:relative;
	-moz-box-shadow:0 2px 2px #888;
	-webkit-box-shadow:0 2px 2px #888;
	box-shadow:0 2px 2px #888;
	}

Em element is also styled, it contains the month’s name.

.calendar em{
	display:block;
	font:normal bold 11px/30px Arial, Helvetica, sans-serif;
	color:#fff;
	text-shadow:#00365a 0 -1px 0;	
	background:#04599a;
	background:-webkit-gradient(linear, left top, left bottom, from(#04599a), to(#00365a)); 
	background:-moz-linear-gradient(top,  #04599a,  #00365a); 
	-moz-border-radius-bottomright:3px;
	-webkit-border-bottom-right-radius:3px;	
	border-bottom-right-radius:3px;
	-moz-border-radius-bottomleft:3px;
	-webkit-border-bottom-left-radius:3px;	
	border-bottom-left-radius:3px;	
	border-top:1px solid #00365a;
	}

Now I am styling the pseudo elements. Container’s pseudo elements (:before and :after) are used to create thos circles, "holes in te paper".

.calendar:before, .calendar:after{
	content:'';
	float:left;
	position:absolute;
	top:5px;	
	width:8px;
	height:8px;
	background:#111;
	z-index:1;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
	-moz-box-shadow:0 1px 1px #fff;
	-webkit-box-shadow:0 1px 1px #fff;
	box-shadow:0 1px 1px #fff;
	}
.calendar:before{left:11px;}	
.calendar:after{right:11px;}

…and em’s pseudo elements are used to create the rings:

.calendar em:before, .calendar em:after{
	content:'';
	float:left;
	position:absolute;
	top:-5px;	
	width:4px;
	height:14px;
	background:#dadada;
	background:-webkit-gradient(linear, left top, left bottom, from(#f1f1f1), to(#aaa)); 
	background:-moz-linear-gradient(top,  #f1f1f1,  #aaa); 
	z-index:2;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	border-radius:2px;
	}
.calendar em:before{left:13px;}	
.calendar em:after{right:13px;}	

There are 2 demos you can check out:

• Large CSS Calendar Icon
• Small CSS Calendar Icon

It is important to say that if you’re going to customize the width there will be some tweaking needed, mainly for the placement of the pseudo elements.

That is it! Enjoy!

Of course, not all browsers support these properties, so we need to make sure that everything degrades nicely. I mean as nice as a it could be, right?

It degrades from this (Safari)

to this (IE8)

Markup

First let’s take a look at the markup. In this example I am using HTML5 elements.
Head of the document looks like this:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Tabbed Layout</title>
<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen" />
<!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="js/tabbed.layout.js"></script>
</head>

We are using John Resig’s HTML5 Shiv to make sure we can properly render HTML5 elements in all browsers, and I am including a Easy Framework’s tab script just to add behavior to the tabs.

Next in the markup structure is the header…

<header>
<h1>Some cool goes title</h1>
</header>

…and then we go to the nav element. This element contains actual clickable tabs:

<nav> 
    <ul>
        <li><a href="#tab1">Tab 1</a></li>
        <li><a href="#tab2">Tab 2</a></li>
        <li><a href="#tab3">Tab 3</a></li>
        <li><a href="#tab4">Tab 4</a></li> 
    </ul>
</nav>

We link the tabs to the section elements further down in the markup structure:

<section class="tab" id="tab1">
<p>Section number 1</p>
</section>

<section class="tab" id="tab2">
<p>Section number 2</p>
</section>

<section class="tab" id="tab3">
<p>Section number 3</p>
</section>

<section class="tab" id="tab4">
<p>Section number 4</p>
</section>

As far as the necessary markup goes, this is it. Pretty simple!

CSS3 Magic

First let’s edit the header. Header has fixed height and we added a subtle CSS gradient to it, from darker to lighter:

header{
    height:32px;
    overflow:hidden;
    background:#e1e1e1;
    background:-webkit-gradient(linear, left top, left bottom, from(#d1d1d1), to(#e1e1e1));
    background:-moz-linear-gradient(top,  #d1d1d1,  #e1e1e1);
    padding:0 5px;
    }

Nav element has fixed height as well, list items inside are floated to the left and have the same width. We are also adding CSS gradients along with bottom border radius and box shadow. (vendor prefixes galore)

nav li{
    list-style:none;
    float:left;
    height:24px;
    line-height:24px;
    -moz-box-shadow:0 0 3px #888;
    -webkit-box-shadow:0 0 3px #888;
    box-shadow:0 0 3px #888;
    -webkit-border-bottom-right-radius:3px;
    -webkit-border-bottom-left-radius:3px;
    -moz-border-radius-bottomright:3px;
    -moz-border-radius-bottomleft:3px;
    border-bottom-right-radius:3px;
    border-bottom-left-radius:3px;
    margin:0 2px;
    width:200px;
    overflow:hidden;
    position:relative;
    background:#ccc;
    background:-webkit-gradient(linear, left top, left bottom, from(#ccc), to(#aaa));
    background:-moz-linear-gradient(top,  #ccc,  #aaa);
    }

Selected tab should blend into header so the colors must match. "Ending" color of the header gradient must be "starting" color of the selected tab. Also make sure that you define matching regular background colors for browser that don’t support CSS gradients.

nav li.selected{
  background:#e1e1e1;
  background:-webkit-gradient(linear, left top, left bottom, from(#e1e1e1), to(#d1d1d1));
  background:-moz-linear-gradient(top,  #e1e1e1,  #d1d1d1);
  }

Styling the anchor’s inner shadow

Now here’s a little trick. I guess you are familiar with box-shadow property and how it works. What we can define is horizontal offset, vertical offset blur and a color. Another cool option that allows us to have inner shadows is the inset attribute.
Here is our problem… on non selected tabs, we need to have only top shadow, no shadows from the side. That is not doable with the usual settings

What we’ll do is:

• add inner shadow to anchor element with vertical offset only
• make a nested anchor element wider than the parent LI element
• position anchor absolutely inside the LI element
• set overflow to hidden on LI element

That way we will simply hide the side inner shadow and have only top shadow visible. This is small detail, but without it the entire tab would not look natural (as if the header drops a shadow on it).

Take a look at the graphic to (hopefully ) understand it better.

Here’s the CSS for the anchor element:

nav li a, nav li a:visited, nav li a:hover{
  list-style:none;
  display:block;
  position:absolute;
  top:0;
  left:-2px;
  height:24px;
  line-height:24px;
  width:204px; 
  text-align:center;
  color:#333; 
  font-size:11px;
  text-shadow:#e8e8e8 0 1px 0;
  -moz-box-shadow:inset 0 1px 1px #888;
  -webkit-box-shadow:inset 0 1px 1px #888;
  box-shadow:inset 0 1px 1px #888;
  } 

Selected anchor doesn’t have an inner shadow:

nav li.selected a{
  -moz-box-shadow:none;
  -webkit-box-shadow:none;
  box-shadow:none; 
  } 

JavaScript

Last but not least, I added a simple tab script, because without it, tabs… well… wouldn’t make that much sense. This script is taken directly from my Easy front-end framework code.

tabs = function(options) {
    
    var defaults = {  
        selector: '.tabs',
        selectedClass: 'selected'
    };  
    
    if(typeof options == 'string') defaults.selector = options;
    var options = $.extend(defaults, options); 

    return $(options.selector).each(function(){
                                
        var obj = this;	
        var targets = Array();

        function show(i){
            $.each(targets,function(index,value){
                $(value).hide();
            })
            $(targets[i]).fadeIn('fast');
            $(obj).children().removeClass(options.selectedClass);
            selected = $(obj).children().get(i);
            $(selected).addClass(options.selectedClass);
        };

        $('a',this).each(function(i){	
            targets.push($(this).attr('href'));
            $(this).click(function(e){
                e.preventDefault();
                show(i);
            });
        });
        
        show(0);

    });			
}
// initialize the function
tabs('nav ul');

Note that we are passing a selector as a parameter to the function. This selector must be a unordered (or ordered) list of the tab navigation.

Take a look at the demo or Download files

That is it! In my next article I will take this one step further and create a full screen tabbed layout so stay tuned!

Download this plugin for FREE

How does it work

This plugin will create and insert a simple piece of HTML code that contains a message you want to send to your visitors. Visitors have an option of closing notification once they read it. You can control the content and appearance of the notification by adjusting plugin options and CSS.

This is the HTML code that the plugin renders:

<div id="easyNotification">
	Notification!
	<span class="close">Close</span>
</div>

Features

• Insert the notification anywhere in the DOM
• Show notification on event (click, page load) or programatically by simply calling it from your script
• Cookie based notifications enable you to show the message to your visitors once so you don’t annoy them with repeating messages
• Extremely simple markup makes it very customizable

Options

Plugin comes with the default options, here is a list with explanation and a default values:

Option syntax is standard when it comes to jQuery plugins:

$.easyNotification({
	text: 'Your custom text',
	parent: '#someElement'
});

but this plugin enables the simplest possible usage if you want to use default values and only insert your own text:

$.easyNotification('Your custom text here');

Demos

There are 3 demos available:

• Notification shows on a page load
• Notification shows on click
• Cookie based notification, shows only on first page load

Pure CSS post tags uses at least 2 CSS tricks such as CSS triangles and CSS circles.

Take a look at the demo

For CSS triangles you need to manipulate borders of an element that has zero height and width.

CSS circle is simpler. All you need is a square element with rounded corners set to at least half the size of the element. The border radius will then merge into a circle.

HTML

I usually markup tags with unordered list. So the markup is fairly simple:

<ul class="tags">
	<li><a href="#">tag</a></li>
	<li><a href="#">tag name</a></li>

</ul>

I will add :before and :after pseudo elements and style them to achieve the styling I wanted

CSS

I am placing the tags list at the bottom of the post element with adjusting ULs absolute position

.tags{
	margin:0;
	padding:0;
	position:absolute;
	right:24px;
	bottom:-12px;
	list-style:none;
	}

Height (and line-height) of the list item LI and anchor A is set.

.tags li, .tags a{
	float:left;
	height:24px;
	line-height:24px;
	position:relative;
	font-size:11px;
	}

Next to style is the anchor element. We’re adding margins and paddings and some rounded corners on the right hand side.

.tags a{
	margin-left:20px;
	padding:0 10px 0 12px;
	background:#0089e0;
	color:#fff;
	text-decoration:none;
	-moz-border-radius-bottomright:4px;
	-webkit-border-bottom-right-radius:4px;	
	border-bottom-right-radius:4px;
	-moz-border-radius-topright:4px;
	-webkit-border-top-right-radius:4px;	
	border-top-right-radius:4px;	
	} 

To achieve the pointed edge we are adding a :before pseudo-element. The element has the width and height set to zero, that way we are only using it’s borders. To "draw" an arrow pointing left we are showing only the right border.

.tags a:before{
	content:"";
	float:left;
	position:absolute;
	top:0;
	left:-12px;
	width:0;
	height:0;
	border-color:transparent #0089e0 transparent transparent;
	border-style:solid;
	border-width:12px 12px 12px 0;		
	}

The last element to add is the :after pseudo-element. This will act as that rounded hole. What we’re doing here is creating an empty square, and we’re rounding it’s edges so we create a circle (and of course we position it with position: absolute).

.tags a:after{
	content:"";
	position:absolute;
	top:10px;
	left:0;
	float:left;
	width:4px;
	height:4px;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	border-radius:2px;
	background:#fff;
	-moz-box-shadow:-1px -1px 2px #004977;
	-webkit-box-shadow:-1px -1px 2px #004977;
	box-shadow:-1px -1px 2px #004977;
	}

We’re also adding a :hover state for the anchor:

.tags a:hover{background:#555;}	

.tags a:hover:before{border-color:transparent #555 transparent transparent;}

That is it! Enjoy!

In last article I talked about my position on vendor prefixes. In this article I am using properties that currently contain vendor prefixes. Funny, isn’t it? Although I would still prefer to have prefix-free properties, that is not stopping me (and it shouldn’t stop you) from using the new properties goodness.

Let’s get to the business. Look at the image bellow to see what I am trying to achieve.

Take a look at the demo or
Download files

The idea, as mentioned, is quite simple. We have 3 nested elements. Top level acts as a container of a certain size that fits into design, i.e site header. Second element will be rotated X degrees (clockwise) and third element is rotated -X degrees (anti-clockwise) so it evens up horizontally. Take a look at the image bellow to get a better idea.

The markup looks like this:

<div class="box">
	<div class="inner">
		<div class="content"><img src="img.jpg" alt="my bike" /></div>
	</div>
</div>

The CSS goodness

Important thing here is to set overflow property to hidden on all 3 elements (ok you can skip that for the 3rd element). First element is not rotated and it has fixed width and height. Second element is rotated clockwise and third element is rotated anti-clockwise by the same degree amount. The placement of the elements should then be further adjusted by element’s margins and of course you are free to style it as pleased (background images, borders etc.) On the demo page I am providing a bare-bone example you can then restyle as pleased.

/* angled box styles */

.box{
	width:700px;
	height:300px;
	background:#ccc;	
	overflow:hidden;
	margin:1em 0;
	}
.box .inner{
	-moz-transform:rotate(20deg);
	-webkit-transform:rotate(20deg);
	-o-transform:rotate(20deg);
	width:300px;
	height:450px;
	margin-top:-70px;
	margin-right:100px;
	overflow:hidden;
	background:#aaa;
	float:right;
	border:3px solid #fff;
	}
.box .inner .content{
	-moz-transform:rotate(-20deg);
	-webkit-transform:rotate(-20deg);
	-o-transform:rotate(-20deg);
	width:500px;
	height:320px;
	margin-top:60px;
	margin-left:-80px;
	overflow:hidden;
	background:#f1f1f1;	
	}

This trick is works best if applied to images (background images), but any content can be masked like this.
Also please note that it will take some tweaking the margins to get the best result. What you need to have in mind that the content should be nicely presented in browsers that don’t support CSS rotation, just as in my example.

Most of the CSS properties however were cross browser supported all along. Sure, there are some misinterpretations and missing support for pseudo element here and there (especially with old mastodons browsers) but the situations wasn’t nearly as complicated as with JavaScript.

Then the web began to change. New technologies were introduced, new buzzes… Browser developers started to experiment in supporting cool CSS properties that not only could change the appearance of an element, they could also control the behavior.
As a web developer I couldn’t be more excited about these new properties. If nothing, it brought us choices. We don’t have to use them, but if we want to, we can.

Vendor prefixes

But there is one thing that is far from ideal…
In it’s original idea, standards should be a unique set of rules and coding recommendations applicable to all platforms, devices, browsers… Vendor prefixes couldn’t be further away from that. Applying a vendor prefix you target specific browser, so if you want to target another one, you either can’t or have to use another line of code with another “vendor prefixed” CSS property.

Take a look at this example

.box{
	-moz-box-shadow: 10px 10px 5px #000;
	-webkit-box-shadow: 10px 10px 5px #000;
	box-shadow: 10px 10px 5px #880008;
}

We all talk about IE hacks, how we hate it, how these are not complying to web standards, how they’re not valid… I am asking you, how is the example above different from these hacks?

I am aware that prefixes were used by browsers to try on new experimental properties. I salute that, without these great efforts we wouldn’t have progress. But do we have to keep the vendor prefixes for CSS properties that are not so experimental any more? Why don’t we have support for non prefixed properties now that some of the things are out of the experimental phase and more or less accepted?

Why are developers forced to write multiple lines of CSS for the same thing and when will it all be standardized?

In my opinion, vendor prefixes are unnecessary. If browsers want’s to experiment with new properties, what keeps them from doing so and use the “regular” naming conventions? It could even speed up the process of cross-browsers acceptance.

Let us know what do you think, I would really like to hear more thoughts on this one.