News

Unleash CSS3 transitions to create frayed edge rollover effects

Emulate the distinctive social rollovers found on district13.co.in’s Share section with a method for applying CSS style transitions

FrayedEdge

Emulate the distinctive social rollovers found on district13.co.in’s Share section with a method for applying CSS style transitions

FrayedEdge


Get the code to help complete this tutorial


Set starting styles

Visit the Share section of District13 and you’ll find four social icons. As you roll over each of these, the background shifts on hover to add a distinctive frayed edge effect. This is achieved by an elegant combination of transparent PNGs and a simple CSS transition as explained here. Start a new HTML page and add some initial style classes:

001 <style>
002
003 body {
004
005 background: #330066;
006 }
007
008 #container {
009  
010    position: relative;
011    width: 800px;
012    height: 200px;
013    margin: 25% auto;
014 }
015 /* ADD EXTRA STYLES HERE */
016 </style>

Menu item elements

Further classes will be added once page elements are added. So in the <body> we want a <div> container holding four <a> links that we’ll add unique classes for. Inside these goes an <img> element that will be the frayed rollover background, plus another <div> styled to hold each menu item label:

001 <body>
002 <div id=”container”>
003 <a href=”#” class=”itemOne”>
004 <img src=”rollMask1.png” class=”itemMask shiftAll”>
005 <div class=”itemLabel shiftAll”></div>
006 </a>
007 <a href=”#” class=”itemTwo”>
008 <img src=”rollMask2.png” class=”itemMask shiftAll”>
009 <div class=”itemLabel shiftAll”></div>
010 </a>
011    <!-- REPEAT x4 -->
012
013</div>
014</body>

Make rollover mask images

We can observe from this that we’ll need four ‘rollMask’ PNGs in the page root. These provide the coloured, frayed rollover mask that will be hidden by the CSS. These are sized 200 by 210 pixels and have jagged left and right edges cut out of a transparent background, creating the frayed effect.

Edit the rollover label images

Secondly we also require four ‘label’ PNGs, double-sized (200 by 400 pixels) to contain both default and hover rollover states, like a sprite sheet. We’ll use numbers here in contrasting colours on a transparent background, making sure they are positioned identically and named ‘Ones.png’, ‘Twos.png’ and so on.

Set the backgrounds

Each item <a> link is then styled to be positioned (absolute) 0px, 200px, 400px and 600px so they form a row. Here the background colour is translucent white, which we’ve staggered, and provides subtle tone against the page. Selector classes then apply each of the label PNGs, positioned top-right for the default state:

Initialise default styles

We now need some initial styling for the item <a> links to set position absolutely and sized 200 by 200px to fit. The itemMask class will hide each mask with zero width and opacity. Lastly, the itemLabel class sizes are <div> 200 by 200px each and are lined up along the row:

001 a {
002    position: absolute;
003    width: 200px;
004    height: 200px;
005 }
006
007 .itemMask {
008 position: inherit;
009 width: 0px;
010 height: 200px;
011 opacity: 0;
012 }
013
014 .itemLabel {
015 position: inherit;
016 display: block;
017 width: 200px;
018 height: 200px;
019 }

Attach the transition

A CSS3 transition goes inside the shiftAll class attached to each <img> mask and <div> label. This animates the style changes we’ll define in hover pseudo classes for each <a> element. District 13 uses a custom cubic-bezier() timing function with specific parameters. You could, however, use a linear alternative (commented) to add your own twist.

Hover pseudo classes

To finish we need two pseudo classes for a:hover, defining end style states that the shiftAll transition invokes. First, these shift the item label <div> background along to show the opposite half and contrasting number. Second, they make the mask image visible by setting the full width to 210px, so that it overlaps, and the opacity to fully opaque!

001 a:hover .itemLabel {
002    background-position: left top;
003 }
004
005 a:hover .itemMask {
006 width: 210px;
007 opacity: 1;
008 }
×