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

Here is the code to put in your external CSS sheet to select the first paragraph in a section (in this example a div called “content”). In this example I remove the top margin. If the coder in my example above had done this he wouldn’t have need to add any class to the paragraph tags in the XHTML. Don’t ya just love CSS?

Websites need to have the copyrights on them. Usually this is found in the footer of the site. As I was updating a client’s site the other day I noticed his copyright info was still 2009; so I updated it in the template, applied it to the pages, and re-uploaded everything to the live site.

One of the worst things you can do with your website is to not make updates once it’s live. Fresh content is the only thing that will keep your users AND search engines returning. One of the best ways to let users know that you never update your website (saaarcasm), is to have a copyright in the footer of your website from 2003. It really is a pain to have to go in at the first of every year to update all of your client’s websites though. Luckily, Javascript can save us. Using Javascript we can add a copyright to the webpage that will automatically update with the current year. Check out the demo, and then keep reading to grab the code.

View Demo

All you need to do is paste the following code right into the XHTML where you want the copyright to show up, Javascript does the rest!

Happy Birthday to me!

A year ago on January 3rd 2009 WebDesignAndSuch.com was launched. I had a variety of reasons for creating this website. One of the main reasons was to give WordPress a try. There is obviously no better way of learning a new technology than actually using it, so here we are.

Another main reason was the content. As a designer I constantly have topics that I want to write about. One thing I love about the design community is how open everyone is with sharing their knowledge with each other. This helps us all grow as designers and developers; and in turn helps the web grow. I’ve learned a lot from a ton of people over the years, and I’m happy to do what I can to share my knowledge.

CSS has to be one of my favorite things about being a web designer; I’m sort of obsessed. My goals for the next year are to step up my jQuery and Wordpress skills. I also hope to start adding some video tutorials to the site. WebDesignAndSuch will be undergoing a lot of design changes over the next year.. stay tuned!

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

If you check out the source code of the html file, you’ll see the following in the body. The “blanket” is the effect of putting the transparent black background behind the popup, which helps separate it from the rest of the content on the page. The “popUpDiv” is where you put the content of your popup.

If you want the popup to load on page load, put the following in your body tag.

Here is the CSS used to style the blanket effect and the popup div. You’ll see I turned the blanket effect off for Internet Explorer, since it doesn’t appear to support “opacity” (big surprise).

There is a Javacript file linked to the html file to make some of the magic happen. I’m going to make the demo files available so you can play with it and make your own. Enjoy!

Download Files

One last thing.. the original code for this was found here. I made some edits to make it work for my application.

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.

So the process is actually ridiculously easy. First, create your icon at the size of 57×57 pixels. Don’t create any gloss or rounded edges, the iPhone actually creates both of those for you. You can see in the image below what one of my icons looked like before it was added to the iPhone.

Next, save your icon as a .png in your website’s images folder. Then you need to link your website to the icon so the iPhone can do it’s magic when someone hits “Add Bookmark” on their phone.

Glossy Icon

This first code is if you want the gloss to appear over your icon. Put this in the head of your website, and of course make sure you set the path to your icon.

Non-Glossy Icon

If you don’t want the gloss for whatever reason you can use this code.

There you go, have fun! If you want to test this out, pop open WebDesignAndSuch on your iPhone in Safari, and hit “Add Bookmark“!

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

Form 1

input, textarea {
background-color:#eee;
border:1px solid #d8f000;
padding:3px;
width:195px;
color:#036;
font-weight:bold}

input {
-webkit-border-radius:10px;
-moz-border-radius:10px;
}

.submit {
width:100px;
background-color:#d8f000;
border:1px solid #fff;
cursor:pointer;
*border:1px;
font-weight:bold;
-webkit-border-radius:10px;
-moz-border-radius:10px;
color:#036;
font-weight:bold
}

