WebDesign&Such

In a previous post I showed how to use CSS3 to add a background color to every other row in a table, a technique called “zebra striping”. While this is a great technique, it doesn’t work in browsers that don’t support certain CSS3 features, such as Internet Explorer. By using a little jQuery we can make sure that every other row will have the background color, regardless of what browser the website user is on. Check out the demo and then grab the code for your project.

View Demo
Continue reading

When you have a table on a website with a lot of rows it looks nice to add a background color to every other row. Just a subtle color change in every other row can help the human eye keep it’s place as it looks both across the row and down the page across the rows vertically. This technique is called “zebra striping”.

Sure you can add a CSS class to every other row manually, but what happens if you need to re-arrange or delete some rows? Having to go back and manually make sure every other row has a class so the zebra striping is on every other row is no longer a suitable solution. Luckily with the power of CSS3 this is no longer necessary. Check out the demo, and then grab the CSS code for your project.

View Demo
Continue reading

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
Continue reading

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

Continue reading

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
Continue reading