Jorge Pedret » CSS

How to create a cool css background transition effect

Jorge Pedret — Fri, 22 Apr 2011 21:38:14 +0000

I first saw this effect in the popular website Think Geek, when you scroll down all the way to the bottom you can see how it makes a transition from cool Robots to cool Zombies.

It bugged my mind for a bit so I decided to figure out how they did it. It turns out it’s a lot more simple than you think, all you need is two images and CSS.

See the demo Download the demo files

Here’s how you can easily create the effect:

Start by creating the transition image

Create a 1200 x 300 pixels image in Photoshop with transparent background.
Create the images that you want to see at the top of the page and make sure they’re only in #666.
Then, create the images that you want to see at the bottom of the page and make sure they’re only in #000.
Save it as a PNG named bottom-bg.png, making sure there’s no background color. The only two colors that can exist in this image are #666 and #000.

The two top and bottom images can’t be touching each other, they have to be separate, otherwise the effect will not work. They can be very close though.

This is the design that Think Geek used: https://www.thinkgeek.com/images/sitewide/backgrounds/robozombies7.png

Next, create the background image

Create a 10 x 700 pixels image in Photoshop
Select the gradient tool and configure the gradient to be from #000 to #666
Vertically drag it from the very top to the middle of the image approximately.
Save that as a PNG file named body-bg.png and you’re done with the background image.

Once you understand the way this effect works, you will be able to use whichever colors you want. But for now we’re sticking to #000 and #666

And finally, write the CSS and HTML

Let’s start with the HTML:

This is a simple structure for this demo, but you can adapt it to your own project.

For the styles, you’re going to attach to your body tag the background image that you created in step 2 and make the color background #000.

body{
	background: #000 url(body-bg.png) left bottom repeat-x;
}

Next step is styling the .facywrap class by attaching the transition image to it. And the secret for this effect to work is to use the CSS property background-attachment: fixed; like this:

.fancywrap{
	background: url('bottom-bg.png') repeat-x;
	background-position: center bottom;
	background-attachment: fixed;
}

See the full demo code in Github: https://gist.github.com/937679

That’s it! Once you understand how it works, you will be able to choose your own color combination other than the boring #000 and #666.

See the demo Download the demo files

Get updates via Email

Patternify: CSS Pattern Generator

Jorge Pedret — Tue, 12 Apr 2011 16:56:00 +0000

Generate patterns to use with CSS. You can choose to get the PNG format or the raw base 64 data so it can be directly included in your CSS. Pretty awesome!

CSS won’t style my HTML5 markup in Internet Explorer!

Jorge Pedret — Tue, 06 Jul 2010 02:34:44 +0000

You built your whole website using html5 new shiny tags, you’re so proud of yourself, it looks great in your development browser!!

It’s finally time to give it a test in Internet Explorer, let’s see how it looks like…

WHAT??? That looks a lot worst than I was expecting… What the heck is going on?

You try changing your css, but explorer doesn’t change at all… You verify if you’re actually working on the right file, and yes in deed, you are. You try to add some basic css properties, but again, it doesn’t change a bit. The problem is…

Internet Explorer completely ignores html5 new tags

OMG! Until when this stupid browser is going to give me head aches – you say out loud.

At this point you have two options:

Change your entire markup and css to use old tags
Use Remy Sharp’s fix. The only downsize: It completely depends on Javascript

IE simply ignores all the elements it doesn’t recognize, regardless of CSS. By using javascript’s function document.createElement(), we iterate through the markup and recreate all the tags that are not recognized by IE.

Quick copy/paste solution

Here is the code taken directly from Remy’s site:

I’m thinking it might be a good idea to condition the code to IE versions lower than 8, since IE9 will have html5 support and it might be coming soon, but that’s up to you:

I feel stupid for not being aware and for not testing earlier in IE. It took me a while to figure out what was going on.

Get more information from this sites:
http://net.tutsplus.com/tutorials/html-css-techniques/how-to-make-all-browsers-render-html5-mark-up-correctly-even-ie6/
http://remysharp.com/2009/01/07/html5-enabling-script/

How to fix z-index problem in ie7 with jQuery?

Jorge Pedret — Wed, 07 Oct 2009 03:50:47 +0000

A quick post, I was just having problems in my website with my beautiful picture showing on top of everything. It was showing fine in FF but in Internet Explorer 7 it was showing behind, so you could only see like half of my face and that’s not fare for anyone.

I found this cool website where I read that ie7 does something weird with the stack order when it renders the page and solves the problem using jQuery. Surprisingly I just copied and pasted the code (after analyzing it of course) and it fixed my problem!

Here is the code! for more details on this solution go to Vance Lucas Website


$(function() {
	var zIndexNumber = 1000;
	$('div').each(function() {
		$(this).css('zIndex', zIndexNumber);
		zIndexNumber -= 10;
	});
});