WebDesign&Such

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

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

Using page anchors is a pretty basic web design technique. If you want to link to a certain part of a page you create an “Anchor” at that part of the page. This anchor is what you point your link at. You can link to an anchor on the current page, or to an anchor on a certain part of another page. Useful, but not all that exciting.

There is, however a quick way to make even the simple act of scrolling up and down a page more visually appealing. It’s called Smooth Scroll. Check out my demo to see this in action, and then keep reading to learn how to add Smooth Scroll to your website.

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