I figured out a way to fade out background images with only CSS today and I thought I’d share. I guess I should clarify to begin with and say that this doesn’t technically fade out the image. It simply hides the image gradually with a transparent to solid gradient. Because of this, elements below the container with the background image won’t show through. But, if you have solid colors behind it, then the overall effect is very similar and very useful.

This little tutorial will use CSS multiple backgrounds, CSS gradients, and CSS transitions, and RGBA colors. Yes, lots and lots of awesome CSS.

The Demo

First, let’s see the DEMO. The demo will only work in webkit browsers because I’m feeling lazy at the moment and don’t want to deal with adding all the browser prefixes. It will work in all modern browsers though if you swap out -webkit in the code for the other prefixes.

The Code

HTML:

<;div class="one">;
	This div has a background image that gets faded out on hover.
<;/div>;

<;div class="two">;
	This div has a background image that slides sideways and gets faded out on hover.
<;/div>;

<;div class="three">;
	This div has a background image that slides sideways, down, and gets faded out on hover.
<;/div>;

CSS:

div {
background: -webkit-linear-gradient(right, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 25%, rgba(255,255,255,1) 75%, rgba(255,255,255,1) 100%), url('overpass.jpg');
background-size: 400% 100%, 150% auto;
background-position: 100% 0, right top;
width: 400px;
height: 200px;
-webkit-transition: background-position .3s;
}

div.one:hover {
background-position: 0% 0, right top;
}

div.two:hover {
background-position: 0% 0,  0% 0%;
}

div.three:hover {
background-position: 0% 0, 0% 100%;
}

The Explanation

So what’s going on here? What I’ve done is set two background images. One is the photo you see before the fade. The second is a linear gradient that uses the alpha channel in the rgba values to go from a transparent white to a solid white. This sits on top of the photo so that it can mask the image. I then animate the gradient on hover to slide over the image which hides or shows it.

The real magic happens with the background size property. I am dividing the gradient into three section (the middle gradient section accounts for two parts in the list and diagram). 1.Completely Transparent (25% of gradient) 2.Transparent to Solid (25% of gradient) 3.Transparent to Solid (25% of gradient) 4.Completely Solid White (25% of gradient). I then set the width of the gradient with the background-size property to 400% because I am using 4 parts, each of which need to cover 100% of the image. This forces the transparent and solid portions of the gradient to completely cover 100% of the div area, leaving the middle transition area to fade between the two ends. The beauty of using percentages is that the width of the div container can be changed on the fly and the fade effect will always work.

I’m sure I gave a less than clear explanation so if you have any questions, ask away! Enjoy.

P.S. Before I even finished writing this, I’ve already made a few changes to the demo. The core concept is still the same even though there might be some slight stylistic differences.

I recently finished Gary Vaynerchuk’s book “Crush It” and one the things he covered was the need for some kind of call to action button on your website as a way to create return visitors and further their interaction with your brand, among other things. These buttons don’t have to just be about buying products such as a book, they can also be links to your social networks or anything that will further engage your audience. It seems like such an obvious idea after reading it but for some reason I had completely left anything like this off of my own website. To remedy this, I decided to add a follow me tab with drop down links to my main social networking sites and my rss feeds.

This is where I get the part that I want to share with everyone. While trying to figure out how to implement this new button, I stumbled upon a new way to create drop down menus with out the use of javascript. Now I’m sure someone else has figured this out as well but I was excited that I managed to do it on my own and thought someone else might find it useful as well. If you would like to see an example of what I am going to describe, just hover over the “follow me” button on the left side of this site.

Before you read on, I want to preface this section by letting everyone know this is my first attempt at writing a technical code explanation so if something doesn’t make sense or I got anything wrong, let me know in the comments and I will do my best to clarify. So, Let’s get down to it and take a look at the code. The html is nothing more than a unordered list made up of the various links you want to display:

