bavotasan.com » safari

Amazing Hover Effects with CSS3

c.bavota — Thu, 13 Jan 2011 17:34:46 +0000

I have received a lot of questions lately about hover effects and how you can execute them using only CSS. There was a time when you would have to use jQuery to really make your effect stand out, but now CSS3 has some pretty amazing properties that help designers create some lightweight effects that truly stand out.

Box Shadow

This effect will create a shadow around your div container when you hover over it:

CSS:

div.shadow {
	width: 300px;
	margin: 20px;
	border: 1px solid #ccc;
	padding: 10px;
	}
 
div.shadow:hover {
	-moz-box-shadow: 0 0 5px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.5);
	box-shadow: 0 0 5px rgba(0,0,0,0.5);
	}

HTML:

<div class="shadow">
Ut vulputate sem venenatis magna commodo ac semper nibh mollis. Pellentesque suscipit metus non lacus lacinia sed porttitor metus suscipit. Aenean egestas augue vel sem tincidunt scelerisque. Sed ullamcorper convallis arcu, vel euismod urna egestas in.
div>

DEMO:

Ut vulputate sem venenatis magna commodo ac semper nibh mollis. Pellentesque suscipit metus non lacus lacinia sed porttitor metus suscipit. Aenean egestas augue vel sem tincidunt scelerisque. Sed ullamcorper convallis arcu, vel euismod urna egestas in.

That one’s pretty simple and straightforward, but still kind of cool. It can also be used on images.

Opacity

Having something fade in on a hover can be seen almost anywhere on the web.

CSS:

img.opacity {
	opacity: 0.5;
	filter: alpha(opacity=50);
	}	
 
img.opacity:hover {
	opacity: 1;
	filter: alpha(opacity=100);
	}

HTML:

<img src="http://bavotasan.com/wp-content/uploads/2011/01/spiral.jpg" width="550" height="366" alt="" class="opacity" />

DEMO:

If you want to create an even cooler opacity fade effect, you can take advantage of the new transition property. Note, this will only work in Webkit browsers such as Chrome and Safari.

CSS:

img.opacity {
	opacity: 0.5;
	filter: alpha(opacity=50);
 	-webkit-transition: opacity 1s linear;
	}	
 
img.opacity:hover {
	opacity: 1;
	filter: alpha(opacity=100);
 	-webkit-transition: opacity 1s linear;
	}

DEMO:

(this one only works in Chrome or Safari)

The Switch and/or Reveal

I have seen a lot of sites use an effect where something is revealed when you hover over an element. This one needs a bit more CSS and HTML since it requires two elements that sit on top of one another. I’m using text and an image in the example below but it can be two images, links or anything you want. Just remember that both elements need to use absolute positions or the effect will not work properly.

CSS:

div.top {
	margin: 20px 0;
	position: relative;
	width: 120px;
	height: 70px;
	border: 1px solid #aaa;
	overflow: hidden;
	}	
 
	div.top div {
		width: 100px;
		height: 50px;
		font-size: 12px;
		padding: 10px;
		position: absolute;
		top: 0;
		left: 0;
		text-align: center;
		background: #fff;
		}
 
	div.top div.first {
		z-index: 1000;
		}		
 
div.top:hover div.first {
	display: none;
	}

HTML:

<div class="top">
	<div class="first">Hover over me to see something happendiv>
    <div class="second"><img src="http://bavotasan.com/wp-content/uploads/2011/01/happyface.jpg" alt="" height="50" width="50" />div>
div>

DEMO:

Hover over me to see something happen

The above example doesn’t use CSS3 since it is just taking advantage of the display property. Let’s see how CSS3 can make this effect stand out.

CSS:

div.top {
	margin: 20px 0;
	position: relative;
	width: 120px;
	height: 70px;
	border: 1px solid #aaa;
	overflow: hidden;
	}	
 
	div.top div {
		width: 100px;
		height: 50px;
		font-size: 12px;
		padding: 10px;
		position: absolute;
		top: 0;
		left: 0;
		text-align: center;
		background: #fff;
   		-webkit-transition: left 1s ease-in-out;
		}
 
	div.top div.first {
		z-index: 1000;
		}		
 
div.top:hover div.first {
	-webkit-transition: left 1s ease-in-out;
	left: -122px;
	}

DEMO:

Hover over me to see something happen

(this one also only works in Chrome or Safari)

You can have the slide work in any direction by either use the top property with a positive or negative number, or switching up the left property to use a positive number.

Position

A very simple effect that is often used on lists is to have the item slide over as your hover.

