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.

Mobile Web Development

With the iPhone 4 and its retina display, web designers are now forced to think about high resolution content for their web pages and web apps - if they want it to look good!

For App developers, Apple has made it quite easy to transform an existing app into a high-resolution one - you just need to provide higher-resolution artwork, and the iOS handles the rest; but for the web... things aren't quite as simple: as you can find out in this post about creating high-resolution web content.


On a similar note, when dealing with mobile browsers, it's always nice to know cache limits for Android and iPhone browsers.

HTML5 e CSS3 Readiness

Curious about what browsers support what HTML5 and CSS3 features?

All you need to do is visit this useful html5readiness page.

In a single page, at a single glance, you can find which browsers support which features, allowing you to better plan for you site specifications and cross browser compatibility.

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.

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!

Pure, clean, HTML

It's always nice to see someone using HTML properly.

Having to work with (i.e. fix) other people web pages - many without end tags, and with double and triple body sections(!) I can relate to that!


Fortunately, you can always use HTML Tidy to sort things out without going crazy.