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

Links of Interest

Photoshop Cryptoquote Challenge


This has nothing to do with CSS, but I thought it might be a fun little for any Photoshop gurus out there. Someone spraypainted a message on the side of one of my neighbor's houses. Before I could read what it said, the message was painted over. But you can still sorta read it, so I thought I'd snap a picture and see if I could Photoshop it and make out the message. I think I might … Read article

Article

CSS-Tricks Finally Gets A Print Stylesheet

This is way past due...but it's finally here: a print stylesheet!

I'll start by showing you the entire stylesheet, then I'll explain a little bit about what I was thinking.

body {
	font-family: Georgia, serif;
	background: none;
	color: black;
}
#page {
	width: 100%;
	margin: 0; padding: 0;
	background: none;
}
#header, #menu-bar, #sidebar, h2#postcomment, form#commentform, #footer {
	display: none;
}
.entry a:after {
	content: " [" attr(href) "] ";
}
#printed-article {
	border: 1px solid #666;
	padding: 10px;
}
Read article
Article

Equidistant Objects with CSS

Just take me down to the solutions, please.

Creating a horizontal row of objects that are equidistant from each other is another one of those things in web design that is much more difficult than it should be. This can be a very useful thing to do, especially in fluid width layouts when you are trying to make the most of whatever horizontal space you have.

Here are the goals we are trying to achieve:

  • The left-most object is left
Read article
Article

Color Rendering Difference: Firefox vs. Safari

CSS-Tricks reader Norm writes in to ask me about a problem he is having with color on a new site he is designing:

I have a graphical question about my test site. The header and main page background are pulled from the same original graphic and in Firefox the header and body match up fairly well (I still need to do a little work to get the patterns to match up better) but in Safari the shade of brown

Read article
Article

Links of Interest

CSS Rand


I was kind of confused when I first went to CSS Rand, because it just looked like some random nice website (not a gallery) then I figured it out... It's a new kind of design gallery, where you just reload your page and it loads up a new page for you to look at. Kind of a neat idea. Lots of non-English sites too if you are into/not-into that. I'd like to see some kind of voting...… Read article

Article

CSS-Tricks Screencasts now on iTunes

It took a little while, but the CSS-Tricks Video Screencasts are now listed properly in the iTunes podcast directory.

Even cooler, you can just straight up search for "CSS" in the iTunes search area and it comes up as one of the ones right in the Podcasts section. Right next to "Let's Make Love and Listen to Death from Above". Perfect.

Here is the direct link:
CSS-Tricks Screencasts (iTunes Link)Read article

Article

Techniques for Fighting Image Theft

There are a few.

1. Redirect links from external sites to your "DON'T STEAL" graphic

There are numerous tutorials on how to do this around the web, but I most recently read about it on David Airey's article "How to deter thieves from stealing your images and server bandwidth". The technique is an addition to your .htaccess file in the root directory of your site:

RewriteEngine On
RewriteCond %{HTTP_REFERER} !^http://(.+\.)?yourwebsite\.com/ [NC]
RewriteCond %{HTTP_REFERER} !^$
RewriteRule .*\.(jpe?g|gif|bmp|png|jpg)$ 
Read article
Article

New Poll: What Kind of CSS Reset Do You Use?

Different browsers have different default settings for page elements. In an effort to keep web pages looking as consistent as possible between browsers, many web designers use what is commonly referred to as a CSS reset to wipe away these default settings and start fresh.

Margin and padding are the most common things to reset as they commonly cause layout problems if not reset. This also gives you the opportunity to "work forwards" with your margin/padding. This means applying margin/padding … Read article

Article

Links of Interest

C.S.I in XHTML and CSS coding.


Dor Dan has a nice article on keeping both your HTML and CSS clean with a consistent system of Comments, Spacing, and Indents. Now that's some beautiful code.

 

Detailed Look at Stacking in CSS


Tim Kadlec takes an in-depth look at the "stacking order" of the z-index parameter in CSS. Z-index is, unfortunately, one of those things that is not as simple as it should be. The one that … Read article

icon-link icon-logo-star icon-search icon-star