CSS:

ul.slide li:hover {
	padding-left: 5px;
	}

HTML:

<ul class="slide">
    <li><a href="http://bavotasan.com/downloads/my-first-vanilla-plugin/">My First Vanilla Plugina>li>
    <li><a href="http://bavotasan.com/downloads/delete-duplicate-posts-pro-wordpress-plugin/">Delete Duplicate Posts Pro WordPress Plugina>li>
    <li><a href="http://bavotasan.com/downloads/feed-me-seymour-free-wordpress-theme/">Feed Me, Seymour 1.2a>li>
    <li><a href="http://bavotasan.com/downloads/magazine-basic-free-wordpress-theme/">Magazine Basic v2.6 WordPress Themea>li>
    <li><a href="http://bavotasan.com/downloads/sliderota-jquery-plugin/">Sliderota jQuery Plugina>li>
ul>

DEMO:

Now let’s add some CSS3.

ul.slide li {
	padding-left: 0;
	-webkit-transition: all 0.5s ease-in-out;
	}
 
ul.slide li:hover {
	padding-left: 5px;
	-webkit-transition: all 0.5s ease-in-out;
	}

(once again this only works in Chrome or Safari)

Sadly, not all browsers are up to snuff in regards to CSS3, but as time passes most will release updates that take advantage of all the new properties and effects that have been released.

Text Rotation with CSS3

c.bavota — Wed, 15 Sep 2010 15:49:20 +0000

I’m working on a new design for Themes by bavotasan.com and I have been contemplating a few different approaches for some new buttons. This one fell by the wayside but I still think it’s kind of a cool idea. I wanted to use the CSS3 rotate style to have text going straight up. It’s pretty simple to do and looks awesome.

Basic Themes

are

FREE

This is the HTML markup:

<div class="rotate-button">
   <div class="top">Basic Themesdiv>
   <div class="turned">arediv>
   <div class="bottom">FREEdiv>
div>

The CSS3 rotate style looks like this:

-webkit-transform: rotate(-90deg); 
-moz-transform: rotate(-90deg);

The effects works in Firefox, Safari and Chrome browsers. You can also add a filter to make it work in IE but it probably won’t look exactly how you wanted it to.

The IE filter:

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

Arrows image by zmajdoo, provided by Pixmac.

How to Draw a Smiley Face with CSS3

c.bavota — Tue, 10 Aug 2010 22:52:43 +0000

I was messing around with CSS3 gradients, rounded corners and shadows, and I thought to myself, “I wonder if I can draw something that actually looks like something?” Lo and behold, I could. I decided to go with a smiley face, since it would need circles, ovals and some random shapes. It would also require gradients and shadows. After a few failed attempts, I somehow managed to figure it out and the outcome is pretty cool.

It really amazes me that CSS3 has the power to create something like this. I tested it out in Firefox, Safari and Chrome. They all look good. Of course, in IE it looks like this…

It’s like IE is living in 1986.

Here is the HTML:

<div class="smileyface">
    <p class="eyes lefteye">p>
    <p class="eyes righteye">p>
    <div class="smile">
        <div class="corner">div>
        <div class="corner right">div>
    div>
div>

Here is the CSS:

div.smileyface {
	width: 300px;
	height: 300px;
	position: relative;
	border-radius: 150px;
	-webkit-border-radius: 150px;
	-moz-border-radius: 150px;
	display: block;
	background: #ffe632;
	background: -webkit-gradient(linear, left top, left bottom, from(#fffe8d), to(#f6d23e));
	background: -moz-linear-gradient(top,  #fffe8d,  #f6d23e);	
	box-shadow: inset 0px -14px 14px rgba(0, 0, 0, .3), 0px 2px 20px rgba(0, 0, 0, .6);
	-webkit-box-shadow: inset 0px -14px 14px rgba(0, 0, 0, .3), 0px 2px 20px rgba(0, 0, 0, .6);
	-moz-box-shadow: inset 0px -14px 14px rgba(0, 0, 0, .3), 0px 2px 20px rgba(0, 0, 0, .6);
	}
 
p.eyes {
	width: 50px;
	height: 80px;
	background: #222;
	border-radius: 100px/160px;
	-webkit-border-radius: 100px 160px;
	-moz-border-radius: 100px/160px;
	position: absolute;
	top: 40px;
	box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
	-webkit-box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
	-moz-box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
	}	
 
	p.eyes.lefteye {
		left: 75px;
		}
 
	p.eyes.righteye {
		right: 75px;
		}
 
div.smile {
	width: 200px;
	height: 70px;
	border: 10px solid #222;
	border-top: 0;
	background: rgba(0,0,0,0);
	-moz-border-radius: 0 0 120px 120px / 0 0 90px 90px;
	-webkit-border-radius: 0 0 120px 120px 0 0 90px 90px;
	border-radius: 0 0 120px 120px / 0 0 90px 90px;
	position: absolute;
	bottom: 50px;
	left: 38px;
	box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
	-webkit-box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
	-moz-box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
	}
 
div.corner {
	width: 10px;
	height: 30px;
	background: #222;
	border-radius: 100px/160px;
	-webkit-border-radius: 100px 160px;
	-moz-border-radius: 100px/160px;
	position: absolute;
	top: -12px;
	-webkit-transform: rotate(65deg);
	-moz-transform: rotate(65deg);
	left: -12px;
	}
 
	div.corner.right {
		left: 202px;
		-webkit-transform: rotate(-65deg);
		-moz-transform: rotate(-65deg);		
		}

Inspiration:

Gradient Buttons with CSS3

c.bavota — Wed, 28 Apr 2010 16:32:35 +0000

I have been having a lot of fun messing around with CSS3 and received a lot of emails since I posted my tutorial for Creating Shadows with CSS3. I decided that putting together a quick tutorial on how to use multiple CSS3 effects at the same time to create a cool looking gradient button would show people just how amazing CSS3 is.

The only draw back to using some of these effects is that they are not 100% cross browser compatible. Check out this page in the latest versions of Firefox, Safari or Chrome to really see the effects in action.

I’m going to style an anchor tag for my button so first I need to create some HTML:

<a href="#" class="button">This is my buttona>

Now comes the fun part. Let’s start with the basic CSS necessary for our button:

a.button {
	border: 1px solid #ccc;
	padding: 10px 20px 6px;
	color: #999;
	text-decoration: none;
	font-size: 28px;
	line-height: 30px;
	background: #ddd;
	}

This is my button

Now let’s add some rounded corners:

a.button {
	border: 1px solid #ccc;
	padding: 10px 20px 6px;
	color: #999;
	text-decoration: none;
	font-size: 28px;
	line-height: 30px;
	background: #ddd;
	border-radius: 12px;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	}

This is my button

Next comes the shadows:

a.button {
	border: 1px solid #ccc;
	padding: 10px 20px 6px;
	color: #999;
	text-decoration: none;
	font-size: 28px;
	line-height: 30px;
	background: #ddd;
	border-radius: 12px;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	box-shadow: 1px 1px 2px rgba(0,0,0,.5);
	-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.5);
	-moz-box-shadow: 1px 1px 2px rgba(0,0,0,.5);
	text-shadow: #fff 0px 1px 1px;
	}

This is my button

And finally, the gradient:

a.button {
	border: 1px solid #ccc;
	padding: 10px 20px 6px;
	color: #999;
	text-decoration: none;
	font-size: 28px;
	line-height: 30px;
	background: #ddd;
	border-radius: 12px;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	box-shadow: 1px 1px 2px rgba(0,0,0,.5);
	-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.5);
	-moz-box-shadow: 1px 1px 2px rgba(0,0,0,.5);
	text-shadow: #fff 0px 1px 1px;
	background: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#cccccc));
	background: -moz-linear-gradient(top,  #eeeeee,  #cccccc);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#cccccc');
	}

This is my button

For fun, let’s add a active effect to make the button actually look like it is being pressed when you click on it:

a:active.button {
	box-shadow: 0px 0px 0px rgba(0,0,0,.5);
	-webkit-box-shadow: 0px 0px 0px rgba(0,0,0,.5);
	-moz-box-shadow: 0px 0px 0px rgba(0,0,0,.5);
	position: relative;
	top: 1px;
	left: 1px;
	}

This is my button

A Slightly New Design for Themes by bavotasan.com

c.bavota — Sat, 17 Apr 2010 17:14:25 +0000

I just spent the past couple of days updating the look of Themes by bavotasan.com. Things are slightly different but a lot nicer, in my opinion. For those using Internet Explorer, the design will probably look a lot more simple, but that’s because IE sucks the big one. Check it out in Firefox, Chrome or Safari to see all the changes.

I decided it would make more sense to show a few more features for each theme, so now there is a lot more information on each theme’s page.

Also, I finally built my first real CSS sprite to include all the images and icons I was using on the site. Check it out:

If you have any feedback about the new layout and design please let me know.