So often I’ll be working on a website that somebody else coded and have to strip out junk styling. There are a lot of different ways to accomplish the same thing with CSS, but so many people have no idea how much time they are wasting by coding something in a “hacky” manner.

Example.
I was working on a site the other day and noticed that every single paragraph in the main content area of every page of the site had a class of “first-paragraph” on it. So I looked in the external sheet and saw that this was simply to remove the top margin on the first paragraph on every page. Ok, so that method worked..great. Except that manually adding a class to every paragraph tag is such a waste of time. Check out the demo where I show an example of targeting the first paragraph in a content area without adding any classes or IDs paragraph tag in the XHTML. Then keep reading to see how to properly code the example above.

View Demo

Here is the code to put in your external CSS sheet to select the first paragraph in a section (in this example a div called “content”). In this example I remove the top margin. If the coder in my example above had done this he wouldn’t have need to add any class to the paragraph tags in the XHTML. Don’t ya just love CSS?

Popups suck.

The good thing is you don’t see that many of them any more. That’s because browsers recognize that they suck and are most likely spam or ads and so they block the popups. The old way of creating a popup was to force open a new browser window over the current browser window. So this is what browsers block. But what if you actually have a need to use a popup window for something useful and not spammy? This happened to me the other day. A client wanted a popup window on their homepage to wish everyone a Merry Christmas.

Knowing I couldn’t use the old popup method, I went searching. I knew it’d be easy enough to use CSS to put a floating div over the content of the site, which creates a popup effect. The problem was how do you close the popup once it’s open? Javascript would be needed for this. Check out the demo I setup which shows how the CSS popup can be set to open on pageload or by clicking on a link; and then how Javascript allows you to have a “close” button that shuts or hides the popup. Then continue reading for the code and downloadable files.

View Demo

If you check out the source code of the html file, you’ll see the following in the body. The “blanket” is the effect of putting the transparent black background behind the popup, which helps separate it from the rest of the content on the page. The “popUpDiv” is where you put the content of your popup.

If you want the popup to load on page load, put the following in your body tag.

Here is the CSS used to style the blanket effect and the popup div. You’ll see I turned the blanket effect off for Internet Explorer, since it doesn’t appear to support “opacity” (big surprise).

There is a Javacript file linked to the html file to make some of the magic happen. I’m going to make the demo files available so you can play with it and make your own. Enjoy!

Download Files

One last thing.. the original code for this was found here. I made some edits to make it work for my application.

In a previous post I showed possibly the easiest way to embed a Twitter feed on your website. This brought up a couple of questions from some users.

1. Can you make a background behind individual Tweets?
2. Can you put the date on it’s own separate line?

As the case goes with a lot of things these days jQuery to the rescue! Check out the demo to see both of these things in action, and then continue reading to see how to accomplish these things with jQuery and download the source files.

View Demo

The jQuery and CSS code to make this happen came from Chris over at CSS-Tricks. I slimmed down and edited it to make it work for me. Here is a zip of the files used for the demo so you can download and edit it as you want.

Download Files

You’ll see in the head of the index page the jQuery which makes it work. The line you need to change is the following:

First replace the part I highlighted in Blue “ilz_” with your Twitter user name.

Next, replace “count=5″ with the number of tweets you want to show up on your page.

Other than that, you should be able to style the rest of the text, links, etc. as long as you know basic CSS. Enjoy!

I showed in a previous post how to use text-shadow with CSS3. Now it’s time to move on to something that’s just about as exciting, using Box-Shadow with CSS3. Throw it on a div, on a table, on an image.. anything goes! Of course it doesn’t work in every browser, but then again not much I talk about on this site does!

Check out the demo to see some examples and then keep reading to find out how to use Box-Shadow.

View Demo

Below are the examples from the demo page, with the code below it which made the shadow. For each shadow, you need to declare the dimensions for -webkit-box-shadow: and -moz-box-shadow:, which takes care of any browser that supports the box-shadow at this point.

The three numbers are similar to using text-shadow with CSS3, the first number is how far right the shadow is from the “box”, the next number is how far below, and the final number is the amount of blur for the shadow. Finally, you declare the color of the shadow.

You’ll see on a couple of them I used the awesome border-radius to show how the shadow wraps around a rounded corner. If you need a refresher on the border-radius declarations, look here. If you want to check out some examples and code of text-shadow, look here.

{
-webkit-box-shadow: 2px 2px 4px #000;
-moz-box-shadow: 2px 2px 4px #000
}

{
-webkit-box-shadow: 6px 6px 6px #444;
-moz-box-shadow: 6px 6px 6px #444
}

