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.
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.
In a previous post I explained why it is important to keep an updated copyright in the footer of your website. You want your website to be up to date, but you don’t want to have to manually change the copyright date every year. In that example I gave you the code to use Javascript to output the year. Well in some cases it may make more sense to use PHP to output the copyright year instead, so that’s what I’ll do in this post. Check out the demo, and then grab the code for your website or WordPress blog.
You know you need a sick graffiti style desktop background image for your computer. Don’t worry, I got ya covered. Download any of these desktop backgrounds, created by yours truly. I’ve created them all for 3 common resolutions. If you want another specific size hit me up and I’ll hook you up.
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
A 404 error is what happens when you try to access a page on a website that doesn’t exist. We’ve all gotten them; due to typos, a moved file, whatever the case. As designers / developers we need to make sure we help the users of our websites should this happen to them. The last thing we want is for them to get an ugly 404 error, get discouraged, and exit your website.
Instead, you want to create a custom 404 webpage, and redirect the user to this page should the error happen to them. This is done by uploading a .htaccess page to the root of your website. Continue reading
Designing a realistic stainless steel background in Photoshop for use in print or web design is a rather painless process. In this tutorial I’ll show you how to make your own stainless steel effect in a few simple steps.
In Photoshop, create a new layer and name it Stainless. Select this layer and fill with a gray color. I used RGB #bebdbd Continue reading
Need a nice looking product slider for you website?
Introducing FancyMoves, a new jQuery Product slider for your website or blog. This slider is built off the Moving Boxes slider, with FancyBox for expanding images.
Slider features:
Images shrink as they leave the slider
Keyboard Navigation (use your keyboard arrows to move to the last / next product)
Click on images to navigate
CSS opacity for rollover effect on buttons
FancyBox built in for expanding images (left / right buttons on rollover for other image views)
If you’re going to use PHP on a website the server needs to be running PHP right? Well duuh! If you work on a variety of websites for a lot of clients, you’re going to deal with different hosts and servers. Before you hook up a form to PHP or whatever else you are planning on doing, you better make sure the server can run PHP if it isn’t.
The quickest way to test servers for PHP is to create a testing PHP file that you can upload to a clients website to see if PHP is running. The good thing about this is you can reuse it for every site. You simply upload this to the server, and try to open it in your web browser. If it works, you’ll see an html page with the info about the PHP running on the server. If it isn’t running PHP, well you won’t see anything!
Keep reading for the code to make your own. I also provide mine as a download to save you time.
I was making a product slider for a clients website; and was using the CSS-Tricks Moving Boxes slider. I chose this slider because it had an effect that most other jQuery sliders don’t have, the main image is larger than the images leaving or entering the screen.
The one problem I found with it was that there is no setting for autoplay, so the user always needs to manually press the arrow to navigate to the next photo. I wanted it to autoplay, so it starts to play as soon as you load the webpage. I found the code to make this work however, check out the demo to see the slider autoplay, and keep reading for the code / instructions.
Recently I was creating a contact form for a client’s website. Due to the fact that the form was in a rather small area, I didn’t have very much room for the text and inputs. See my solution below.
Usually I would write the name of the input followed by the input like this:
First Name:
Since I didn’t have room for that I had to come up with a solution.
I was coding a page the other day and needed to have a button that could refresh the webpage when pressed. Turns out jQuery can take care of this rather easily. Check out the demo below, and keep reading for the code.
Recent Comments