Creating tool tips with pure CSS and no images or JavaScript is nothing new. I’ve never personally written anything on the topic, but there are plenty of examples and tutorials to choose from.

For a recent project, I had to research the concept and find something that suited my needs. I didn’t spend too many hours researching but, from what I could see, most (if not all) solutions available were satisfactory for most cases, but had a few minor flaws.

So in this post I’ll address these minor weaknesses and present what I think might be a more bulletproof solution.

CodeKit automatically compiles Less, Sass, Stylus, CoffeeScript & Haml files. It effortlessly combines, minifies and error-checks Javascript. It supports Compass. It even optimizes jpeg & png images, auto-reloads your browser and lets you use the same files across many projects. And that's just the first paragraph.

Fonts have made the most dramatic visual impact on the web since graphic support was added to browsers. A few years ago, it would be impossible to find a website using anything other than Arial, Verdana, Tahoma, Times New Roman or Georgia (or, heaven forbid, Comic Sans).

While there’s nothing wrong with standard font stacks, they can become a little monotonous. Internet Explorer has supported web fonts for more than a decade but it’s taken competing browsers a little longer to catch up. Licensing is still an issue — you can’t use any commercial font — but you should be able to find one which permits web usage or is similar to your corporate style.

However, with great choice comes great responsibility. Fortunately, there are several online tools which can help you locate and use CSS3 fonts…

Skeleton is a small collection of CSS & JS files that can help you rapidly develop sites that look beautiful at any size, be it a 17" laptop screen or an iPhone.

A powerful Photoshop-like CSS gradient editor from ColorZilla.

Tumblr lets you fully customize the appearance of your blog by editing your theme's HTML code. This is only recommended for users comfortable hand-coding HTML. If you're not, there are hundreds of great themes to choose from in the Theme Garden!
Once you've created a theme you're proud of, submit it to the Theme Garden to share with everyone on Tumblr!

Your CSS goes here. The more, the better. Linting works best when we see the big picture, so give us everything you've got.

Progressive flexible mobile tablet sensible extensible accessible pragmatic functional useful production-ready more

ProCSSor is a powerful (and wholly free) CSS prettifier that lets you format CSS in the exact way you want. It empowers you to turn your CSS into something that is visually more compelling, and with a minimum of effort at that.

CSS3 backgrounds, rounded corners, box shadows, text shadows, opacity and transformations save web developers hours of time. Basic effects can be achieved without resorting to image slicing, additional elements or scripting.

Despite this, not all is rosy in the CSS3 world. When I first dabbled with the techniques a couple of years ago, I was shocked by the impact effects could have on browser performance. A single CSS property could result in visible redraws and page-scrolling treacle. On one site, I had to scrap rounded corners and revert back to images to solve a performance issue. I cursed a few times but simply considered it to be another development gotcha to file in my browser bitch box.

Fortunately, US web developer Andy Edinborough has investigated the issue further and developed the CSS Stress Test bookmarklet.

To wrap long URLs, strings of text, and other content, just apply this carefully crafted chunk of CSS code to any block-level element (e.g., perfect for <pre> tags)

In this post we have 25 CSS snippets and hacks that will solve many of the most frequently used and, at times, frustrating CSS development tasks. Why reinvent the wheel when there are already plenty of time-saving pre-written CSS code snippets?

As well as some classic and timeless CSS hacks you will also find many CSS3 snippets, like box-shadow, border-radius,linear-gradient and many more.

You know those nights when you race towards a deadline, banging out the CSS as fast as you can, there comes a moment when you pause…wondering what keyword would get rid of that z-index on that anchor, then you make the best guess you can, and type:

z-index: none;

Then go on in life, as it “renders” like you wanted it, it works, no big deal.

But it is. Specifying incorrect values might inject behaviour that you did not expect. It is quite possible that the currently incorrect value might be, in the future, used for a valid value which would distort the design you so carefully did (and how often do we revisit a client’s website to update? :).

