Sweet Tooltip is a jQuery & CSS3-based tooltip, not merely a one-style tooltip but seven. This imageless tooltips are crafted using CSS power, linear-gradient, box-shadow, text-shadow, :after and :before selector, etc. I created this tooltip with aim for having a style-independent tooltip, so, for future usage I can pick or create a suitable-style tooltip with the project I’m working on, please enjoy!

Codrops is a web design and development blog that publishes articles and tutorials about the latest web trends, techniques and new possibilities. The team of Codrops is dedicated to provide useful, inspiring and innovative content that is free of charge. What started as an experimental blog became an exciting playground for sharing the passion for web design and web development.

There are over 400 typefaces in the Google web fonts directory. Many of them are awful. But there are also high-quality typefaces that deserve a closer look. Below are examples of these typefaces in action. Click the examples to get the typeface from the Google web fonts directory.

Home | Font bundles | Users | About Login via Twitter

Awesome Fontstacks
Font: DejaVu Serif Condensed

add an overlay of mockup to web page for testing

0to255 is a simple tool that helps web designers find variations of any color.

Full and starter theme for WP development

The Goldilocks Approach uses a combination of Ems, Max-Width, Media Queries and Pattern Translations to consider just three states that allow your designs to be resolution independent.

How does it work? Just put your image size after our URL and you'll get a placeholder.

This is a simple filler text generator. What makes it different or unique is that it takes quotes from characters in the animated series Futurama. If you don’t know much about the show, it’s pretty awesome, and I suggest you start watching it. In any case, here’s the link to the project:

This is something new, I believe some of us may not even realized there are getting more and more people design vcard website. I able to to find 30 of them, and including mine. :)

Most of them are having a same features - they are all using javascript animation like sliding, fading and tab navigation. I present you 30 amazing Mini vcard websites with slick javascript animation. Enjoy.

Up for grabs is a beautiful set of social icons. This free download includes a PSD file will fully editable shape layers, plus 56 icon variations in PNG format.

When combining typefaces, there are a couple of important principles you’ll need to keep in mind, namely contrast and mood. Effectively combining typefaces is a skill best learned through practice, and trial-and-error. Once you’ve mastered the principles covered here, you’ll have the tools you need to try out combinations while making educated guesses about what will and won’t work together.

Here, we’re mostly covering combining two typefaces, as you would for body copy and headlines. In the next part, we’ll cover combining more than two typefaces for things like navigation, image captions, and more.

Creating great typeface combinations is an art, not a science. Indeed, the beauty of typography has no borders. While there are no absolute rules to follow, it is crucial that you understand and apply some best practices when combining fonts in a design. When used with diligence and attention, these principles will always yield suitable results. Today we will take a close look at some the best practices for combining typefaces — as well as some blunders to avoid.

During my talks and subsequent conversation, I often mention numerous books that have influenced my thinking. As a result, I’m getting an increasing number of emails and tweets asking for a full list. So, to deal with that, I’ve pulled together the following list.

This is by no means comprehensive, but the titles listed here are the ones that have really shaped my brain, helped me be a better designer, a more coherent coder, and assisted me in working out what I do and why I do it.

I apologise for the lack of descriptions, but at least I’ve linked to each on Amazon (UK) or the relevant publisher. At the very least, every human should read The Design of Everyday Things, Understanding Comics, and Ways of Seeing. Every designer ought to read Visual Grammar and Visible Signs, and own copies of The Art of Looking Sideways and The Elements of Typographic Style. We can all learn from Managing Oneself, and can improve our delivery with Communicating Design.

Considering how many designers are self-taught, either in whole or in part, the importance of a solid foundation in graphic design theory is often overlooked. New designers often want to jump right into creating websites, rather than learning the basics of why some designs work and some don’t. But they’re putting themselves at a disadvantage to designers who do have formal training or have taken the time to learn the principles behind good design.<br />
Below are more than 45 recent lessons in graphic design theory. Included are general theories, theories about user experience and usability, typographic theory, layout and grid theory, and color theory.

Pick a CSS3 enhancement, fill in the values, and the app creates all the vendor-specific mark up for you.

Web fonts are here, sparking an exciting new era in web design. FFFFALLBACK makes it easy to find the perfect fallback fonts, so that your designs degrade gracefully.<br />
So, in the spirit of bulletproof web design, we give you…

Overview of design practices for non-designers

Bootstrap is a super awesome pack of mixins and variables to be used in conjunction with LESS, a CSS preprocessor for faster and easier web development.

we discuss several techniques to obtaining great results for typography using some rather easy methods.

CSS prettifier

A simple stylesheet for rendering beautiful keyboard-style elements.

CSS Font stacks are one of those things that elude a lot of designers. Many stick to the basic stacks Dreamweaver auto-recommends or go even more basic by just specifying a single web-safe font.
But doing either of those things means you’re missing out on some great typography options. Font stacks can make it possible to show at least some of your visitors your site’s typography exactly the way you intend without showing everyone else a default font. Read on for more information on using and creating effective font stacks with CSS.

A List Apart publishes articles written for working web professionals, but we appreciate the predicament of new web designers and builders who aren't sure where to begin. As we promised in our primer for readers new to ALA, we've collected a set of starti