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

Well that was a long title! Here’s the deal. I finished up a website for a client yesterday and was doing a last minute check in Internet Explorer to make sure there were no problems. Well that would be too easy, wouldn’t it?! Unless you’ve been under a rock the last few months you know about the Google Font API. They host fonts and give you the code to embed them onto your website. A great solution, and free, unlike Type Kit.

Well since it’s a Google product I figured it was obviously cross browser safe. So I was surprised (and not pleasantly) when I opened my clients site in Internet Explorer and saw that instead of the font Josefin Sans Std Light showing up, (I am using it for headings and navigation items on the website), the browser was showing Arial. WTF? Popped open Safari, no problem. Looked in Chrome, and again, Arial was showing! So I went to the source, the page right on the Google Font API website where you can preview the font. And after looking at that page in the browsers, I realized something important: The fonts in the Google Font API are NOT cross-browser compliant! Keep reading to see what I’m talking about (screenshots), and the solution I came up with to solve this problem. Continue reading

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

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

Continue reading

I create a couple of forms a week for client’s websites. Usually they’re very similar in content. First Name, Last Name, Address, Phone Number, Email, Comments, etc. Of course I like to use a little CSS to style these forms up to match the rest of the site. I find myself copying the same basic styles over from the last form I created, and then editing the background colors and borders of the inputs, buttons, etc. I decided it was time to put these base styles online so they would be easy to grab on any project. And of course hopefully this will help other designers realize how simple the process is, and why there should never be an un-styled form on a website.

Check out the demos to see how by changing a couple of CSS rules you can create a completely different looking form to match your website. Then continue reading to see how the CSS code works for this. When viewing the demo forms, try typing in the fields to see how the background color of the fields can be changed, as can the color of the text in the field. Also, try to roll your mouse over the buttons to see how they can have rollover effects put on them.

View Demo 1

View Demo 2

View Demo 3
Continue reading

Recently I was setting up CSS styles for a navigation. One thing I do a lot is change the cursor type with CSS for the link of the current page. So if you are on the About page and you roll over the About link, your cursor will be the default arrow, not the hand pointing the finger which indicates a link. Sure it’s still a link, but I feel this helps distinguish the page you are currently on a little bit further than just changing the color of the current page link.

As I was doing this styling I realized that there are actually quite a number of different cursor types that can be set with the CSS cursor property. Keep reading to see the examples and code for each.
Continue reading

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

Recently I was put in charge of creating a product slider for a client’s website. There would be four products shown at a time, with one new product being revealed each time as the slider moved from the right to the left. I figured there was a jQuery slider out there that I could manipulate for this, and after a little hunting I found one.

The actual slider and website I created it for isn’t live yet. I used the base slider I created and used a few Apple images to show the general idea in the demo. So check out the demo, and then keep reading to see the details.

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

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

Continue reading

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