CSS3 Generator.

Readability & legibility are both areas of interest in accessibility and typographic design, and many resources exist that attempt to define what constitutes well designed copy. In this post, we go over a few commonly overlooked and newer ways to implement more legible type on the web.

Add a line of code to your pages and choose from hundreds of fonts. Simple, bulletproof, standards compliant, accessible, and totally legal.

Code Style answers key questions for Web developers. Which Web fonts are most common? How to use media dependent style sheets? Make more robust, accessible Websites with open standards technology.

Use the Code Style font stack builder to create robust CSS font-family declarations. The font stack builder shows the probability that your preferred fonts are displayed on Windows, Mac and Linux Web browsers.

MVC is great.  It enforces sensible code organization for your models, templates, and business logic. But you’re probably not going to build even a basic webapp without a fair amount of JavaScript and CSS.  If you’ve worked with a medium to large size code base, you know how quickly things can get out of control for these assets.  To exasperate the situation, teams rarely lay down ground rules on how the developers should organize these assets, so you end up with a mess of inline scripts, inline styles, and multiple directories awash in loosely organized asset files.

So what is the best way to organize these into a framework?  I’ll cover how I go about organizing my JS and CSS, both for the purpose of being able to find things, but also making sure JS code and styles don’t accidentally conflict.  While my example is for Rails, thes ideas will translate directly into other MVC frameworks.

OK, CSS sprite tools exist. I'm pretty confident I actually made the very first one But they break from time to time (like mine currently). And then the command line is cool (as opposed to scary) and oh-so-quick. And imagemagick is cool and oh-so-powerful. So let's see how we can create CSS sprites from the command line alone.

Drop-shadows are easy enough to create using pseudo-elements. It’s a nice and robust way to progressively enhance a design. This post is a summary of the technique and some of the possible appearances.

Online CSS Sandbox.

I’ve started buying .net magazine again recently. I don’t normally but I was hoping it might help in my search for a super-awesome new agency. I was flicking through this month’s edition when I happened upon a Create a wraparound ribbon tutorial. I thought I’d give it a read as I really love little design conundrums and how other people solve them. I was a little surprised to see it had been done in five elements. I challenged myself to do it in one…

In this article, the focus is on what’s coming: styling techniques you’ll use in the immediate and near-term future. From styling HTML 5 elements to rearranging layout based on display parameters to crazy selection patterns to transforming element layout, these are all techniques that you may use tomorrow, next month, or next year. With partial browser support, they’re all on the cutting edge of Web design.

Accordingly, be careful not to get cut! A number of useful sites can help you figure out the exact syntaxes and patterns you need to use these techniques.

Furthermore, a number of JavaScript libraries can extend support for advanced CSS back into older browsers, in some cases as far back as IE/Win 5.5. Some are very narrowly focused on certain browser families, whereas others are more broadly meant to allow support in all known browsers. These can be useful in cases where your visitors haven’t quite caught up with the times but you don’t want them to miss out on all the fun. (Some of these libraries are CSS3 PIE, cssSandpaper, :select[ivizr], ie7-js, eCSStender).

There are also a good many CSS enhancements available as plug-ins for popular JavaScript libraries such as jQuery. If you’re a user of such a library, definitely do some digging to see what’s been created. Again: Be careful! While these techniques are powerful and can deliver a lot of power to your pages, you need to test them thoroughly in the browsers of the day to make sure you didn’t just accidentally make the page completely unreadable in older browsers.

It’s not often that you learn something from spam, besides that there are an extraordinary number of generous Nigerians (replete with theme song) and amazing number of variations in the spelling of viagra. Yet, I recently got spam where the offer was written in pristine English: no numbers replacing letters, no images, and no misspellings. How had such a brazen piece of spam got through my filters? The answer, it turns out, was some clever CSS that caused the HTML markup to be garbled but its visual rendering to be readable. I’ll show you how to use this for both good and evil.

