Silly list scroll effects.

Validation is great, but it won't catch everything. For example, if you have a link where you forgot to add a URL value to the href attribute, the validator won't complain. The syntax is valid, even if it's a broken experience. Similarly, the validator will be happy to let through empty class and id values.

Enter the url to your site - local or online: both work - and use the controls to adjust the width and height of your viewport to find exact breakpoint widths in pixels. Then use that information in your media queries to create a responsive design.

Style Tiles are a design deliverable consisting of fonts, colors and interface elements that communicate the essence of a visual brand for the web.

600+ Royalty-free vector icons, glyphs and symbols based on the Helvetica Bold typeface.

An accessible image replacement method using pseudo-elements and generated-content. This method works with images and/or CSS off, with semi-transparent images, doesn’t hide text from screen-readers or search engines, and provides fallback for IE 6 and IE 7.

A wireframe sketch is the initial hand-drawn design process, using paper and pen/pencil, of what a website design will look like. And to help you get inspiration as well as effective reference points, this article features 20 impressive web and mobile wireframe sketches.

There is no pagefold!

Iconic is an open source icon set consisting of 171 marks in raster, vector and font formats.

ImageOptim optimizes images — so they take up less disk space and load faster — by finding best compression parameters and by removing unnecessary comments and color profiles. It handles PNG, JPEG and GIF animations.

Designed by Jory Raphael at Sensible World (with the help of his trusty Roboticon), Symbolicons are a family of awesome vector icons, glyphs and symbols. Get all 505 icons at once with the bundle, or purchase the sets individually.

I think the problem is fairly obvious here. If you set a static width on the <select> element and the width of the text in the <option> are wider than that, the text gets cut off in IE 6-8. There is no good pure-CSS solution for this that I can come up with or find. It has been tackled with JavaScript a number of ways.

Time for a bit of fun with CSS!
The following examples are all created using live text and the CSS text-shadow property. Apart from the Letterpress effect, all of the following examples make use of multiple shadows, and as such will only work on the following browsers.

These are great times for front-end developers. After months of exaggerated excitement about HTML5 and CSS3, the web design community now starts coming up with CSS techniques that actually put newly available technologies to practical use instead of abusing them for pure aesthetic purposes. We see fewer “pure CSS images” and more advanced, clever CSS techniques that can actually improve the Web browsing experience of users. And that’s a good thing!

Everyone’s familiar with inline form labels — storing the label of the field in the value attribute and using some minor JavaScript to erase the text when the field gains focus. This works…okay, but the major problem is that as soon as the user clicks, they lose the label entirely. If they tabbed right into it they may not even have read the label, in which case they’re just guessing.

One aspect of designing for the web that almost immediately offends designers is the lack of fonts that are considered safe to use. While it is true that there are only a handful of web safe fonts, the ones we do have at our disposal can be quite powerful and diversely useful. On top of that, CSS gives us a nice little thing called a font stack.

Download open source HTML5 & CSS3 snippets and cutting edge web interface kits.

Initializr is an HTML5 templates generator to help you getting started with a new project based on HTML5 Boilerplate. It generates for you a clean customizable template with just what you need to start!

There are currently 404 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.

We made a stencil for OmniGraffle with icons for touchscreen interaction, free gestures and mobile phone gestures. You can download it at Graffletopia. It is a first version of the icon set, we will be updating it from time to time, so feel free to comment and make suggestions for gestures to integrate in the future.

Icons for mobile apps
Created specifically for iPhone & iPad apps, they're also perfect for Android, websites, t-shirts, tattoos and more.

A good-looking tab control usually has one feature that I've always found impossible to reproduce without images: borders that bend to the outside at the bottom of each tab. In this article I would like to show how you can use the CSS :before and :after pseudo elements to create this effect without using images. First, let's start with some basic markup.

For many of us, logging into websites is a part of our daily routine. In fact, we probably do it so often that we’ve stopped having to think about how it’s done… that is, until something goes wrong: we forget our password, our user name, the email address we signed up with, how we signed up, or even if we ever signed up at all.

As web designers and developers, we have all come to learn many css tricks and techniques that help us achieve our layout goals. The list of these techniques is an ever expanding one, however, there are certain tricks that are essential to achieve your goal. Today, we will review 20 excellent css techniques to keep in mind when developing your theme.

Original Hover Effects
with CSS3 Transitions and Animations

Each project is unique and calls for a unique solution, but I’ve found it helpful to keep a few rock solid and incredibly versatile alignments in mind that I can bust out when I get stuck. The ten layouts below should be enough to get you through even the worst cases of designer’s block when you can’t figure out the best way to arrange the content on your page.

The easiest way to use Real Fonts on your website

Easily create bundles of beautifully matching, free web fonts, with failsafe font stacks to back them up. Including ready-to-go CSS code!

0to255 is a simple tool that helps web designers find variations of any color.
Perfect for hovers, borders, gradients, and more.

COLOURlovers is a creative community where people from around the world create
and share colors, palettes and patterns, discuss the latest trends and explore colorful
articles... All in the spirit of love.

Normalize.css is a customisable CSS file that makes browsers render all elements more consistently and in line with modern standards. We researched the differences between default browser styles in order to precisely target only the styles that need normalizing.

Dig responsive design? Hate fluid grids? Try a Frameless grid.

Common CSS patterns in the form of mixins and classes
Browser reset that gently makes every browser equal and sets you up for further styling
It’s community-driven. When someone adds a new pattern everyone benefits.

Perhaps the best web feature showcase site available today

Set column and gutter widths, choose the number of columns, and switch between pixels and percentages.

All without any ugly .grid_x classes in your markup. Oh, and did we mention it's responsive?

A folding grid for responsive design.

The number one suggestion I see from the proprietor of html5gallery.com to submitters is not to use the “<section>” element as a glorified “<div id="wrapper">”. Here, I shall demonstrate that “<body>” is already a wrapper and can be hacked to achieve some

Even with a relatively limited set of options in CSS, typography can vary tremendously using pure CSS syntax. Serif or sans-serif? Large or small font? Line height, spacing, font size and padding… The list goes on and on.

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.

On the Web, vertical rhythm – the spacing and arrangement of text as the reader descends the page – is contributed to by three factors: font size, line height and margin or padding. All of these factors must calculated with care in order that the rhythm is maintained.

Type-a-file Gives Your Web Typography a Head Start

This specification defines Cascading Style Sheets, level 2 revision 1 (CSS 2.1). CSS 2.1 is a style sheet language that allows authors and users to attach style (e.g., fonts and spacing) to structured documents (e.g., HTML documents and XML applications). By separating the presentation style of documents from the content of documents, CSS 2.1 simplifies Web authoring and site maintenance.