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!

A Centralized, Mashed up Commenting System

First of, before you’re able to download the plugin – you are asked to create a Disqus account. I figured, an account may merely be for marketing purposes, but right after creating one – you are presented with a API key. Now something tells me that this system is something more – I was right. Disqus is able to provide the system to any type of blogging platform you are using: Typepad, Movable Type, Blogger and Wordpress. Note that there is also “Generic” which I assume is for static websites. Now remember I said what I was expecting to see check boxes for Facebook and Twitter? Well that’s what I got. Plus options that span from the ability to display Social Media Reactions (replies or social media services like Twitter, FriendFeed, Digg and YouTube), Trackbacks (we all know what this is), Seesmic video comments, OpenID and of course – Facebook connect and Twitter. Now as if that’s not “mashed-up” enough – there is also an option to add a Disqus Feedflare to your Feedburner. A FeedFlare places a simple footer at the bottom of each content item, helping you to distribute, inform and create a community around your content.

Where Are the Actual Comments Stored?

Now the funny thing is once you’ve installed Disqus in your Wordpress blog – it takes over your commenting system. Try clicking “Comments” from your Wordpress admin panel and it will take you to the Disqus settings screen (which is just an iframe of your Disqus account). From this interface gives you total control of your blog comments such as importing existing ones to Disqus, moderation, as well as adding widgets and changing the look of the form. Did I say “Import existing ones“? Yes I totally did. As it turns out, once you have Disqus installed – it uses it’s own database to store your comments in their system. A system that still ties with your website and post id. Now don’t fret! Your wp_comments table (where your comments are stored in Wordpress) remains untouched. Furthermore, it is updated at the same time new comments are entered, with the Disqus system.

There has to be a Kicker

Okay, with Disqus you can mash up world renowned applications with your comments. You can add widgets, change the appearance, move things around in your comments section with a few simple clicks. You can manage your comments in both places: your website control panel and your online Disqus account (since the comments are literally stored in two databases). All of this are wonderful features but there has to be a kicker. A “kicker” as in a feature so significant, that blog owners will actually deviate from their regular commenting system and use Disqus instead.

Well let’s think about it for a moment:

For starters, now you can moderate comments centrally in one place. Really, I’m sure many of us run more than one blog. For the lucky ones that are bombarded with hundreds of comments daily, this is definitely a kicker. Another one is the ability to add moderators. That’s correct, with Disqus – you now can add comment moderators (similar to a forum) without giving them access to your physical blog. This is a big plus for sites with a large enough community. What about the ability to “Reblog“. Reblogging is exactly like “Retweeting” – but it’s a post instead of a tweet. How about having a “Lifestream” type of your blog posts in the Disqus website. Once you join Disqus – you automatically get a community page (http://yourwebsitename.disqus.com) that displays quick feeds of your latest posts – that link directly to your website.

Win-Win, Lose-Lose or Win-Lose?

I’m sure there are other “kickers” for the Disqus system that I haven’t discovered yet. Consider that I’ve only been using it for a mere five hours! But there could also be downfalls. For instance, I now don’t have any code control of my comments section. Once Disqus is installed – the comments.php in your Wordpress theme is completely overridden. Another point to ponder: since your data is now in two places – isn’t it kind of scary? By this I mean, back ups, redundancy, duplicate data, “what if disqus.com is down – what will happen?” – am I just paranoid?

Overall, I think the Disqus Comments system is a sophisticated platform that is sure to enhance your blogs discussion abilities. It is simple enough to use, safe, and at the same time – provides enough bells, whistles and “kickers” that blog owners will sure go for. I know when I see “Comment with Facebook Connect” – it makes me want to leave a comment more; therefore, it works for your readers as well.

What about you? What’s your take on a third party comment system such as Disqus?

FileZilla is the program I’ve used for years, and I RELY on it. It’s pretty comprehensive, works on Mac or Windows, and it’s FREE!

Learn more or download it here:

http://filezilla-project.org/

1. Favicon Generator – some clients ask you to create a favicon, you know, that little icon that shows up in the address bar in the browser and in the bookmarks list.

What I do is first take a letter or two from their site title or logo, and put it into a .png file that is square. I use colors that match the site, and I try to be careful not to be tempted to use every last bit of space. I usually create a file about 100 x 100 pixels for easy working.

Then, all I do is go to the favicon generator that DynamicDrive.com has available and I generate a favicon from the .png file I created.

They also remind you of the code you need to include in the tag on the website.

Very handy, very simple, and I always use it.

Remember, the favicon might take a day to start showing up in the browser. Delete the browser cache to speed it up for yourself.

2. Forms WordPress plugin – Called Contact Form 7, this is the best way to generate contact forms, surveys, or whatever you can think of, to capture visitor information. I know, you can use a contact capture tool like iContact or Aweber. But if you don’t want to tell your client to spend money every month, Contact Form 7 is very robust and flexible.

First you download the plugin here, and install it on the website. Then, you use the link on the WordPress settings sidebar to create a form.

You use the same fields you created in the form to define the information you want to receive in the email, and every time someone fills out the form, an email is generated to the address you specify, so you can collect all the info.

Again, a simple solution, and once you get used to it, you use it a lot for your clients, and you love it.

Just do a search on their website or just browse the articles for really good insight and tips on making your design a lot better.

Here are a couple of my favorite articles:

‘Clever PNG Optimization Techniques’
http://www.smashingmagazine.com/2009/07/15/clever-png-optimization-techniques/

‘60 Brilliant Typefaces For Corporate Design’
http://www.smashingmagazine.com/2008/03/20/60-brilliant-typefaces-for-corporate-design/

‘35 CSS-Lifesavers For Efficient Web Design’
http://www.smashingmagazine.com/2009/06/25/35-css-lifesavers-for-efficient-web-design/

The calendar tool works extremely well, and has some syncing programs that you can use to keep it synced up with Outlook, an exchange server, Mac calendar, lots of different ones.

I use both a blackberry and an iphone, for different uses, and I keep everything synced up between them and with my computer, using Google Calendar.

If you haven’t tried it, this might just be your time!

Learn more about Google calendar here:

Google Calendar

I’m a believer :)

Get the plugin free here:

http://ideasilo.wordpress.com/2007/04/30/contact-form-7/

If you haven’t seen the really cool coverflow effect on Apple’s website, or actually even on an iPhone in the iPod or other apps that use it, you’re missing it!

Why display things in static ways when you can do it with loads of style?

Maurice shares with us the effect and the explanation of how it works, as well as the code. Enjoy!

Get The Full Tutorial Here

Check out this huge list of tutorials that can help you with every imaginable aspect of using Illustrator. Just dedicate yourself an hour or two a week, and in a year you will have mastered many different of the tools available.

Enjoy it!

Collection of Illustrator Tutorials

This hosting company is the BEST there is. Hands down …

And for a limited time, when you sign up with a reseller account, I’ll give you a FREE copy of the MotherTheme developer license. That means you get an awesome WordPress theme you can use on all your client websites (like I do) and a great place to host them all.

CONDITION: Just go get your hosting package now and once you purchase, just send a copy of your receipt to 6webdesign (at) gmail (dot) com. I’ll reply and send you a link where you can download MotherTheme FREE! (currently sells for $59).

Don’t miss out, this special ends before the weekend begins … so do it now!