CSS Dropshadows without Images

Today, I bring you a nice tip regarding one of the web's most common (but effective) effects: dropshadows.

Most of the time, this effect is achieved by using helper images and shadow files, but thanks to CSS, it is now possible to create all these variations in pure CSS without any imeges.

CSS3 Generator

If you want to start using CSS3 but have no idea where to start, this CSS3 generator might be the ideal starting point.

You just need to select whatever you're interested in, from font selection to round corners, to transitions and gradients, or anything else - and immediately see the results, together with CSS code you can simply paste to your own web site. Mastering CSS3 has never been easier.

Stylebot for Chrome

If you ever wished you could change the way web sites look in your Chrome browser, Stylebot is the extension you've been looking for.

Besides allowing you to easily play around and develop your site's look, it can also change the CSS for any other site - and it remembers the changes you've made, so it looks exactly like you want it next time you visit the same site.

A video is worth a 1000 words, so... watch the following Stylebot.me demo.

Butns - Easy Multi-site Linking

Ever had the need to link to multiple sites from a single link?

Than, how about doing something like this: automobiles (hover the mouse pointer over the link.)

It might look complicated, but it's actually quite easy to achieve using Butns.
Just enter the text, select its styling, select which sites to include, and you get a snippit of HTML code you can insert into any webpage. It's just that easy.

Template Editor in Blogger

Remember the new template designer in blogger?

Now you can watch how it works in the following video - and I can assure you will never want to go back to any other template designer/editor. :)

Blogger gets Template Designer

Looks like Google is finally taking its Blogger blogging platform seriously.

After years without any relevant updates, and some major flaws that were slowly addressed and fixed, Blogger gets - out of the blue - one feature that may very well turn it into an instant favorites for most blogger: an easy-to-use interactive blog template designer!

Editing a blog template was never an easy thing to do, with most bloggers simply opting to choose a pre-made template and forget about it.
Though, it's just a matter of time until they realize they would probably like one extra column or sidebar, or simply changing the colors of some elements - tough they lack the skills to do it, and therefore keep delaying it for as long as possible.

With this template designer Blogger takes the lead in easy customization of any template. Even a new found blogger will be able to click through all the available options and adjust the template to his/her liking.

Thanks Google and Blogger team! That this might be but the first of a long series of improvements that will make Blogger even better in the coming months.

CSS Polaroid Effect on Photos

When you first visit a web page like this one you'll be tempted to believe it's a Flash page.

There's animation when you move the mouse over the photos, with dynamic shadows and rotation, etc. But, if you look closer, you'll see it's all being done with nothing but plain old HTML and (not so plain and old) CSS.
Of course, you better be using a decent browser, as some don't properly recognize all these advanced techniques. ;)

If you want to dig a bit deeper and find out to do these CSS transition animations or just add the always cool polaroid effect to your pictures, just jump into this CSS transition tutorial and play a bit with it.

Google Browser Size

Here's one more tool every web designer will want to keep in his bookmark collection: Google's Browser Size.

This web tools allows you to quickly figure out which parts of your site are immediately visible to your visitors, and which parts require scrolliing. Best of all, there's no download involved: it's all web based. :)

Homer Simpson CSS

Don't doubt the power of CSS.

Here's Homer Simpson made entirely of text and CSS.

Click the image to see it in motion.

For Linux users:

PS: if this doesn't look right for you, it may be that you are on Linux and don't have the Verdana font. You can install it from the msttcorefonts package.

You can see this and many other great CSS examples in sixrevisions.

Transparent Menus:

A sticky footer.

And lots other great examples...

CSS Text Wrapper

How many hours have you lost designing text wrapping CSS styles to follow "weird" shapes?

Well, you'll be pleased to know that you can now do it in a much faster and easier way, using the CSS Text Wrapper.



All you have to do is draw your shapes online, and see the results instantly in real-time.

I just wish I knew about it sooner, it would have saved me a lot of time in some projects!