使用者介面
- I Like Your Color
輸入URL然後它會抓出其中的顏色並用16進位表示。
- CSS Multi-element Rollover Generator
使用CSS和一個圖片建立出一個翻轉按鈕的樣式。
- CSS Rounded Box Generator
- Ruthsarian Layouts
6個CSS頁面配置模板，包括顏色、標題等。
- Bluerobot Layout Reservoir
2欄和3欄的CSS布局架構
- Glish CSS Layout techniques
2、3、 4欄的CSS布局架構
- The Layout-o-matic
輸入頁寬、欄數和padding，它會自動產生CSS和HTML的布局架構。
- Little Boxes
w3cn.org上提供的那些布局模板
- Open Source Web Design
各種免費的完整頁面模板
- Web Builders’ Toolkit
更多的模版資源
- Iconico Online CSS Scrollbar Color Changer
- List-u-Like
一個CSS菜單產生器：輕鬆建立採用li併兼容各種瀏覽器的導覽功能表。
- Nifty Corners: 無需圖片的圓角矩形
- Round Corner Stone/Icon (rcsi) V1.0
增強圓角矩形
- Xylescope
無需下載其他網站就能輕鬆分析其CSS代碼。
- W3C Core Styles
- Checkliste zur Webseitengestaltung
- Testseite zur Zeilenbreite
易用性檢查
- Accessibility Valet Demonstrator
- Bobby Online Service
- Cynthia Says
- OCAWA Web Accessibility Expert
- Torquemada
使用工具對頁面進行一個完整的易用性分析方法測試，以快速辨別頁面中哪些部分存在錯誤。
- UI Site check
一個網站檢查工具，只需要輸入你的網址，便可以列出幾十個驗證器和易用性工具。
- WAVE 3.5 Accessibility Tool
可以提供你頁面上的易用性細節和錯誤方面的有用資訊。他會用紅黃綠藍等幾種表徵圖來表示需要改進的頁面部分。這些表徵圖代表了你頁面上有關結構、內容、可用性和易用性方面的問題細節。你可以清楚地看到當前頁面上哪些位置存在問題。
- Web-based Site Usability Checker
- WebXACT Quality & Accessibility Check
一個免費的線上服務，讓你對單個頁面進行品質、易用性和保密性問題的測試。
- Will the browser apply the rule(s)?
- TAW - Test accessibilidad web
- TypeTester
CSS文字樣式線上對比工具。
- W3C CSS 校正服務
提供全球資訊網協會(W3C)樣式表(CSS)校正服務。
- Browsershots 可以查看同一個網頁在不同瀏覽器下的展示效果。
整理和最佳化
- CSS Formatter and Optimiser
能讓你選擇你的CSS更易讀還是更小。
- CSS Compressor
使用這個工具可以壓縮你的CSS使之提高負載入速度和節約頻寬。
- Online CSS Compressor
多種途徑來清理並壓縮你的CSS，犧牲了可讀性來獲得相當程度的最佳化和尺寸的減少。
- CSS Compressor
- CSS Syntax Checker for BBEdit and TextWrangler
- CSSTidy
CSSTidy 是一個開源的CSS解譯器和最佳化工具
- CSS Tweak ~ Web Based CSS Tweaker!
CSS Tweak 會最佳化你的CSS以減少檔案大小和下載時間。
- Clean CSS - Optmize and Format your CSS
- Format CSS Online
自動格式化你的CSS使之便於閱讀和編輯
- Online CSS Optimizer
CSS Optimizer 最佳化並減少CSS的檔案尺寸
- Online CSS Optimiser/Optimizer
這個工具用於最佳化CSS代碼。
- Tabifier
使HTML和CSS代碼變漂亮。
- Webucator
有一個CSS參考手冊，你還可以在上面測試你的CSS代碼
- CSS Centricle
CSS hack瀏覽器安全色一覽表 （就是w3cn.org 上的那個）
- CSS整形和最佳化工具
一款CSS的最佳化工具，但必須確保源碼符合規範，規範檢驗可以用W3C檢驗服務。
字型
- CSS Font and Text Style Wizard
你可以在這裡測試用不同的字型和樣式來產生CSS原始碼。
- Em Calculator
轉換字型大小到em的工具
- text sizing - up the garden path
不同瀏覽器下字型表現的研究，共有264個。
表單
- Accessible Form Builder
輕輕鬆鬆產生符合XHTML標準的表單。
- CSS Form Code Maker
表單產生器
- JotForm
所見即所得 (WYSIWYG)的表單產生器
- korhoen typeviewer
幫你查看CSS的排版效果，幫你調整使之易讀。
布局
- CssCreator -> Page Layout:
this generator will create a CSS layout that has fixed width left and/or right columns with a dynamic width center column, all the same height with header and footer.
- CSS HTML PHP Website Template Maker
一個PHP - HTML - CSS模板產生器，可以產生包括頁頭和頁尾的兩欄布局的模板。
- Firdamatic
Firdamatic? 是一個無表格的布局產生器。
- Free CSS Template Code Generator
產生三欄的布局
- Layout-o-Matic
也是一個無表格的布局產生器。
- QrONE CSS Designer
線上CSS產生器
- Scriptomizers
一個CSS樣式產生器
- The Generator Form v2.90
1-3欄可定製的CSS頁面產生器
酷站
- CSSElite
- openwebdesign.org
設計師和站長在這裡分享網頁設計範本和資訊。
- CSS thesis
- Wow-Factor
- Web Standards Awards
- W3 Compliant Sites
- Unmatched Style
- The Weekly Standards
- CSS-Mania
- CSS Drive
- CSS Import
- CSS Zen Garden
- CSS Vault
- CSS Beauty
- Stylegala
協助嚮導 / Hacks / 學習資源
小貼士
- CSS-Based Forms: Modern Solutions樣式表定義的各種漂亮註冊與登入表單的收集。
- Hot Dates with CSS 教你怎樣使blog的日期看起來像日曆頁。
- A nice demo of experimenting with CSS-only solution to imagemap with popups using unordered list.
- Clagnut shows you how to have Line breaks in tooltips by using the carriage return entity . How utterly simple!
- Styling check boxes and radio buttons only with CSS uses 100% CSS solution (via attribute value selector and positioned background images) to serve up customized form elements. It’s semantically correct and degrades well for browsers that doesn’t support this method (IE), but is it also accessible?
- Stuart Robertson’s CSS text shadow technique seems like one of the easiest-to-implement techniques I’ve come across. It uses :before pseudo element and supports both Safari and Firefox browsers.
- From “holy crap why didn’t I think of that file… Airbag has a simple but great idea of using a ruler background images in CSS to check DIV sizing during development.
- CSS Colors: Take Control Using PHP is a wonderful tutorial from Barely Fitz on how to use PHP variables to represent colors in your CSS which you can then manipulate — quickly changing all the colors from a single source, generating new colors via algorythm, etc.
- Web Graphics has a CSS3 demo on using :target pseudo class to style anchor link targets.
- Dynamic Drive, a long time favorite DHTML code snippet depot of mine, has started a new spin-off: CSS Drive.
- A More Accessible Map — a new tutorial on ALA shows how to create an accessible map with tooltips via CSS and JS.
- Styling horizontal rules with CSS — “…Don’t waste hours trying to style horizontal rules consistently across different browsers. Instead wrap your HR in a DIV, set the HR to display none and style the surrounding DIV instead.. Now why the heck didn’t I think of that?
- CSS image preloader technique from maratz.com — using background image CSS property on images to serve as image place holders.
- stefanhayden.com shows a neat (and easy) way to make sure the client fetches new CSS with HTML update: just add a variable at the end of the CSS with each update.
- Wrapping text around curves via CSS if you don’t mind the markup cruft.
- codylindley.com’s Pushpin Header Technique “…is a CSS solution for creating a stationary header out of the thead of a table while the table’s tbody remains scrollable
- hovebox image gallery via sonspring. It’s sort of like mini-lightbox that enlarges the thumbnails on hover. Very nice.
- Beautifully Numbered Lists looks nice except that it’s not really an ordered list. Instead it used definition lists inside the ordered list for presentation — which means true standardistas might object.
- In what could only be catagorized under Uber-Anal department, ollicle.com how to alter CSS line-height based on paragraph width via javascript for optimal readbility.
- From “I didn’t know that file… wg tells us that using − instead of a dash character prevents some browser from wrapping the words connected by it.
- Eric Meyer, the man with CSS skillz that payz da billz, reveals something I’ve never heard of before: line-height property can use unitless values! The differences between united vs. unitless declarations are well described in his article but I can’t believe that I had it all wrong. I’ve been telling everyone that “You must declare unit for ANY measurement values unless it’s zero.
- loudandlonely has an interesting article on how to obscure your email address via CSS by using some clever a:link:before and a:link:after pseudo-elements.
- digital-web has a good run down on things to consider when using CSS typography.
- 456bereastreet takes a first crack at explaining CSS3 selectors
- Another good footer at the bottom using only CSS demo.
- Pup’s Box Flow Hack shows you how to allow even block items to flow around floating boxes.
- Simple(r) CSS Image Switcher — Unlike the orginal CSS image switcher, this version doesn’t use nested unordered lists. Instead, it uses just one unordered list, with the link image placed inside the anchor.
- Another very nice tutorial from 24ways. This time it’s Curly Quotes Without Images, a technique popular in citing blockquotes with enlarged quotation marks in the beginning and at the end of the quote. But without using background images.
- FACE is an interesting javascript-powered / CSS-controlled page animation technique.
- Defining CSS constants using PHP is a good article on using PHP to allow constants (’variables’) in CSS. For instance you can use this technique to define a repetitive color in CSS as a variable. That way you only need to declare it once and only change that one instance should you want to change that color. Very handy.
- 24ways has a good article on using z-index attribute.
- apples-to-oranges.com has a fantastic tutorial on how to create great looking bar graphs with CSS
- Image map for detailed information showcases use of CSS to provide an image with mouse-over-section for detailed notes.
- From the “How the heck did I miss this department: cssQuery a powerful cross-browser JavaScript function that enables querying of a DOM document using CSS selectors. All CSS1 and CSS2 selectors are allowed plus quite a few CSS3 selectors.
- Bulletproof logos via simplebits
- Css Color Chart
- Check marking visited links
- CSS Gradients Demo — creating gradient background effect in CSS using server-side constants technique developed bu Shaun Inman.
- Creating s star rating using CSS
- CSS Star Rating Part Deux is a follow-up to the aforementioned technique that adds the starting “state.
- And here’s an external article which wraps it all up with a tutorial on how to use CSS star rating with PHP and database.
- Image Placement Technique — Yes. Not “replacement but “placement.
- FooterStick — how to force the footer of a webpage to stick to the bottom of the viewport.
- Shaun Inman’s CSS-SSV — using PHP variables in CSS.
- CSS scroll box fade using alpha-channel PNG
- Styling visited links with :after pseudo class
- Footnotes with CSS and JS
- Restaurant menu layout in CSS via web-graphics.com
- CSS scale image — using em values to scale the images in CSS. via bigbaer.com
- Slantastic — create irregular shaped boxes.
- yDSF - Robust CSS Drop Shadows
- CSS sliding photo gallery — an interesting way to present equal-sized images on mouse hover
- alsacreations.com — Nice collection of CSS tutorials that covers most of the basics.
- Using CSS selectors to apply Javascript functionality — ‘click here to delete’ demo
- Flickr-style image map with only CSS
- Web Color Schemes — via returnofdesign.com
- Making the jump to tableless design — Andy Budd’s presentation at @media 2005.
- CSS Help Pile
- Simple Clearing of Floats — various methods of clearing floats.
- Visited links styling — via webdesign.maratz.com.
- mandarindesign’s text tricks.
- Sweet collection of CSS how-tos — via maratz.com
- HoverHelp — DHTML/CSS tool tips on hover.
- How-to: Giving To Hiram? masthead — Nice masthead design in CSS. via cameronmoll.com
- :focus and :not
9rules.com討論了兩個很少見的CSS偽類。
- welstyled.com — CSS文章和小貼士包括min-height hack, “the underscore hack, “single line vertical centering, “photocards等等
- Couloir Slideshow Script — 錯！這不是flash。這是純javascript/CSS編寫的產品。
- WASP list some international sites that are inspired by CSS Zen Garden Project
- 用CSS的border屬性來建立斜邊
摘錄來源：http://www.inpeck.com/blog/2006/11/01/css-tools-list/
