I was thinking about different effects today that can be used to make design a little more playful with minimal work. After looking at a few sites I began to wonder just how hard it would be to implement a sliding tab. As it turns out all you really need is a handful of CSS3.
Start with some rather unremarkable HTML. Rather than relying on Flash we will use a solution that degrades gracefully. If you browser doesn't support transitions at least you will see something. For crawlers or other cases where the CSS is ignored the reader will get clean semantic markup .
<html>
<head>
<title>Text transforms</title>
<style type="text/css">
<!-- Insert CSS here -->
</style>
</head>
<body>
<h1>Hover on me</h1>
</body>
</html>
Applying some basic styling to make it more visually interesting the end result looks something like this.
Default state (collapsed)
The custom font comes from Font Squirrel. Since we want this element to appear like it is hanging the margin is pushed back off the screen. The most important statement though is the transform. Rotating the container by 10 degrees sets it off against the square of the window.
h1 {
padding: 5rem 1rem 1rem 1rem;
margin: -5rem 0 1rem 0;
background: rgba(255, 64, 128, 0.9);
color: rgb(255, 255, 255);
border-radius: 1.5rem;
width: 5em;
transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
}
This looks playful but let's take it another step. When the mouse hovers over the H1 tag it should slide down. This requires only a few lines of CSS (Internet Explorer does not yet support the transition tag. According to CanIUse we'll have to wait for at least version 10 for that].
h1:hover {
padding: 15rem 1rem 1rem 1rem;
-moz-transition: padding 1s;
-webkit-transition: padding 1s;
-o-transtion: padding 1s;
}
So that it also slides back into place instead of popping add the same lines to the default H1 state. By changing the padding between 5rem and 15rems it gives the illusion that the element is sliding out from the corner of the page.
Expanded state
So what does it take to create an animated hanging tab? Only one psuedo class (:hover), three CSS statements (transform, transition, and padding), and a little bit of creativity. Try it in your next project.