TutWow » HTML/CSS

Set a Page on Fire with Photoshop and CSS

Ben Lind — Fri, 17 Jul 2009 19:28:20 +0000

Final Result

This tutorial will teach you how to set a web page on fire with Photoshop and CSS. Here’s a preview of what it will look like:

If you want to see it in action, you can go to this page.

Step 1

For the purpose of this tutorial, we will be creating some very basic fire to demonstrate the effect. If you play around on your own, I’m sure you can come up with some much better looking fire.

To start off, open up Photoshop and create a new document 500px wide and 300px tall. Reset your foreground/background colors by pressing D, and go to Filter > Render > Clouds. You should now have some nice black and white clouds like below:

Step 2

To colorize the clouds to look more like fire, press Ctrl + U (Image > Adjustments > Hue/Saturation) to bring up the Hue/Saturation dialog. Inside this dialog, enter these settings:

This will give the fire a nice orange glow:

Step 3

What we want to do now is make this fire texture into a pattern that we can tile across the web page in a later step. To do this, go to Filter > Other > Offset, and enter these settings:

This will “offset” our texture so that we can see the seam that makes it look horrible when we try to tile it. We need to remove this seam so that the texture will run together smoothly later.

Take the Healing Tool (J), alt + click on some part of the texture other than the seam, and click and drag over the seam to “heal” it. If this doesn’t work completely, you may need to use the Blur Tool (R) and blur out the rest of the seam.

Your texture should now look something like this:

Step 4

The last thing we need to do with this texture is fade it out towards the top. Double-click on the Background layer (it should be the only layer), and press ok in the dialog that pops up to unlock the layer.

Press Q to enter Quick Mask Mode, take the Gradient Tool (G), and draw out a linear gradient starting from the bottom of the image and stretching up to almost the top. Press Q again to exit Quick Mask Mode, and then press the Delete key to clear the selection. This will make the texture fade out like below:

Our fire texture is now complete. Press Ctrl + S to save the image to your hard drive. While you’re at it, you should create a new folder someplace where you can keep all of the files you use for this tutorial. Save the image as a PNG file, and name it “fire.png”.

Step 5

Open up your favorite text editor (I use Coda while I’m on a Mac, but any old text editor like TextEdit or Notepad will do) and type in some basic HTML:




 
 
 Fire Page

All this is doing is setting up the page with all of the necessary tags that every HTML page has. The title of the page is “Fire Page”, and we are including an external CSS file, “style.css”, which we will create later, in it.

Step 6

Inside the body of the page, insert this line of code:

This one line is all we need to set up the fire effect. The real work is done in the CSS file that we will create.

To make the example interesting, put in a bunch of Lorem Ipsum text after the

line. I just went to http://www.lipsum.com/, a Lorem Ipsum text generator, and created 15 paragraphs of dummy lipsum. Then I copied the paragraphs into my HTML file and wrapped each one in

tags.

Save the HTML file we’ve been working on as “index.html”, and put it into the same folder as the image (fire.png) we created before.

You should now have a bland page with a bunch of text in it. Not much, but the fun is just beginning…

Step 7

Now create a new text file. This will be the CSS file that styles index.html. Inside this new file, put in this text:

body {
 background: #000;
 color: #FFF;
}

This styles the page so that the background color is black and the font color is white. This will make our fire texture really stand out from the rest of the page. After the above code, enter this text:

#fire {
 background: transparent url(fire.png) repeat-x;
 position: fixed;
 left: 0;
 bottom: 0;
 height: 300px;
 width: 100%;
 z-index: 999;
}

First, this sets the background of the #fire div to the fire.png file we created before. Then, it sets the position, height, and width of the div so that it covers the entire bottom of the page. The last line makes sure that the fire div is always on top of all other content on the page.

Save this file as style.css, and make sure it’s in the same directory as the index.html and fire.png files.

Final Result

That’s it! If you open up index.html in a web browser, you will see this result. Notice that if you scroll down on the page, the fire will stay hovering over the bottom of it. It’s a very versitile effect that you can use for lots of different effects.

Enjoy!

Solving the CSS Padding Problem

Ben Lind — Tue, 11 Nov 2008 03:25:07 +0000

I remember when I first started using CSS, something really ticked me off. That was that when I had an HTML file with a div in it, and I wanted to add some padding to that div, not only did the content inside of the div get “padded”, but the whole div increased in size. As you can imagine, this got really annoying, until one day I found the solution to the problem.

Let’s start with an example of the problem. If I have the following HTML code:



	
		CSS Padding Problem
		
	
	
		I want this content to be padded.

And the following CSS:

body {
	margin: 0;
	padding: 10px;
	background: #EEE;
}
#padded {
	width: 950px;
	margin: auto;
	background: #FFF;
}

Then I will get this result. It looks pretty bad, because the div doesn’t have any padding on it. This is where we run into the problem. Here’s what I mean – if I edit the style.css file and add a “padding: 20px” to the #padded selector, then my CSS file will look like this:

body {
	margin: 0;
	padding: 10px;
	background: #EEE;
}
#padded {
	width: 950px;
	margin: auto;
	background: #FFF;
	padding: 20px;
}

And in a web browser, the result of that change would look like this file. Looks pretty good, doesn’t it? However, if you switch back and forth between the first example and the second example, you’ll see that the div in the second example is a bit wider (40px exactly) than the first one.

By now you might be thinking “So what? What’s the big deal with a div that’s a little bit wider than it should be?” True, for some templates that you create, it won’t matter if a div is wider than it should be. However, for designs that are more precise – i.e. they have been designed to be pixel-perfect – a little div width change could cause a lot of trouble.

