Skip to main content
CSS is fun and cool and I like it.
Article

CSS Trick: Fade Out the Bottom of Pages with a Fixed Position Image

I really like this subtle effect on the fortuito.us blog. the text at the bottom of the page fades away. Even as you scroll the page content up and down, it appears as if it fades away into the bottom of the page.

This can be achieved with a transparent image that is in a fixed position on the page, like so:

#bottom_fade {
	z-index: 99;
	position: fixed;
	bottom: 0%;
	background-image: url("bottom-fade.png");
}

The high z-index helps insure it … Read article “CSS Trick: Fade Out the Bottom of Pages with a Fixed Position Image”

Article

Put Images in All Four Corners with CSS Positioning

It can be a mighty cool effect to have images that nestle themselves in the four corners of your webpage. You can achieve this positioning with CSS fairly easily without affecting any of your other page content. You may also pick and choose which corners you want to use, if you don’t wish to use all four. Here is the basic theory:

#upper_left {
	position: absolute;
	top: 0;
	left: 0;
}
#upper_right {
	position: absolute;
	top: 0;
	right: 0%;
}
Read article “Put Images in All Four Corners with CSS Positioning”
Article

Spice Up Embedded YouTube Videos with Background CSS

If you are adding video to your website, using embedded YouTube videos is definitely something to consider. In addition to saving hugely on bandwidth, releasing your video into the wild on YouTube might gain you some exposure you may have not otherwise gotten. One drawback is that you don’t have very much control of how this video gets displayed. Basically you get the simple YouTube player:

You don’t have control over much, including quality and the “related videos” that YouTube … Read article “Spice Up Embedded YouTube Videos with Background CSS”

Article

HangTab: Create a Sticky Tag from the Edge of the Browser Window (Even with Centered Content)

It is a very healthy technique these days to center your entire website horizontally in the browser window (but be careful), especially nowadays with monitors getting bigger and bigger and with higher resolution. Sometimes it’s nice to break the rules though, for effect. Check out Panic’s website for their software Coda.

This is with the browser window fairly small:

[MISSING IMAGE, Sorry]

And this is with the browser window stretched out:

[MISSING IMAGE, Sorry]

The “Hangtab” is just … Read article “HangTab: Create a Sticky Tag from the Edge of the Browser Window (Even with Centered Content)”

Article

Using Pure CSS for Flipbook Style Animation

There is a great tutorial on CSS Play that uses pure CSS to create flipbook style animation. The theory at work here is that there is there is a big stack of “slides” stacked on top of each other. On top of that is a series of tall rectangular “slices” made up of unique <a> elements. Each of the slides are pushed just outside of the div and the overflow is hidden, then when the :hover states are activated on … Read article “Using Pure CSS for Flipbook Style Animation”

Article

Using Divs Inside Tables

Despite their status as mortal enemies, divs and tables can work together if you need them to. Because of the ability to use vertical centering in tables, it is a somewhat popular technique to use a single-celled table with both horizontal and vertical centering to absolutely center your page content in a browser window (mostly only useful for fixed-size content).

One important thing to remember when putting a div inside of a table is that the div needs to live … Read article “Using Divs Inside Tables”

Article

The How and Why of Clearing Floats

Update: A more comprehensive article on floats is now out: All About Floats

You’ve heard of “clearing floats”, but do you really understand it? The whole problem is that floated objects do not add to the height of the object the reside in properly. As you can see below, these divs with the class “floated_box” are within the div “main_container”, yet on the page they are outside that container div.

#main_container {
 width: 400px;
 margin: 20px auto;
 border: 2px solid 
Read article “The How and Why of Clearing Floats”
Article

Left Align and Right Align Text on the Same Line

It can sometimes be useful to have some text be aligned to the left and some text be aligned to the right on the same line. For example, in a footer, where you might want to have copyright info on the left and webmaster info on the right. Here is how you might want your HTML:

<div id="textbox">
  <p class="alignleft">Text on the left.</p>
  <p class="alignright">Text on the right.</p>
</div>

If you were to then give your CSS classes alignleft and … Read article “Left Align and Right Align Text on the Same Line”

Article

Give Your Images Space and Captions For Better Layout

You can always float your images to one side or the other and give them a bit of a margin just by giving them a class like “floatright” and declaring that class as:

.floatright {
float: right;
margin: 5px;
}

That’s fine and dandy, but let’s switch things up a bit in order to give us more control as well as add captions to the images. This adds a nice touch to any web article and a more professional layout … Read article “Give Your Images Space and Captions For Better Layout”

Article

Stylesheets for Printing

Jason from 37 Signals has a great post up on the Signal vs. Noise blog on how simple print stylesheets can be and still be effective. Basically using display: none; enmasse. People don’t need your header or your footer or your navigation. If they are trying to print your webpage they are trying to print the content, so give it to them.

Here is the theory:

#header, #navigation, #footer, .any, .random, .junk, .on, .your, .page, .that, .shouldnt, .print {
  display: 
Read article “Stylesheets for Printing”