Enter the simple elements that use nothing but HTML and CSS, and maybe some images.

What I want to demonstrate is a simple way to get a hover effect on an image, without using jquery or javascript. The way this works, basically, is the image will be the background of a div element that will reside inside a link. Actually the div does not have to be inside a link, but it does if you want the image to link to some other url. The background image actually contains two copies of your image, with the second copy having whatever hover effect you want, such as slightly darker or whatever. In the CSS code, you have the background image positioned at the top of the div, and in a hover of the same div, you have the background image positioned at the bottom. When you hover, voila! And unlike the javascript version of hover, you don’t have to wait a split second for the hover to work, since the image is already loaded!

To the rightyou can see a screenshot of the effect I’m going to show you. On the same screenshot you can also see a green button. I used the same effect on that. The button is part of a jquery slider, so it’s not like I never use jquery :)

I’m going to be using the coffee cup that’s available here. Actually I recommend this set of twitter icons, they are probably the coolest you can find.

First, I open Fireworks and find the coffee cup image I downloaded. Then I resize it to the size I need for the footer of my website. For me that’s 96px wide and 71px high. Then, I copy the image and paste it over itself. Next, move the second copy so that the top of the second copy just touches the bottom of the first copy. Then “Fit Canvas” so that the two images are now visible. Next, I select the bottom image and modify the color by reducing the saturation to nothing. This makes it greyscale. See the screenshot to the right.

Then save the image and optimize it. I save it as a transparent .PNG file, but you can also save it as a .jpg if you don’t need transparency. I personally use PNG Gauntlet to optimize the .PNG.

Then I load it into the image folder on my website, and put the following code in the CSS file:


.twitter {
float: right;
width: 96px;
height: 71px;
background: url('images/social/twitter-cup.png') no-repeat bottom;
margin: 17px 44px 4px 0;
}
.twitter:hover {
background: url('images/social/twitter-cup.png') no-repeat top;
}

My div has a class ‘twitter’. Then simply put the div in your website where you want it to appear. Just call it the same class and it will work like a charm. You can also wrap it with a link if you want it to be hyperlinked.

And that’s it! The simplest (I believe) way to have cool hover effects on your website, that works instantly since the image is already preloaded when the page loads.

See the footer of my web design site for a sample: See The Coffee Cup Here

If you implement this little trick, please let me know by commenting here or tweeting it!

When I decided to pursue web design full time a few months ago, I decided that to be the best, I needed to learn from the best. The hard part was – where are “the best”? How do I find them? And how can I learn from them?

Through trial and error I’ve come up with an effective strategy for making a name for myself among other designers in the “community.” These are what have worked for me – you’ll want to experiment and try different things out to determine what works for you.

Not a big writer? Maybe a blog isn’t up your alley. Like to teach others? Try creating some tutorials. The key is to put yourself out there.

So here are my recommendations for getting connected with other designers.

1. Get involved on Twitter.

Okay, so what’s the big deal with Twitter? I had no idea three months ago – I heard it all over the news but hadn’t experienced it. Good thing for us designers is that most other designers, like us, are sitting at their computers all day. So Twitter works really well as a means to get connected. Here’s what I did to launch myself into the Twittersphere.

Follow other noted designers on Twitter.

I read their profiles and visit their sites. Follow those that practice in the area you do. You can find many different lists of designers to follow out there, so start with one and go from there.

Don’t set your account to “auto-follow.”

This is just my personal preference, but I only want quality content to come through my feed. So I screen people who follow me before I follow them. This strategy is also used by some of the most popular people on Twitter. It helps me better follow the conversations and dialogue that I want to engage in on Twitter – instead of just generating an RSS feed of resources (although that is a great bonus!).

Learn other tips from the experts.

Since I won’t pretend to know the best Twitter techniques, I suggest you read this post by Grace Smith on Using Twitter for Inspiration.

2. Do your research.

To effectively engage with other designers, you need to know how to design. Knowledge about the medium, the tools and the jargon of the trade all enhance your ability to really get the most out of interactions with other designers.

• If you are coming from print design like me, I suggest you read up on the principles of web design – they are vastly different!

• Keep track of good resources and references. I prefer Delicious so that I can access my links from anywhere, but other bookmarking services would work just the same.

• Share good content with others so they can benefit as well. I do this most often via Twitter (see the circle beginning to form?).

• Take the time to find and complete tutorials that are outside your comfort zone. Many times just reading through a tutorial can give you tips that will make your next design pop. I recommend two different sites on development tutorials and design tutorials, but there are many others out there.

3. Put yourself out there.

So you’ve been slowly getting into the Twitter world and have done a bit of research and feel like you’re getting your feet under you. Now it’s time start building your reputation among other designers.

• If you feel up to it or need a place to release your wisdom with more than 140 characters, start your own site/blog. Not only is this necessary to gain clients, but it also creates link for folks to associate with you – this is the start of your “brand.”

• Once you’ve populated your blog/site with some interesting stuff, list it on some design directories and Twitter directories.

• Engage other designers in relevant dialogue. Ask for advice on client questions, seek collaboration on projects and provide your own feedback to others’ inquiries.

• If possible, attend conferences or other face-to-face meetings with designers in your area. As great as technology is, it can’t replace a good ol’ cup of coffee and creative personal discussion. Danny Outlaw has a great list of conferences on his Outlaw Design blog, and MeetUp is a great resource to connect with other local professionals.

Well I don’t really care what anyone says about it, the fact is, you can easily find clients using Twitter, and a freelance web design business is a perfect fit for this.

Here’s how you can do it: Search for words you consider a good fit for someone who is looking for web design. For example, two searches I like are “get website” and “need website”. If someone is saying on Twitter “I need a website”, you will find it.

Then all you do is follow that person, and send them an @reply saying you can help them with whatever it is they are asking, and if they want to talk more, just DM or @reply back.

I’ve been amazed how easy it is, and how few people are doing this to find freelance clients.

Most people ARE doing something like this: “Hey I’m a web designer if you want a website go here …”. They are doing this as an update on their own profile. So the only people to see it have to follow them first.

NOT going to work.

Find the people who are saying they need help, follow them and offer your help. You’ll be amazed at the results you get from Twitter since it’s still fairly new and trust runs pretty high among followers on Twitter.

There, I just shared with you something I really didn’t want to tell anyone, but I told you because you are a subscriber :)

Only thing is they say that you can only use it 3 times free when you have more than 1800 followers. Well I have over 14,000 and i’m still using it free …

so use it FREE while you can!

http://huitter.com/mutuality/