实用的 CSS3 参考手册和代码生成工具
openkk 12年前
<p> 英文原文：<a href="/misc/goto?guid=4958344920493235026" target="_blank">Useful CSS3 References and Online Generator Tools</a></p> <p> CSS3技术现在越来越成熟，通过 CSS3 的一些新特性（如 box-sizing、边界半径、文字阴影、渐变等）创建的效果已经令前端开发者兴奋不已。使用 CSS3 进行前端设计是未来的发展趋势。因此，如果你是一名前端设计师，就需要掌握这些最新的技术，否则就有可能会被淘汰。</p> <p> <strong>一、参考手册</strong></p> <p> <strong>1. <a href="/misc/goto?guid=4958344921308184150" target="_blank">Idiomatic CSS</a></strong></p> <p> 编写统一、符合习惯的 CSS 的原则，有中文版本。</p> <p> <strong>2. <a href="/misc/goto?guid=4958344922107853137" target="_blank">CSS3 Click Chart</a></strong></p> <p> 示例代码和 CSS3 特性支持情况表。</p> <p> <strong>3. <a href="/misc/goto?guid=4958344922904125618" target="_blank">CSS3 Selector</a></strong></p> <p> CSS3 Selector 的官方指导手册。</p> <p style="text-align:center;"><img alt="实用的 CSS3 参考手册和代码生成工具" src="https://simg.open-open.com/show/3bb7b70c999cc4c324e429383872efd1.jpg" width="500" height="250" /></p> <p> <strong>4. <a href="/misc/goto?guid=4958201607045894003" target="_blank">HTML5 & CSS3 Support</a></strong></p> <p> 主流浏览器对 HTML5 和 CSS3 支持情况一览表。</p> <p style="text-align:center;"><img alt="实用的 CSS3 参考手册和代码生成工具" src="https://simg.open-open.com/show/c535b1ce5d85f4f5dfbd84348e4e265c.jpg" width="500" height="250" /></p> <p> 5. <a href="/misc/goto?guid=4958344924435836730" target="_blank">CSS3 - Information and Samples</a></p> <p> 针对 CSS3 的各种信息和示例。</p> <p style="text-align:center;"><img alt="实用的 CSS3 参考手册和代码生成工具" src="https://simg.open-open.com/show/1163912c152392eccdc820c43a1c6326.jpg" width="500" height="250" /></p> <p> <strong>6. <a href="/misc/goto?guid=4958327883403231118" target="_blank">Sencha CSS3 Cheat Sheet</a></strong></p> <p style="text-align:center;"><img alt="实用的 CSS3 参考手册和代码生成工具" src="https://simg.open-open.com/show/a1a000a7b1f5a5537c85194009d5dce8.jpg" width="500" height="250" /></p> <p> <strong>7. <a href="/misc/goto?guid=4958330009712823349" target="_blank">Smashing Magazine CSS3 Cheat Sheet</a></strong></p> <p style="text-align:center;"><img alt="实用的 CSS3 参考手册和代码生成工具" src="https://simg.open-open.com/show/fac5e434b20588cb791d6bc0437f774f.jpg" width="500" height="250" /></p> <p> <strong>二、CSS 代码生成工具</strong></p> <p> <strong>1. <a href="/misc/goto?guid=4958319088114399412" target="_blank">Gradient Editor</a></strong></p> <p> 一个强大的 CSS 渐变代码可视化编辑器，类似于 Photoshop 的渐变设置界面。</p> <p style="text-align:center;"><img alt="实用的 CSS3 参考手册和代码生成工具" src="https://simg.open-open.com/show/4dd2228e06fec1ac7a8a79cca0d4ee27.jpg" width="500" height="250" /></p> <p> <strong>2. <a href="/misc/goto?guid=4958330008913211396" target="_blank">Gradient</a></strong></p> <p> CSS3渐变代码生成器。</p> <p style="text-align:center;"><img alt="实用的 CSS3 参考手册和代码生成工具" src="https://simg.open-open.com/show/b18d7baf8487421a738d265470f692bd.jpg" width="500" height="250" /></p> <p> <strong>3. <a href="/misc/goto?guid=4958319094348066823" target="_blank">Border Radius</a></strong></p> <p> 边界半径（圆角）代码生成器，通过设置四个角的半径数字，即可自动生成代码，且能够直接预览到效果。</p> <p style="text-align:center;"><img alt="实用的 CSS3 参考手册和代码生成工具" src="https://simg.open-open.com/show/a4486ddbfdd58c5d9224d0a1ac98c070.jpg" width="500" height="250" /></p> <p> <strong>4. <a href="/misc/goto?guid=4958330005765835788" target="_blank">CSS3 Generator</a></strong></p> <p> 通过可视化形式设置各种属性，包括文字阴影、轮廓、边界、渐变、过渡等，并能够自动生成代码。</p> <p style="text-align:center;"><img alt="实用的 CSS3 参考手册和代码生成工具" src="https://simg.open-open.com/show/7672d5e3c4f23f773ed60fa8d24d9c59.jpg" width="500" height="250" /></p> <p> <strong>5. <a href="/misc/goto?guid=4958344929607796821" target="_blank">CSS3</a></strong></p> <p> 针对边界半径、box 阴影、背景渐变和不透明度的 CSS3 代码生成器。</p> <p style="text-align:center;"><img alt="实用的 CSS3 参考手册和代码生成工具" src="https://simg.open-open.com/show/cc4c43e2064a6b67b9a3cd456c1e4299.jpg" width="500" height="250" /></p> <p> <strong>6. <a href="/misc/goto?guid=4958323053586155107" target="_blank">LayerStyles</a></strong></p> <p> 如果你熟悉 Adobe Photoshop，你会发现这个工具非常好用。</p> <p style="text-align:center;"><img alt="实用的 CSS3 参考手册和代码生成工具" src="https://simg.open-open.com/show/d5ebe592f31ddc1c01b8c68f4e627961.jpg" width="500" height="250" /></p> <p> <strong>7. <a href="/misc/goto?guid=4958327125852074802" target="_blank">CSSWarp</a></strong></p> <p> 自动生成路径文本的 CSS 代码。</p> <p style="text-align:center;"><img alt="实用的 CSS3 参考手册和代码生成工具" src="https://simg.open-open.com/show/f39163460b57007f0b44c827b20d910c.jpg" width="500" height="250" /></p> <p> <strong>8. <a href="/misc/goto?guid=4958319093572770936" target="_blank">Font Squirrel</a></strong></p> <p> 生成 woff、svg、eot 和 ttf 格式的字体，并在 CSS 中使用。</p> <p style="text-align:center;"><img alt="实用的 CSS3 参考手册和代码生成工具" src="https://simg.open-open.com/show/462abacdf403738a4faa3baf0518be74.jpg" width="500" height="250" /></p> <p> <strong>9. <a href="/misc/goto?guid=4958327127446213953" target="_blank">CSS3 Maker</a></strong></p> <p> 强大的 CSS3 代码生成器。</p> <p style="text-align:center;"><img alt="实用的 CSS3 参考手册和代码生成工具" src="https://simg.open-open.com/show/356174007b662eb5c3483561f2a4c85a.jpg" width="500" height="250" /></p> <p> <strong>10. <a href="/misc/goto?guid=4958344933342702695" target="_blank">CSS3 Tool</a></strong></p> <p> 各种 CSS3 代码生成工具集合。</p> <p style="text-align:center;"><img alt="实用的 CSS3 参考手册和代码生成工具" src="https://simg.open-open.com/show/ee1e262007f7dcc91c30d555981a29ce.jpg" width="500" height="250" /></p> <div id="come_from"> 来自: <a id="link_source2" href="/misc/goto?guid=4958344934136959207" target="_blank">www.iteye.com</a> </div>