{
-webkit-box-shadow: 4px 4px 6px #F6C;
-moz-box-shadow:4px 4px 6px #F6C
}

{
-webkit-box-shadow: 6px 6px 10px #000;
-moz-box-shadow: 6px 6px 10px #000;
-webkit-border-radius:12px;
-moz-border-radius:12px;
border:15px solid #F90
}

{
-webkit-box-shadow: 6px 6px 10px #990;
-webkit-border-radius:12px;
-moz-box-shadow: 6px 6px 10px #990;
-moz-border-radius:12px;
border:12px solid #000
}

{
-webkit-box-shadow: 0px 0px 20px #6F0;
-moz-box-shadow: 0px 0px 20px #6F0
}

{
-webkit-box-shadow: 0px 0px 30px #000;
-moz-box-shadow: 0px 0px 30px #000
}

Remember the old days when the only way to create a shadow on text was to make it an image? That’s good for search engines..right? Oh sure, just use some image replacement and then the search engines can read it. Not so easy for text edits in the future. Or for changing the color of the text or the background behind the text.

Fastforward to CSS3. Now we can define a shadow behind live text on a website. Wiggity whaaat? That’s right, simply with some good old CSS. Of course you’ll need to use a real browser, as of any other cool CSS technique, but I won’t even begin to go into that topic. So why is this so great?

• Search engines can read the text
• Easily change the color of the text
• Easily change the color, size, or blur of the shadow
• Easily change the background color or image behind the text
• Your friends will be like totally impressed

An example of this is the title to every article on this lil website of mine. Do you see the shadow behind the title “Using Text-Shadow with CSS3“? If you don’t for the love of god.. DOWNLOAD FIREFOX! Check out the demo for some more examples of text-shadow created with CSS3, and then continue reading to learn how to write the CSS.

View Demo

The CSS to create the text-shadow is pretty simple. It’s written like this:

