{css:hat} translates Photoshop layer styles to CSS3

SelectorGadget is an open source bookmarklet that makes CSS selector generation and discovery on complicated sites a breeze. Just drag the bookmarklet to your bookmark bar, then go to any page and press it. A box will open in the bottom right of the website. Click on a page element that you would like your selector to match (it will turn green). SelectorGadget will then generate a minimal CSS selector for that element, and will highlight (yellow) everything that is matched by the selector. Now click on a highlighted element to remove it from the selector (red), or click on an unhighlighted element to add it to the selector. Through this process of selection and rejection, SelectorGadget helps you come up with the perfect CSS selector for your needs.

dotcss is a Google Chrome extension that imports .css files in ~/.css based on their filename.

If you go to https://github.com, dotcss will load ~/.css/github.com.css.

This makes it super simple to change and improve the look of your favourite pages.

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

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.

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.

Zen Coding is an editor plugin for high-speed HTML, XML, XSL (or any other structured code format) coding and editing. The core of this plugin is a powerful abbreviation engine which allows you to expand expressions—similar to CSS selectors—into HTML code. Read more <http://code.google.com/p/zen-coding/wiki/ZenHTMLSelectorsEn>.

Abbreviation engine has a modular structure which allows you to expand abbreviations into different languages. Zen Coding currently supports CSS, HTML, XML/XSL and HAML languages via filters <http://code.google.com/p/zen-coding/wiki/Filters>.

Zen Coding v0.5 on Vimeo http://vimeo.com/7405114

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.

Safari Extension that will enable you to override stylesheets for any web page.

It's a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com.

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.

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.

Base 64 / URI - RFC 1738
related:
http://dopiaza.org/tools/datauri/
http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/

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).

#detailstitle_highlight[title]::after {
content: " (r)";
color: #575757;
font-weight: normal;
}

#detailsdue::after {
content: " (d)";
}

#detailsreoccur::after {
content: " (f)";
}

#detailsduration::after {
content: " (g)";
}

#detailstags::after {
content: " (s)";
}

#detailslocation::after {
content: " (l)";
}

#detailsurl::after {
content: " (u)";
}

#detailspostponed::after {
content: " (p)";
}

#detailsnotes::after {
content: " (y)";
}

#tasksToolbox > .xtoolbox_selector > a:first-child::after {
content: "(a)";
}

#tasksToolbox > .xtoolbox_selector > a:last-child::after {
content: "(n)";
}

#addEntry > a::after {
content: " (t)";
}

#tasktabs:after, #detailstabs::after {
content: "(h)";
line-height: 2;
margin: 0 0.5em;
}

#searchtogglewrap::before {
content: "(C-S-/) ";
margin-left: -10em;
}

#viewSelector > a[href="#section.overview"]::after {
content: " (C-S-6)";
}

#viewSelector > a[href="#section.tasks"]::after {
content: " (C-S-7)";
}

#viewSelector > a[href="#section.locations"]::after {
content: " (C-S-8)";
}

#viewSelector > a[href="#section.contacts"]::after {
content: " (C-S-9)";
}

#viewSelector > a[href="#section.settings"]::after {
content: " (C-S-0)";
}

#viewSelector > a::after {
font-size: 80%;
}

#appheaderlogo {
display: none ;
}

#topnav {
position: relative ;
}

#statusboxUndo > a::after {
content: " (z)";
}

#tasksToolbox > .xtoolbox_actions > form > div::after {
content: " Complete(c), Postpone(p)";
color: #757575;
}

#tasksToolbox > .xtoolbox_selector::after {
content: "Move down(j), Move up(k), Select(i), Undo(z), Multi-edit(m)
SmartAdd: ^Due Date, *Repeat, =Estimate Time, #Lists and Tags, @Location, !Priority";
color: #757575;
display: block;
margin: 3px 0 -5px 0;
white-space: pre;
line-height: 1.6em;
}

#listtabs > .abr-listtabs::after {
white-space: pre;
display: block;
color: #757575;
content: "Next List(S-j), Last list(S-k)
Open list(S-o)
Go to list(C-g)
Move to list(C-m)";
margin: 5px 0 0 0;
}

#personName {
display: none ;
}

Optimize Legibility is a simple Safari extension that injects a single CSS attribute (text-rendering:optimizeLegibility) into every page. This will improve kerning and ligatures in text.

Restyles Wikipedia into a more readable and attractive site.

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

ENTER THE URL OF ANY CSS FILE TO VIEW AND MODIFY ITS COLOR SPECTRUM

Background images make pages look good, but also make them slower. Each background image is an extra HTTP request. There's a fix: combine background images into a CSS sprite. But creating sprites is hard, requiring arcane knowledge and lots of trial and error. SpriteMe removes the hassles with the cl

Stylebot allows you to quickly create and apply custom CSS to websites.

Just call Boxcss with a root url and the css files you wish to include:<link rel="stylesheet" href="http://www.boxcss.com/boxme?host=http://www.yoursite.com/assets/css/&include=style1.css,style2.css,style3.css,style4.css" /> Boxcss will grab your files, compress them and then deliver one minified and cached CSS file to your page. Boxcss does not support the use of @imports in your stylesheets.

BuildorPro is a web design environment that runs through your browser 

Type-a-file has headings, paragraphs, lists, blockquotes, citations, abbreviations, asides, small, sub and super text and more taken care of. There are a range of font combinations you can choose from out of the box, some of which use Typekit fonts, but these are easily replaced with your own choices — the real beauty of Type-a-file is in the time it saves you.

A clean and simple way to help align your layouts. No complex grid frameworks necessary.

Just put your dimensions after our URL to get a background guide image to work with. Grids are created on the fly, so any combination should work.

Check Cascading Style Sheets (CSS) and (X)HTML documents with style sheets

Use this utility to compress your CSS to increase loading speed and save on bandwidth as well. You can choose from three levels of compression, depending on how legible you want the compressed CSS to be versus degree of compression. The "Normal" mode should work well in most cases, creating a good balance between the two.

没有您的语言？帮我们改进！

CSS 图片拼合 (CSS sprites) 可有效降低图片文件的 HTTP 连接请求数. 多个图片将以一定间距合并为一个大图片文件. 页面中使用这些图片的元素将利用 background-position 这一 CSS 属性来显示拼合图片中的指定位置.

这一技术可有效提升网站性能, 尤其是网页上有众多小图片时, 如许多菜单栏图标. Yahoo! 首页是使用此技术的一个实例.