The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if you're interested. Reset styles quite often appear in CSS frameworks, and the original "meyerweb reset" found its way into Blueprint, among others.

The reset styles given here are intentionally very generic. There isn't any default color or background set for the body element, for example. I don't particularly recommend that you just use this in its unaltered state in your own projects. It should be tweaked, edited, extended, and otherwise tuned to match your specific reset baseline. Fill in your preferred colors for the page, links, and so on.

In other words, this is a starting point, not a self-contained black box of no-touchiness.

If you want to use my reset styles, then feel free! It's all explicitly in the public domain (I have to formally say that or else people ask me about licensing). You can grab a copy of the file to use and tweak as fits you best. If you're more of the copy-and-paste type, or just want an in-page preview of what you'll be getting, here it is.

Adding rounded corners to an object in your HTML should be easy. Heck, open up Photoshop or your favorite image editor and it is easy to around rounded corners to any rectangle you create. When it comes to creating Web pages it is a different matter. Creating rounded corners to a block of text, a tab or a background is not easy. The only effective way to add a rounded corner is to create a HTML table with image files that look like corners. This is a lot of work and not very easy to update. HTML5’s update to Cascading Style Sheets, CSS3, now supports a new feature that allows you to added rounded corners to elements in your HTML. Rounded corners suddenly have never been so easy.

In this article you will learn how to use CSS to created rounded corners to rectangles without having to use a complex image cheat.

As people’s use and awareness of the Web grows, accessibility (or “universal design”) becomes more crucial. Accessibility is determined not only by a website’s code but by its design and content, which is why accessibility, standards and usability are so connected.

Web accessibility is a vast topic and has become a field unto itself. But don’t let that scare you. Accessibility is not terribly difficult to implement. It won’t hinder aesthetics or impede interaction as some believe. It’s just a smart way to design and develop.

The UA Style Sheet is a simple set of css styles that each web browser uses before any other css styles are applied.

This chart lists and compares the different default style sheets used to render HTML in the four major versions of Internet Explorer; IE6, IE7, IE8, and IE9 Platform Preview.

You can download each of these UA stylesheets by using the links at the top of this chart.

Emulating background image crop, background image opacity, background transforms, and improved background positioning. A few hacks relying on CSS pseudo-elements to emulate features unavailable or not yet widely supported by modern browsers.

Navigation is a critical aspect of any website. Many larger sites use drop down menus in effort to make it easier for visitors to find what they are looking for. In this post we will feature 25 scripts that you can use on your own sites for jQuery drop down menus.

The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.

If you're following the development of CSS3 you may have seen, last June, a proposal from John Daggett of Mozilla to bring advanced typography control to the web. A few months later we saw some experimental Firefox builds which demonstrated the features. The terminology has been through a slight update since then, from font-feature-opentype to font-feature-settings, but last week these experiments finally made their way into the trunk builds of Firefox 4.0 on Windows and Mac.

An Introduction
Other CSS frameworks try to do everything—grid system, style reset, basic typography, form styles. But complex systems are, well, complex. Looking for a simple, lightweight approach that doesn't require a PhD? Meet The 1KB CSS Grid.

Inspired by 1kbgrid.com. Developed with love by Girlfriend's overconfident and pretty good looking team of web developers. Tiny Fluid Grid ships with a index.html with demo code, and the grid.css containing the CSS for the grid you created.

The Google Font Directory lets you browse all the fonts available via the Google Font API. All fonts in the directory are available for use on your website under an open source license and served by Google servers.

View font details to get the code needed to embed the font on your web site. Please also visit our quick start guide and FAQ page. For more help and suggestions, use our moderator page

While I was coding the Notepad theme, I’ve learned some new CSS3 features and now I would like to share it with you. View the demo to see a Mac-like multi-level dropdown menu that I’ve created using border-radius, box-shadow, and text-shadow. It renders perfect on Firefox, Safari and Chrome. The dropdown also works on non-CSS3 compitable browsers such as IE7+, but the rounded corners and shadow will not be rendered.