{text-shadow: 2px 2px 4px #000}

The first number is how far right of the text the shadow should go, the second is how far below the text, and the final number is the amount of blur to apply to the shadow. Then of course the color of the shadow is declared.

You can see below the examples from the demo page, and below them are the CSS styles that create each effect.

In this next example you can see how you can create a beveled look by using a shadow that goes zero pixels to either side, but goes 1 pixel straight up above the text.

So there it is, creating text-shadows with CSS3. You might also want to check out a recent article where I show how to use border-radius with CSS3; (which is how the rounded corners on these divs above were created).

Ya.. I said “Web 2.0“.. what?

Well if you’re still here after that, here’s the deal. I was reading an interesting tutorial about creating a button similar to the one found on the Campaign Monitor website. I actually went ahead and created the button, I always love seeing the approach other designers take at creating things in Photoshop.

Well after I created it I figured I may as well put the PSD file up here for anyone that wants to use it. I’ll give the CSS code to add it to your website as a CSS sprite also. Now I need to give credit where credit is due. The CSS code, and the tutorial of how to make the button are from Jacob Gube over at Six Revisions. Check out that link if you want the step by step of how to make this button.

I’m really putting it up here so I’ll have easy access to the PSD file in the future so I can download it no-matter where I am, make a few color adjustments, copy the CSS code, and have a new button for whatever I’m working on that day. Check out the demo to see the button in action, and feel free to download the PSD file of my version of the button. Keep reading for the CSS code.

View Demo

Download PSD File

Below is the CSS code for your button and the rollover effect.

Below is the XHTML code to put the button on your page.

Here’s another interesting thing you can do with your CSS to style your website. We’ve all selected text from a webpage with our cursor before right? But most likely you never put any thought into what the default background color of the text was when you were selecting it. That is unless the website has a blue background and you can’t see what you’re selecting because the default background color of text on selection is blue, causing it to blend in.

Lets get right to the example I set up so you can see what I’m talking about. Not only can you control the background color of the text when you select it with your cursor, but you can also change the color of the text itself on select.

View Demo

So I’m not even going to get into the whole “This only works in this browser, this version, blah blah”. I assume anyone using this website knows the ins and outs of browsers and uses a real browser. That being said, here is the code I used to change the colors on the demo page.

So that’s all there is to it. One of those things that might not make or break a website, but is a nice touch to make your site even more custom, or perhaps even more user friendly.

Using an unordered list is a simple and easy to style method of creating a navigation bar. Now with CSS3 and round corners created by the browser, it’s even easier to make a nice and clean nav. I introduced CSS3’s border-radius in a previous post, located here.

Check out the example I created, and then keep reading to find out how to create the above nav with nothing more than some CSS.

View Demo

First create your unordered list in your XHTML.

The first thing to do with your CSS is to make your unordered list display on the same line, and with no bullet points.

The next step is to style the links. We’ll add some padding around the links to space them out, and to give the background color the width and height we want. On the hover state of the links I made the border appear as you roll over the link.

You’ll see I made an “active” state for the current page you are on. I set the cursor for the active state to be the “default” cursor. This is so when you roll over the link of the current page you are on the pointer cursor will turn into the arrow, giving the illusion that it isn’t a link (even though it really is).

So there it is, with this basic foundation and your imagination you can make a variety of looks for your navigation. Enjoy!

Recently released was a book by Dan Cederholm called Web Standards Solutions, The Markup and Style Handbook. This is the follow-up to an earlier version of the book. This brings up two questions.

1. Do you need this book if you have neither version?
2. If you do have the first version is it worth purchasing the new version?

Keep reading to find out.

I purchased the second version of the book because the first version was a great book full of some useful techniques for any webdesigner that cares about good CSS and XHTML. After flipping through the new book, it looked an awful lot like the original, so I dug in deeper.

The book covers some things that are important to writing semantic XHTML. Such as using unordered lists to create a navigation.

I use unordered lists for all my navigations, as a lot of webdesigners do. You can take off the bullets, make it inline, add background images, rollovers, etc. Good stuff. Pretty basic IMO, but if you don’t know these techniques, this book covers it in depth.

Styling tables is covered. Yes, tables are horrible, but for tabular data they are still acceptable to use. And if styled nicely, they can be visually appealing. You can have the <tr> turn a different shade or color on rollover, which makes it easier to keep track of where you are reading on the page.

One of my favorite techniques Dan goes over is styling a blockquote. He has a technique that gives a rounded box with a large quote image in the background; one for the opening quote, and one for the closing quote. The tricky part here is making it expand, so no matter how long your quote is the box will stretch and the closing quote will be on the bottom right. Worth a bookmark for sure.

Next up is styling forms. I actually learned a lot of what I know about styling forms from the first version of this book. Styling the <fieldset> gives a nice clean look to the form. Best yet, you get to write hacks for IE!

Next up in the book is one of the topics new to this version 2 of the book. Microfomats! Now you may not know what these are, a lot of people probably don’t. I read about these a while back, and still haven’t used them. It makes sense though, and will hopefully catch on and be used in the future, so it’s great that Dan covered it here. Here is an example of what Microformats are. Say you have a website with a contact page. You can add what’s called a hCard to the page. This hCard contains all your contact information, allowing users to click on it and add it to their computers address book. Other software and web applications can scrape your website and extract this information from the hCard. The same goes for events, dates, etc. Microformats only make sense, so I’m sure in the future they will be huge.

Next up is styling <dl> and <dt> lists. This is something I personally need to use more often, I always use the unordered lists, when sometimes these other two options would be the better choice. Bookmarked!

There is a nice technique for a CSS style switcher. I actually just showed a way of adding a style switcher that works by itself, depending on the hour of the day. That post is right here. This is a manual technique. I’ve used this technique in the past, and will cover it in a post in the near future.

Other topics include image replacement, using reset styles for your CSS, and CSS Sprites. Using print styles is covered, another topic I need to come back to as I don’t take advantage of these enough.

So to wrap up my review of this book I must answer the questions I asked. Do you need this book if you don’t have either? Yes, go and buy it immediately. I don’t care if you’re an expert or a beginner. If you’re a beginner you need to learn the basics covered in this book, and then move on to the more advanced topics also covered. If you’re an expert than you already know who Dan Cederholm is, and that’s reason enough to buy the book.

What if you already have the first book.. is there enough new content in this book to rationalize buying the new version? Nope. You’re going to find yourself flipping through the pages looking for the new content. If you’re like me, you have a stack of books you’re trying to get through so having duplicate content is useless. The good news is you can give Dan your money in another way! May I recommend his new book, Handcrafted CSS. A great read, which I will review soon.

So there you have it, I hope I helped some people with their decision making.

-ilz

On my portfolio website I have an About page, where I explain… who I am of course! So I have a picture of myself in the sidebar, but got the idea that it’d be nice to have the picture change randomly on page load. I looked around at a few different options. Some were Javascript, some were PHP. It wasn’t worth turning the page into a PHP page just for this effect, so I went with Javascript. There are a lot of different options, but here’s the one I went with.

I made a div to surround the image, with the class of “me-box”. I gave this div a border, so the images will all appear to have a border when they are loaded. Next comes the Javascript code. This is where you give the src to your images. This code is put right in the body of your page where you want the images to appear, not in he head tag. A quick little piece of code that got the job done exactly like I wanted!

See the random image loading in action.