Articles

Let’s say you need six different 100px square boxes with different characteristics:

• Red with Border
• Blue with Border
• Green with Border
• Red without Border
• Blue without Border
• Green without Border

You COULD create a unique class for each of these, like so:

.redwithborder {
	width: 100px;
	height: 100px;
	margin: 10px;
	float: left;
	background-color: red;
	border: 3px solid black;
}
.bluewithborder {
	width: 100px;
	height: 100px;
	margin: 10px;
	float: left;
	background-color: blue;
	border: 3px solid black;
}
...etc

BUT that’s called … Read article “Un-bloat CSS by using multiple classes”

There is an article over at Search-This that points out a couple of beginner mistakes that are pretty interesting. Here are some highlights and some of our own:

• Absolute positioning. – One of the first feelings of power you get when learning CSS is learning that you can control the position and size of any element on the page with what are essentially X,Y coordinates and dimensions. Of course, absolute positioning has it’s uses, but generally not for actual

Just like you can validate your HTML at the W3C, you can validate your CSS.

CSS-Tricks passes muster.… Read article “Validate your CSS through W3C”

You can get pretty specific when declaring how you want text to look with CSS:

p {
  font-family: Verdana;
  background-color: #7A2121;
  color: #B93333;
  text-decoration: underline;
  word-spacing: Normal;
  text-align: left;
  letter-spacing: 1px;
  text-indent: 15px;
  line-height: 16px;
  font-size: 10px;
  font-weight: bold;
  font-style: italic;
  text-transform: uppercase;
}

And that’s not even all of it… But still, even if you get that specific, there are drastic differences from browser to browser on how the actual rendered text looks. The important lesson here is that … Read article “Font Rendering Differences: Firefox vs. IE vs. Safari”

Dan Cole has an interesting article up about creating a logo using only CSS. Why?

• Faster loading time
• Works with images disabled
• Scalable

Here is what it looks like:

Here is how it was done:

#tower1 {
position:absolute;
top:51px;
left:20px;
width:20px;
height: 30px;
background-color: #333;
}
#tower2 {
position:absolute;
top:31px;
left:45px;
width:20px;
height: 50px;
background-color: #33E;
}
#tower3 {
position:absolute;
top:11px;
left:70px;
width:20px;
height: 70px;
background-color: #3A3;
}
#tower4 {
position:absolute;
top:90px;
left:20px;
width:20px;
height: 10px;
background-color: #AAA;
}

This is old news, but is worth of revisiting because of it’s preposterousness. You are able to add CSS to your MySpace pages. Cool. But where do you do that? Is there some little fun CSS editor they built in? Maybe a “theme editor” or the like? Nah.

You have to paste in your CSS into the “About Me” section of your profile.

My god that just crazy. But anyway, it works. I was able to add some stripes… Read article “Totally Ridiculous: CSS MySpace Modifications”

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”

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%;
}

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”

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)”