.submit:hover {background-color:#ffc;}

You’ll see in the above form how I used Border-Radius on the buttons and the inputs. This gives a nice effect, but doesn’t break the design if the user of the website is on a non-compliant browser. You’ll see when I styled the buttons I made a class called “submit“. So in the XHTML code, both the Submit button and the Reset button have the class “submit”. You can see how rollovers can be made for the buttons. I also set the cursor type to “Pointer” for the buttons, since for some reason it’s the arrow cursor by default.

Form 2

input, textarea {
background-color:#fff;
border:1px dotted #999;
width:200px;
padding:2px;
font-weight:bold
}

input:focus, textarea:focus {background:#eee}

.submit {
width:100px;
background-color:#263895;
color:#fff;
border:1px solid #999;
cursor:pointer;
*border:1px;
font-weight:bold;
padding:2px
}

.submit:hover {background-color:#4054bd;}

With this form I wanted to show how you don’t need to use crazy loud colors to style a form to look better. The style is pretty plain on this form, but the dotted borders give the inputs a touch of character. You can also see the use of “:focus” on the inputs and textarea. What this does is change the background color of the input when your cursor is inside of it. This helps your users keep track of where they are on the form.

Form 3

input, textarea {
background:url(back.jpg) repeat-x #93e1ff;
border:1px solid #848383;
width:191px; padding:5px;
color:#006;
font-weight:bold;
-webkit-border-radius:5px;
-moz-border-radius:5px
}

input:focus, textarea:focus {background:url(backRoll.jpg) repeat-x #86cee9;}

.submit {
width:100px;
background-color:#93e1ff;
border:1px solid #848383;
cursor:pointer;
*border:1px;
color:#006;
font-weight:bold;
-webkit-border-radius:5px;
-moz-border-radius:5px
}

.submit:hover {background:url(backRoll.jpg) repeat-x #86cee9;
color:#006; font-weight:bold}

With this final form you can see how background images can be used inside the inputs and buttons. I made a slightly darker version of the background image for the “:focus” state.

With these basic CSS techniques, you can see how simple it is to make a contact form much more visually appealing and match the rest of your website.

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.

Below are the different cursor types. The CSS property is written like this: cursor:crosshair Just change “crosshair” with whatever you want the users cursor to do on hover.

Roll your cursor over the examples below to see the different cursor types available.

cursor: auto

cursor: crosshair

cursor:default

cursor: help

cursor: pointer

cursor: wait

cursor: progress

cursor: text

cursor: vertical-text

cursor: alias

cursor: copy

cursor: move

cursor: no-drop

cursor: not-allowed

cursor: context-menu

cursor: cell

cursor: col-resize

cursor: row-resize

cursor: all-scroll

cursor: e-resize

cursor: n-resize

cursor: ne-resize

cursor: nw-resize

cursor: s-resize

cursor: se-resize

cursor: sw-resize

cursor: w-resize

cursor: ew-resize

cursor: ns-resize

cursor: nesw-resize

cursor: nwse-resize

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

The jQuery and CSS code to make this happen came from Chris over at CSS-Tricks. I slimmed down and edited it to make it work for me. Here is a zip of the files used for the demo so you can download and edit it as you want.

Download Files

You’ll see in the head of the index page the jQuery which makes it work. The line you need to change is the following:

First replace the part I highlighted in Blue “ilz_” with your Twitter user name.

Next, replace “count=5″ with the number of tweets you want to show up on your page.

Other than that, you should be able to style the rest of the text, links, etc. as long as you know basic CSS. Enjoy!

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

So the original code for this slider is jCarousel. I figured I would put up this demo to show how with a few modifications to the code you can create a useful product slider. You’ll notice how it’s created with an unordered list. I also showed how you can use rollover effects, and link each image to a webpage; which is obviously the point of the slider in the first place.

The slider has an autoplay feature. I added some code to the original jCarousel to make the slider go only one product at a time. This is in the head of the index.html file. The line “scroll: 1“. If you want it to scroll 2 items, change it to 2, and so on.

Now I admit the code here isn’t the prettiest, but as I mentioned this was created strictly for the demo, to show some of the possibilities. I’m going to provide all these files in a .zip file for download, in case you want to play around with the slider. Enjoy!

Download the Files

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

Below are the examples from the demo page, with the code below it which made the shadow. For each shadow, you need to declare the dimensions for -webkit-box-shadow: and -moz-box-shadow:, which takes care of any browser that supports the box-shadow at this point.

The three numbers are similar to using text-shadow with CSS3, the first number is how far right the shadow is from the “box”, the next number is how far below, and the final number is the amount of blur for the shadow. Finally, you declare the color of the shadow.

You’ll see on a couple of them I used the awesome border-radius to show how the shadow wraps around a rounded corner. If you need a refresher on the border-radius declarations, look here. If you want to check out some examples and code of text-shadow, look here.

{
-webkit-box-shadow: 2px 2px 4px #000;
-moz-box-shadow: 2px 2px 4px #000
}

{
-webkit-box-shadow: 6px 6px 6px #444;
-moz-box-shadow: 6px 6px 6px #444
}

{
-webkit-box-shadow: 4px 4px 6px #F6C;
-moz-box-shadow:4px 4px 6px #F6C
}

{
-webkit-box-shadow: 6px 6px 10px #000;
-moz-box-shadow: 6px 6px 10px #000;
-webkit-border-radius:12px;
-moz-border-radius:12px;
border:15px solid #F90
}

{
-webkit-box-shadow: 6px 6px 10px #990;
-webkit-border-radius:12px;
-moz-box-shadow: 6px 6px 10px #990;
-moz-border-radius:12px;
border:12px solid #000
}

{
-webkit-box-shadow: 0px 0px 20px #6F0;
-moz-box-shadow: 0px 0px 20px #6F0
}

{
-webkit-box-shadow: 0px 0px 30px #000;
-moz-box-shadow: 0px 0px 30px #000
}