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

Here’s a quick way to further enhance the branding of your website. If you don’t have an iPhone go get one. Then try bookmarking your website; (go to a website in your iPhone Safari browser, hit the + symbol, and hit “Add Bookmark“). What this does is take a small screenshot of the webpage and add it to your iPhone, right net to the other icons you have.

Well forget that, now we can make custom icons, so when somebody bookmarks your website, the icon is one that you actually created! As a designer I might be a little bit TOO excited about this, but hey, this is the stuff I live for. You can see in the above image the two icons I’ve created for my websites, WebDesignAndSuch and BeantownDesign. So now the icons match the favicons of my websites, and I can just touch them to launch my websites on my iPhone.

Keep reading to see how to create your own iPhone icons.
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

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

Lots of people use Twitter. Love it or hate it, it’s true. I follow other people in the design industry to see what they’re up to. I use my Twitter page to post updates on things in my life, mostly design related.

One of the great things about Twitter is that you rarely ever go to the actual site. You can use a program like Tweetie or TweetDeck to send all your Tweets. Another great thing is the ability to embed your recent Tweets onto other websites. It’s a rather simple process, so check out my demo and then keep reading to learn how you can embed your Tweets on your page.

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

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

So you know what a favicon is..right? At least pretend you know what it is.. it’s the little picture that shows up in your browser bar right next to the domain name of the website you’re on. In this example you can see how the WebDesign&Such favicon appears in the browser bar and in the Firefox tab. You can also see the Smashing Magazine favicon (free shout for those guys).

If you need to know how to add a regular favicon to your post or Wordpress blog, I covered this in a previous post. Check it out here, there is also a link to the Photoshop plugin that you need to create the ico file.

The topic I’m going to cover today is slightly different however, I’m going to show you how to make an animated favicon.. niiiice! Here’s an example of an animated favicon, this is the favicon I used on a previous version of BeantownDesign.com

Continue reading

If you’ve designed websites before you know what a pain making rounded corners on a box can be. You can make an image of a box with rounded corners in Photoshop and use it as a background-image on a div. The problem with this is that the content can’t ever become wider or longer, or it would be outside the box.

You can make separate images for the top rounded corners, the middle content section, and the bottom rounded corners. With this method you make the middle background image repeat on the y-axis as the content grows longer, which forces the box to grow and the bottom rounded corners to expand.

That’s a much better option, but still takes some time to create the images and set up the box. And of course if you want to change the color of the box or border you need to create new images.

And then there was CSS3. One of the most exciting things of the new CSS3 spec is “border-radius”. What this means is that you can define the radius of any of the corners of a box, creating rounded corners. This is of course the ultimate, since the colors of the box and borders can be changed; and the box can grow wider and longer as content is expanded or enlarged. As with the other CSS3 features, all browsers don’t support this yet. So at this time it’s best to use it in situations where it helps visually, but doesn’t destroy the design if it doesn’t work in a browser. For example, check out the top of my twitter page in Internet Explorer (which doesn’t support border-radius), and Firefox (which does).

Continue reading

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.

Continue reading

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.

Continue reading

Here’s an interesting way to add a CSS stylesheet switcher to your website. I’ve used stylesheet switchers in the past, but this one is different. In the past I had a button to press, which in turn switched the stylesheet of the page. This one switches the sheet at a certain time of day, which I think is pretty cool. My website uses clouds in the header, so it was just begging for me to make a “night” version of the header which would automatically switch on at night.

Continue reading