<ul id="call-to-action">
  <li><a href="http://twitter.com/patrickrhill/">Twitter</a></li>
  <li><a href="http://www.flickr.com/photos/patrickrhill/">Flickr</a></li>
  <li><a href="http://feeds.feedburner.com/AltVisionsDesign">RSS</a></li>
</ul>

The magic happens when you add the CSS. Basically all that is happening here is the content of the unordered list is being hidden and replaced with an image of text saying “follow me”. When someone hovers over this, the image is removed and the list full of your links is allowed to expand. You can then style the links however you see fit. Keep in mind though that if you want all of the links to remain symmetrical and line up correctly, you will need to display them as block elements.

#call-to-action {
		min-width: 30px;
		position: absolute;
		left: 0px;
		height: 120px;
		top: 457px;
		text-indent: -3000px;
		min-height: 50px;
		background: black url('images/follow-me.png') no-repeat center center;
}

#call-to-action:hover {
		text-indent: 0px;
		height: auto;
		background: black none;
}

#call-to-action a {
		display: block;
		padding: 5px 10px;
		margin: 10px 0px;
		color: white;
}

#call-to-action a:hover {
		padding: 5px 10px;
		margin: 10px 0px;
		background: white;
		color: black;
}

To finish up, remember that this technique doesn’t have to be used solely in this way; you can apply it to any type of navigation you like. I’m currently experimenting with some new ways to utilize this and I hope to share them soon. Well, that’s all I can think up for this post. I hope someone finds this useful!

There was a lot of valuable information offered in this year’s 24 Ways articles but there were three posts that particularly struck me, reviving my excitement in web design and causing me to make fundamental changes in the way I create websites: Meagan Fisher’s Post on creating mock-ups in the browser, Andy Clarke’s Post on designing for modern browsers, and Drew McLellan’s Post on rgba color. My aim for this post is to simply explain what was covered in these posts and how it affects me. I will be writing a follow up post that goes into more detail about how I have begun to implement these things and what the results have been like.

I think Andy Clarke’s post affected me the most. I am pretty sure I have run across this idea before that we shouldn’t be designing for the lowest common denominator (IE) but Andy’s narrative just kind of hit home for me and pushed me to start practicing this method. To tell you the truth I feel quite liberated now that I can feel comfortable going to town using some of the CSS3 features like rgba color, box-shadow, and border-radius available in modern browsers like firefox, safari, and chrome and then just basically forgetting about internet explorer. Not to say that I completely neglect IE, but I’m just simply not going to bend over backwards anymore trying to use alternative techniques to make it look like other browsers. I now understand that it is okay for websites to look slightly different and that these new features will just work as a bonus to people who use more advanced browsers.

Drew’s post kind of went hand in hand with Andy’s because it simply explained how to use one the new features in CSS3 that IE doesn’t recognize. RGBA Color simply allows you to set a transparency value to any element in your html and it is incredibly useful. No more will I have to go into photoshop to create transparent tiles for every differently colored background element, I can just simply specify the rgb color value along with the alpha value in one line of css and voila, super awesome transparencies! Not only does this technique make life easier but it also speeds up page load times by reducing http requests and overall data transfer amounts.

As for Meagan Fisher’s post, I haven’t really had the chance to use her idea with a client yet but I have this feeling that it is going to make the design process much easier. Jumping over photoshop and actually creating my designs as I code is a brilliant idea. This method forces/allows me to start off creating clean base structures for my websites where I can focus on content layout and fundamental usability issues. This starting point also lets me bring the client in early on in the design process so that they feel included in the development, hopefully resulting in fewer dramatic changes 5 minutes before launch time. In addition, if there are changes, I will have the luxury, in most cases, of changing a few lines of CSS rather than recreating layers, drop shadows, rounded corners, etc in photoshop. I will, of course, still continue to start my design process in the sketch book and rely on photoshop and illustrator for graphic elements but I think the over all progression of the design will be greatly simplified.