{css:hat} translates Photoshop layer styles to CSS3

display the viewport (window) size of any page you’re on and would update the X/Y size when you shrink/expand the browser

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.

Compass is an open-source CSS Authoring Framework.
http://compass-style.org/reference/compass/

Sass makes CSS fun again. Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.

.scss/.sass

Resizer allows you to quickly change the dimensions of a webpage to test responsive design.

visually shows the elements on a page that have events subscribed to them, what those events are and the function that the event would run when triggered. This is primarily intended to assist debugging, but it can also be very interesting and informative to see the subscribed events on other pages.

View any webpage in multiple screen sizes, simulating the viewport of different devices
Related:
http://bricss.net/post/16538278376/simple-responsive-design-test-page
http://codebomber.com/jquery/resizer/
Alt:
http://responsive.victorcoulon.fr/

https://github.com/tommoor/tinycon
Tinycon allows the addition of alert bubbles and changing the favicon image. Tinycon gracefully falls back to a number in title approach for browsers that don't support canvas or dynamic favicons.
Alerts in the favicon allow users to pin a tab and easily see if their attention is needed.

Collect, test, and experiment with interface pattern pairings of CSS & HTML. Pears is an open source WordPress theme, enabling people like you to get your own pattern library up and running quickly.

http://www.colorhexa.com/examples
ColorHexa.com is a free color tool providing information about any color. Just type any color values (view full list here) in the search field and ColorHexa will offer a detailed description and automatically convert it to its equivalent value in Hexadecimal, Binary, RGB, CMYK, HSL, HSV, CIE-Lab, Hunter-Lab, CIE-Luv, CIE-LCH, XYZ and xyY. ColorHexa will also generate matching color schemes such as complementary, split complementary, analogous, triadic, tetradic and monochromatic colors. So you will be able to know what colors best suit with the one you chose. It is also possible to blend colors together or create a gradient between them.

Bear CSS is a handy little tool for web designers. It generates a CSS template containing all the HTML elements, classes & IDs defined in your markup.

Wirify is free, easy and fun to use

Step back and see the big picture of a web page
Focus on page structure by hiding the content
Analyse page layout to aid learning and teaching
Wireframes look cool Wirify is free, easy and fun to use

CSSrefresh is a small, unobstructive javascript file that monitors the CSS-files included in your webpage. As soon as you save a CSS-file, the changes are directly implemented, without having to refresh your browser.
When you're coding a website, nothing can be more frustrating than having to switch from the texteditor to the browser over and over again, just for small changes to occur. With CSSrefresh installed, all the included stylesheets are automatically refreshed directly after you save them.

Font­Friend is a book­marklet for typo­graph­i­cally obsessed web design­ers. It enables rapid check­ing of fonts and font styles directly in the browser with­out edit­ing code and refresh­ing pages, mak­ing it the ideal com­pan­ion for cre­at­ing CSS font stacks. 2.0’s killer fea­ture is instant drag-and-drop font pre­view­ing right in the browser (Fire­fox 3.6+, Chrome 7+), in any doc­u­ment you’re cur­rently view­ing. Ver­sion 2.5 and 3.0 intro­duced some new fea­tures that aren’t doc­u­mented here yet. Click the ver­sion num­bers to see the release announce­ments for each.

These bookmarklets help you deal with annoying web pages. These bookmarklets help you deal with annoying web pages.
http://w-shadow.com/bookmarklet-combiner/?bookmarklet=3543

I have found Favelets useful for:

Authoring: Validating the HTML, CSS and HREFs in pages I've written, and testing how my layouts reflow to various screen sizes.
Learning: Viewing the CSS and scripts on a page in addition to the HTML.
Enhanced User Interface (UI): Adding features like a simple Alternate Style Sheets UI.

The Page Resources bookmarklet lists all the resources in the page - HTML documents, scripts, stylesheets, images, CSS background images, and Flash. It crawls the DOM to find each resource, and even crawls frames and iframes. Some resources that aren't in the DOM, such as image beacons, aren't found. Packet sniffers (such as Firebug Net Panel and HttpWatch) are more accurate but don't run on mobile devices. If you're doing mobile development the Page Resources bookmarklet is an easy way to get a pretty accurate list of what's in the page.

dabblet is an interactive playground for quickly testing snippets of CSS and HTML code. It uses -prefix-free, so that you won't have to add any prefixes in your CSS code. You can save your work in Github gists, embed it in other websites and share it with others.

XRAY is a bookmarklet for Internet Explorer 6+, and Webkit and Mozilla based browsers (including Safari, Firefox, Camino or Mozilla). Use it to see the box model for any element on any web page.

The Ui Parade is all about showcasing user interface design that is crafted by some of the worlds most talented ui designers.

Playtype is an online type foundry established by the Copenhagen-based design agency, e-Types. Playtype embodies a commitment to craft, design and excellence in every aspect of type design
— from finials to ascenders, serifs to hairlines.

dynamically write a link element into the head of the document. The link points to a style sheet. This allows for "diagnosis" favelets that are easy to update or change (you just edit the style sheet).

Pick a color value format, input two valid CSS color values in the format you chose, and pick the number of midpoints you'd like to see. The palette will show the colors you input as well as the requested number of midpoint colors, and the values of those colors.

Rulr is a bookmarklet that lets you draw a selection and get it's size and position.

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

Good (trademarked GOOD in caps) is a media platform that promotes, connects, and reports on the individuals, businesses, and non-profits "moving the world forward." Good produces a website (GOOD.is), a quarterly magazine, and online video content covering a variety of topics, including the environment, education, urban planning, design, food, politics, culture, and health.

Categories: CSS, Flash, HTML, Illustrator, Java, JavaScript, Maya, Photography, Photoshop, PHP, Ruby, Ruby on Rails, 3ds Max.