So how do we fix this problem? Well, there is a surprisingly simple way to fix this problem, and that is by wrapping the #padded div inside another div. Here is what I mean – the new HTML file will look like this:



	
		CSS Padding Problem
		
	
	
		
			I want this content to be padded.

And the new CSS file:

body {
	margin: 0;
	padding: 10px;
	background: #EEE;
}
#container {
	width: 950px;
	margin: auto;
	background: #FFF;
}
#padded {
	padding: 20px;
}

As you can see, what I did is just wrap the #padded div inside another div called #container, and then moved all of the styles for the #padded div – except for the “padding: 20px” – to the styles for the #container div.

Take a look at the finished, “fixed”, padding example. A very easy solution to a maybe not-so-easy problem.

As an Update, I found one shortcut list of CSS tricks from my web hosting friend. This is simple but a good refresher.

Quick Tip: CSS 100% Height

Ben Lind — Thu, 11 Sep 2008 17:53:39 +0000

I don’t know about you, but I always get frustrated trying to figure out how to get my layout to stretch vertically to 100% of the page. I have a div that I want to stretch, but it just doesn’t stretch. Now why wouldn’t it do that? Today I will share the solution with you.

Say you have coded an HTML file like this:







CSS 100% Height





Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

And you have a CSS file like this:

body {
	margin: 0;
	padding: 0;
}
#content {
	background: #EEE;
	border-left: 1px solid #000;
	border-right: 1px solid #000;
	padding: 0 20px 0 20px;
	margin: auto;
	font: 1.5em arial, verdana, sans-serif;
	width: 960px;
	height: 100%;
}

That gives you this example file. As you can see, the content box on that page doesn’t stretch to the whole height of the page, even though we added the “height: 100%;” line to the CSS file. Why is that?

Let me give you a different way of thinking about HTML. HTML is pretty much just a bunch of containers stacked inside each other. So in our page, first we have the container, then the container inside of that, and finally the

container inside of that. When we put content into one of those boxes, it stretches that box and all the boxes containing that box so that they can hold the new content. So when we put our text into the

box, that box streches, which in turn stretches all of the boxes that it is in (in our case the and boxes).

When we put the “height: 100%;” style onto the

box, what we are doing is telling it to stretch to the full height of the box that it is in. In this example, the box that it is in is the box. So the

box is 100% of the height of the box. Well, how tall is the box? It’s just as tall as the

box, because we never told it how tall it should be! So when we put the “height: 100%;” style onto the

box, we are just telling it to be as tall as itself!

To fix this, we need to tell the box to get bigger. But then we run into the same problem with the box – it is only as big as the box! So to fix our problem (to get the

box to stretch the whole height of the page), we need to tell the and boxes to be the full height of the page.

So if we change our CSS file to this:

html {
	height: 100%;
}
body {
	margin: 0;
	padding: 0;
	height: 100%;
}
#content {
	background: #EEE;
	border-left: 1px solid #000;
	border-right: 1px solid #000;
	padding: 0 20px 0 20px;
	margin: auto;
	font: 1.5em arial, verdana, sans-serif;
	width: 960px;
	height: 100%;
}

And that’s it! This is what we have now. The content box is now stretched to the full height of the page!

My Coding Style

Ben Lind — Wed, 18 Jun 2008 15:34:21 +0000

Over the past few years, I have learned many different programming languages. Having typed program after program (“Hello World” after “Hello World”), I have come up with a very specific programming style for formatting my code. Instead of just throwing a bunch of code into a text editor – hoping that I can decipher it when I look at it again in a few months – I carefully indent all of my code to the correct width, and use a lot of comments. Below, I have put together some of my most-used practices so that you can (hopefully) benefit from and build off of them.

1. Indenting Two Spaces

One of the most obvious ways to make your code more readable is to indent all of your lines to the correct width. I usually use two spaces for my tabs, an option you can specify in most text editors.

2. Code Bracket Placement

As I said before, it’s always nice to keep your code style the same throughout all of your code. One of the things I am a little “finicky” about is the placement of the code brackets that surround my code blocks (if statements, while loops, etc.).

I place my beginning bracket one space after the ending parenthesis of the code block header. Take a look at this image to see what I mean:

3. Comment, Comment, Comment

Alright, I admit it, I’m a comment freak. I go wild with comments all over the place, and I have descriptions of almost every line of code in my files. I find that if I stick to one format for all of my comments, it makes the overall readability a whole lot better.

When I comment whole sections of code, using the comment as a sort of “header”, I put my header text inside a multi-line comment, and place this right before the beginning of the section of code that I’m describing.

When describing just a single line, I use a single-line comment, and tab it one or two tabs from the line I’m describing – like this:

4. Parenthesis and Brace Padding

To make my code more readable, I add spaces inside all of my parentheses and square braces as a kind of “padding” for them. This can look strange at first, but if you get used to it, you’ll see how much more readable it can make things.

Conclusion

I hope that everyone who reads this post gets something out of it, and applies it to their own coding. Now don’t misunderstand me – this is not the only way to format your code – there are so many different ways you can do this, and the important thing is that you find the style that you’re comfortable with and stick with it.

Until next time, happy coding!

HTML Code Export

Ben Lind — Sun, 25 May 2008 01:33:19 +0000

This is a message to all of you HTML coders out there who have spent hours indenting their code lines so that they look just right, only to get them messed up again. I know how you feel! I’m one of those people who need to have their code indented to just the right length so that I can think straight.

Well, now there’s a solution. I’ve been searching around the web, and I just stumbled onto this program called HTML Code Export. What it does (or what I use it for) is it takes HTML code that you enter, and it indents everything so that it’s nice and tidy. Pretty slick, huh? I can’t believe I didn’t think of this earlier – it would have saved my hours of headaches!

Make sure to hop over to the download site, and get your copy of this amazing time saving program now!