30个非常棒的CSS开发工具和应用
openkk 12年前
<h2>1. Metro UI CSS : A Framework for Windows-8 Like Interface </h2> <p><a href="https://simg.open-open.com/show/3f4b081ad686f176b3e35a3b39a091dd.jpg"><img class="aligncenter size-full wp-image-11762" title="metro_ui_css" alt="30个非常棒的CSS开发工具和应用" src="https://simg.open-open.com/show/3f4b081ad686f176b3e35a3b39a091dd.jpg" width="530" height="293" /></a><br /> Metro UI CSS is a set of styles for creating such interfaces. It is a self-contained solution but can also be used side-by-side with any other frameworks. There are styles for the popular tiles, images, notices, forms, buttons and typography. The framework is also a “work in progress” and is mentioned to be enriched with more layout options + features.<br /> <br /> <a class="buttons btn_dark right" href="/misc/goto?guid=4958522692056460558" target="_blank"><span class="left">Download </span></a><br /> </p> <h2>2. CSScomb : Sort CSS Properties in a Given Order </h2> <p><a href="https://simg.open-open.com/show/c7fe3f305ed4250261cb8aae5904eb33.jpg"><img class="aligncenter size-full wp-image-11763" title="csscomb" alt="30个非常棒的CSS开发工具和应用" src="https://simg.open-open.com/show/c7fe3f305ed4250261cb8aae5904eb33.jpg" width="530" height="278" /></a><br /> CSScomb, a free service sorts CSS properties in any order you want (and, their default order is pretty good too -from the most to least important-). It works with both single + multi-line CSS code and besides the online version, there are add-ons provided for the most popular IDEs.<br /> <br /> <a class="buttons btn_dark right" href="/misc/goto?guid=4958522636819312687" target="_blank"><span class="left">Download </span></a><br /> </p> <h2>3. CSS3Ps : Convert Your Photoshop Layers into CSS3 Styles </h2> <p><a href="https://simg.open-open.com/show/56a0af1837e64177ab4f33905e3cc2ce.jpg"><img class="aligncenter size-full wp-image-11764" title="css3ps" alt="30个非常棒的CSS开发工具和应用" src="https://simg.open-open.com/show/56a0af1837e64177ab4f33905e3cc2ce.jpg" width="530" height="313" /></a><br /> CSS3Ps is free cloud based photoshop plugin that converts your layers to CSS3. You can select several layers and groups of layers and convert them in one click. Stroke is converted into CSS border property. Inner Shadow, Inner Glow, Drop Shadow, Outer Glow are converted into CSS box-shadow property. You can see the result styles in browser and share them with other people. It works on Windows or Mac OS X and Photoshop CS3 and later. And best of all, it’s absolutely free!<br /> <br /> <a class="buttons btn_dark right" href="/misc/goto?guid=4958522692209443549" target="_blank"><span class="left">Download </span></a><br /> </p> <h2>4. ResponsiveAeon : CSS3 Grid System Framework </h2> <p><a href="https://simg.open-open.com/show/3a1be7fa2012cff90b5f144c0fe2e66b.jpg"><img class="aligncenter size-full wp-image-11765" title="responsiveaeon" alt="30个非常棒的CSS开发工具和应用" src="https://simg.open-open.com/show/3a1be7fa2012cff90b5f144c0fe2e66b.jpg" width="530" height="223" /></a><br /> ResponsiveAeon is a HTML5/CSS3-powered framework for creating responsive layouts very quickly. It has a grid system that is based on 12 columns with 1104px width in total and offers a very easy to understand usage with only 3 basic classes. The framework makes use of @mediaqueries and can work with any device in any size. Besides the grid system, there are also styles for typography, lists, tables, buttons and forms. The download package includes several JavaScript files for IE compatibility, modal boxes and also PSD/AI/PNG files of the grid.<br /> <br /> <a class="buttons btn_dark right" href="/misc/goto?guid=4958521908063664010" target="_blank"><span class="left">Download </span></a><br /> </p> <h2>5. RefineSlide : Responsive Image Slider with CSS3 Effects</h2> <p><a href="https://simg.open-open.com/show/b50647c48429b837ca2ef8d6c39bd2ce.jpg"><img class="aligncenter size-full wp-image-11766" title="refineslide" alt="30个非常棒的CSS开发工具和应用" src="https://simg.open-open.com/show/b50647c48429b837ca2ef8d6c39bd2ce.jpg" width="530" height="452" /></a><br /> RefineSlide is a lightweight (4kb zipped) jQuery plugin for quickly integrating a responsive, image-based slider into our websites. The slider uses CSS3 transitions + 3D transforms (has JS fallback) and has a bunch of attractive transitions. It has an option to display thumbnails (auto-formatted and responsive) or arrows as the navigation (and, there is keyboard support as well).<br /> <br /> <a class="buttons btn_dark right" href="/misc/goto?guid=4958346887528756533" target="_blank"><span class="left">Download </span></a><br /> </p> <h2>6. Photon : A CSS 3D Lighting Engine </h2> <p><a href="https://simg.open-open.com/show/1690eea081c46e71474a3b83748fe4b5.jpg"><img class="aligncenter size-full wp-image-11767" title="photon" alt="30个非常棒的CSS开发工具和应用" src="https://simg.open-open.com/show/1690eea081c46e71474a3b83748fe4b5.jpg" width="530" height="385" /></a><br /> Photon is a JavaScript library which can add simple lighting effects to any element in the 3D space. In order to create the effect, it uses the WebKitCSSMatrix object (WebKit is the only supported browser engine). The angle of the light can be defined and changed anytime with the provided functions. It is possible to define the objects to be lighted one-by-one or group them at once and we can customize the effect by setting the max black + white usage.<br /> <br /> <a class="buttons btn_dark right" href="/misc/goto?guid=4958346891307100925" target="_blank"><span class="left">Download </span></a><br /> </p> <h2>7. Gridpak </h2> <p><a href="https://simg.open-open.com/show/c39e8b0fd0f1a5e59ce6beba91ee11c1.jpg"><img class="aligncenter size-full wp-image-11768" title="gridpak" alt="30个非常棒的CSS开发工具和应用" src="https://simg.open-open.com/show/c39e8b0fd0f1a5e59ce6beba91ee11c1.jpg" width="530" height="343" /></a><br /> Gridpak is the starting point for your responsive projects, improving your workflow and saving time. Create your responsive grid system once using the simple interface and let Gridpak do the heavy lifting by generating PNGs, CSS and JavaScript.<br /> The CSS that Gridpak generates is compatible with IE 8+, however it makes use of some more experimental CSS properties such as the media query, box-sizing and background-clip properties so we suggest using it in conjunction with a library such as Modernizer to ensure backwards compatibility.<br /> <br /> <a class="buttons btn_dark right" href="/misc/goto?guid=4958522692423126591" target="_blank"><span class="left">Download </span></a><br /> </p> <h2>8. Morf.js : Custom Easing Functions for CSS3 Transition </h2> <p><a href="https://simg.open-open.com/show/6ae019ad3b1ea56a79cc67438d53d137.jpg"><img class="aligncenter size-full wp-image-11769" title="morf_js" alt="30个非常棒的CSS开发工具和应用" src="https://simg.open-open.com/show/6ae019ad3b1ea56a79cc67438d53d137.jpg" width="530" height="339" /></a><br /> Morf.js, is a Javascript work-around for hardware accelerated CSS3 transitions with custom easing functions including bounce, spring, elastic and much more. Once an easing function is triggered through JavaScript, it is created using webkit-keyframes. The library uses Shifty.js for twining regular CSS properties and it is WebKit only.<br /> <br /> <a class="buttons btn_dark right" href="/misc/goto?guid=4958340510466798854" target="_blank"><span class="left">Download </span></a><br /> </p> <h2>9. Gumby : Responsive CSS Framework with Web UI Kit </h2> <p><a href="https://simg.open-open.com/show/40774b3e500ba0e3129c2b1fe7dcfca3.jpg"><img class="aligncenter size-full wp-image-11770" title="gumby" alt="30个非常棒的CSS开发工具和应用" src="https://simg.open-open.com/show/40774b3e500ba0e3129c2b1fe7dcfca3.jpg" width="530" height="123" /></a><br /> Gumby is a responsive and 960px-grid CSS grid framework that can be customized to work in every resolution with almost no effort. Its fluid-fixed layout self-optimizes the content for desktop, tablet and mobile resolutions and there is support for nested grids. Similar to 推ter Bootstrap, it includes a web UI Kit of good looking buttons, forms, navigation + tabs and a tiny JavaScript file that brings these components to life. Gumby has multiple versions to download: 12 columns, 16 columns, a hybrid one or an all-in-one package. And, there are PSD files provided to ease designing with the grid.<br /> <br /> <a class="buttons btn_dark right" href="/misc/goto?guid=4958340851830049814" target="_blank"><span class="left">Download </span></a><br /> </p> <h2>10. App JS : Create Desktop Apps with HTML-CSS-JS </h2> <p><a href="https://simg.open-open.com/show/360ec27fdeab8f38afd8706357d63cdc.jpg"><img class="aligncenter size-full wp-image-11771" title="appjs" alt="30个非常棒的CSS开发工具和应用" src="https://simg.open-open.com/show/360ec27fdeab8f38afd8706357d63cdc.jpg" width="530" height="176" /></a><br /> AppJS is an exciting resource that allows us to develop desktop apps using web technologies (HTML, CSS and JavaScript). AppJS is an exciting resource that allows us to develop desktop apps using web technologies (HTML, CSS and JavaScript).<br /> <br /> <a class="buttons btn_dark right" href="/misc/goto?guid=4958522692613126986" target="_blank"><span class="left">Download </span></a><br /> </p> <h2>11 Browser Support : CSS Browser Compatibility Search Engine </h2> <p><a href="https://simg.open-open.com/show/b5a6b2f265cff8c6aa46d0364bcf0125.jpg"><img class="aligncenter size-full wp-image-11772" title="browser_support" alt="30个非常棒的CSS开发工具和应用" src="https://simg.open-open.com/show/b5a6b2f265cff8c6aa46d0364bcf0125.jpg" width="530" height="311" /></a><br /> Browser Support is a simple search engine to find out which CSS properties are supported in which browsers. With an auto-complete-powered search, it displays you all possible properties while typing and brings the results for all major browsers(Chrome, Safari, Firefox, IE, Opera).<br /> <br /> <a class="buttons btn_dark right" href="/misc/goto?guid=4958522692707769774" target="_blank"><span class="left">Download </span></a><br /> </p> <h2>12. Sprite Pad : Create CSS Sprites within Seconds </h2> <p><a href="https://simg.open-open.com/show/9e99e41d2bed1d6243e2987895b552b2.jpg"><img class="aligncenter size-full wp-image-11773" title="sprite-pad-2" alt="30个非常棒的CSS开发工具和应用" src="https://simg.open-open.com/show/9e99e41d2bed1d6243e2987895b552b2.jpg" width="530" height="341" /></a><br /> SpritePad is the perfect solution for every web developer: With SpritePad you can create your CSS sprites within seconds. Simply drag & drop your images onto the canvas and have them immediately available as one PNG sprite + CSS code. No fiddling in Photoshop, no manual assignment of CSS styles. CSS sprites the easy way.<br /> SpritePad is optimized for speeeeed: No download, no setup, no long-winded uploads. It works hassle-free directly in your browser. Move your images around, change options and let the CSS styles get updated automatically. No need to do work twice again.<br /> <br /> <a class="buttons btn_dark right" href="/misc/goto?guid=4958340824004497462" target="_blank"><span class="left">Download </span></a><br /> </p> <h2>13. HTML5 Please </h2> <p><a href="https://simg.open-open.com/show/62ea28f8e06d7a4189fa40e54ec094d9.jpg"><img class="aligncenter size-full wp-image-11774" title="html5-please" alt="30个非常棒的CSS开发工具和应用" src="https://simg.open-open.com/show/62ea28f8e06d7a4189fa40e54ec094d9.jpg" width="530" height="367" /></a><br /> HTML5 Please helps you look up HTML5, CSS3, etc features, know if they are ready for use, and if so find out how you should use them – with polyfills, fallbacks or as they are. So that,you can decide if and how to put each of these features to use.<br /> The recommendations represent the collective knowledge of developers who have been deep in the HTML5 trenches. If you think the recommendation is incorrect, you can edit the recommendation for each feature and send a pull request as well.<br /> <br /> <a class="buttons btn_dark right" href="/misc/goto?guid=4958340824004497462" target="_blank"><span class="left">Download </span></a><br /> </p> <h2>14. JS Bin : Handy Online Editor for JavaScript and CSS </h2> <p><a href="https://simg.open-open.com/show/8ed5b5fd20aab43da2d530d3459c4e19.jpg"><img class="aligncenter size-full wp-image-11775" title="js-bin" alt="30个非常棒的CSS开发工具和应用" src="https://simg.open-open.com/show/8ed5b5fd20aab43da2d530d3459c4e19.jpg" width="530" height="273" /></a><br /> JS Bin is a webapp specifically designed to help JavaScript and CSS folk test snippets of code, within some context, and debug the code collaboratively. JS Bin allows you to edit and test<br /> JavaScript and HTML. Once you’re happy you can save, and send the URL to a peer for review or help. They can then make further changes saving anew if required.<br /> <br /> <a class="buttons btn_dark right" href="/misc/goto?guid=4958522692862213595" target="_blank"><span class="left">Download </span></a><br /> </p> <h2>15. Animate.CSS </h2> <p><a href="https://simg.open-open.com/show/2c5b8fc83ba61874b91e81207a0c9352.jpg"><img class="aligncenter size-full wp-image-11776" title="css-animation" alt="30个非常棒的CSS开发工具和应用" src="https://simg.open-open.com/show/2c5b8fc83ba61874b91e81207a0c9352.jpg" width="530" height="276" /></a><br /> Animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. To use them in your project, simply add the class to the element, or call the animation yourself in your CSS file. The classes and the animations have the same name.<br /> CSS animations are supported in Apple Safari, Google Chrome, and Mozilla Firefox. Microsoft have also promised support for Internet Explorer 10, and support has been announced for Opera 12.<br /> <br /> <a class="buttons btn_dark right" href="/misc/goto?guid=4958194042125578933" target="_blank"><span class="left">Download </span></a><br /> </p> <h2>16. Excessive : Remove Your bloat</h2> <p><a href="/misc/goto?guid=4958522692987226650" rel="attachment wp-att-8873"><img class="alignleft size-full wp-image-8873" title="Excessive" alt="30个非常棒的CSS开发工具和应用" src="https://simg.open-open.com/show/edee77919aba74ad1eb14d02e7e82e65.jpg" width="530" height="330" /></a><br /> Excessive is a free-to-use CSS compressor where you can drag ‘n’ drop any number of files and they will be compressed instantly. The application merges all files into a single one and enables you to reorder the files (so as the output) again with drag ‘n’ drops.<br /> <br /> <a class="buttons btn_dark right" href="/misc/goto?guid=4958522693071664425" target="_blank"><span class="left">Download </span></a><br /> </p> <h2>17. CSS Refresh</h2> <p><a href="/misc/goto?guid=4958522693164137366" rel="attachment wp-att-8872"><img class="alignleft size-full wp-image-8872" title="cssrefresh" alt="30个非常棒的CSS开发工具和应用" src="https://simg.open-open.com/show/82e78b5b5b54bc610c4baf033f5e37ca.jpg" width="530" height="330" /></a><br /> CSSrefresh is a JavaScript file which automizes this process by instantly applying the new styles without refreshing the page. It is a plug ‘n’ play solution and nothing to configure. Just insert the JavaScript file into the web pages and you are ready to go.<br /> <br /> <a class="buttons btn_dark right" href="/misc/goto?guid=4958522693249567974" target="_blank"><span class="left">Download </span></a><br /> </p> <h2>18. Impress.js : A CSS3 Powered Framework</h2> <p><a href="/misc/goto?guid=4958522693339952681" rel="attachment wp-att-8871"><img class="alignleft size-full wp-image-8871" title="impress_js" alt="30个非常棒的CSS开发工具和应用" src="https://simg.open-open.com/show/d53c362bebc5e956e0f5aad22a81422d.jpg" width="530" height="330" /></a><br /> Impress.js- which enables us to build very beautiful slides presentations. Slides can be by positioned, rotated and scaled on an infinite canvas with zoom in/out and 3D effects by making use of CSS3 transforms and transitions to create the awesomeness (which makes it only compatible with WebKit and the latest Firefox + IE browsers).<br /> <br /> <a class="buttons btn_dark right" href="/misc/goto?guid=4958522693427410315" target="_blank"><span class="left">Download </span></a><br /> </p> <h2>19. Bear CSS</h2> <p><a href="/misc/goto?guid=4958522693510950319" rel="attachment wp-att-8870"><img class="alignleft size-full wp-image-8870" title="Bear CSS" alt="30个非常棒的CSS开发工具和应用" src="https://simg.open-open.com/show/1f2232e1f73985554d0a1bff370cc25f.jpg" width="530" height="330" /></a><br /> Bear CSS is a free-to-use web application that generates a stylesheet with all the elements, ids and classes from a given HTML file. The app is mostly useful for those projects that use long HTML codes and it would be better if Bear CSS had asked which items to include inside the stylesheet just after the upload -feature request.<br /> <br /> <a class="buttons btn_dark right" href="/misc/goto?guid=4958340819226818094" target="_blank"><span class="left">Download </span></a><br /> </p> <h2>20. Less</h2> <p><a href="/misc/goto?guid=4958522693623912767" rel="attachment wp-att-8868"><img class="alignleft size-full wp-image-8868" title="Less" alt="30个非常棒的CSS开发工具和应用" src="https://simg.open-open.com/show/d05679051c6a0560457a16539627397c.jpg" width="530" height="330" /></a><br /> LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions. LESS runs on both the client-side (Chrome, Safari, Firefox) and server-side, with Node.js and Rhino.<br /> <br /> <a class="buttons btn_dark right" href="/misc/goto?guid=4958522693708939997" target="_blank"><span class="left">Download </span></a><br /> </p> <h2>21. CSS2Less</h2> <p><a href="/misc/goto?guid=4958522693802489819" rel="attachment wp-att-8855"><img class="alignleft size-full wp-image-8855" title="CSS2Less" alt="30个非常棒的CSS开发工具和应用" src="https://simg.open-open.com/show/247e63e7fa1f5eb797bdfe4a6dc98681.jpg" width="530" height="330" /></a><br /> It is a web-based tool for converting CSS files into LESS by simply copy-pasting the styles.<br /> The tool uses the <a href="/misc/goto?guid=4958522693895618743" target="_new">css2less Ruby library</a> in the backend and its website is open sourced for anyone willing to host it themselves<br /> <br /> <a class="buttons btn_dark right" href="/misc/goto?guid=4958522693974728350" target="_blank"><span class="left">Download </span></a><br /> </p> <h2>22. Responsive Grid System : Fluid grid CSS Framework</h2> <p><a href="/misc/goto?guid=4958522694071327151" rel="attachment wp-att-8856"><img class="alignleft size-full wp-image-8856" title="Responsive Grid system" alt="30个非常棒的CSS开发工具和应用" src="https://simg.open-open.com/show/d16dc8ce2480ea071963fcb0a58839a7.jpg" width="530" height="330" /></a><br /> Responsive GS is a fluid grid CSS framework for developing responsive websites quickly.<br /> It has 3 flavors: 12, 16 and 24 columns with media queries for all standard devices, an optional reset and clearfix. The styles for the grid, media queries, reset and IE-specific ones are smartly separated into different CSS files so we can use only what is needed.<br /> <br /> <a class="buttons btn_dark right" href="/misc/goto?guid=4958522694164173152" target="_blank"><span class="left">Download </span></a><br /> </p> <h2>23. CSS3 Shapes</h2> <p><a href="/misc/goto?guid=4958522694248707775" rel="attachment wp-att-8857"><img class="alignleft size-full wp-image-8857" title="CSS3Shapes" alt="30个非常棒的CSS开发工具和应用" src="https://simg.open-open.com/show/e7d481158c965ddbef26c28cd4ca30b5.jpg" width="530" height="330" /></a><br /> CSS3 Shapes is a project that shares the styles for many different shapes including triangle, diamond, star, comment bubble, egg, heart and more. CSS3′s properties enable us to create many different shapes by styling a single element. For sure, not all of them are functional for daily use but they are definitely good for inspiration and improving your CSS(3) skills.<br /> <br /> <a class="buttons btn_dark right" href="/misc/goto?guid=4958329947198990112" target="_blank"><span class="left">Download </span></a><br /> </p> <h2>24. CSS Arrow Please</h2> <p><a href="/misc/goto?guid=4958522694373157356" rel="attachment wp-att-8858"><img class="alignleft size-full wp-image-8858" title="CssArrowPlease" alt="30个非常棒的CSS开发工具和应用" src="https://simg.open-open.com/show/d6660f76ce8b93d19f84cb7ed004dce9.jpg" width="530" height="330" /></a><br /> There are several web-based generators are available for everything such as stripes, buttons, forms, loader icons, etc. CSS Arrow Please focuses on another niche; yes, totally CSS-based (no images) arrows.<br /> This CSS trick is useful in creating tooltips, the generator offers multiple options for customization (the position, color and border values) and auto-creates the related CSS code.<br /> <br /> <a class="buttons btn_dark right" href="/misc/goto?guid=4958522694464486217" target="_blank"><span class="left">Download </span></a><br /> </p> <h2>25. WebPutty : CSS Editing & Hosting Service</h2> <p><a href="/misc/goto?guid=4958522694546376986" rel="attachment wp-att-8859"><img class="alignleft size-full wp-image-8859" title="WebPutty" alt="30个非常棒的CSS开发工具和应用" src="https://simg.open-open.com/show/949e3c610db98037ba2b9f7314e3d9a0.jpg" width="530" height="330" /></a><br /> WebPutty is an application that allows you to write CSS code with an online, feature-rich, syntax-highlighted editor and lets you see the changes in real-time with a side-by-side preview panel.<br /> you can host any number of CSS files under a single account. The CSS file is hosted by the service so that any changes made are instantly reflected to the live website. WebPutty was a free hosted service and it is now open sourced so that anyone can create their own instances and edit/manage CSS files of multiple projects from a single location.<br /> <br /> <a class="buttons btn_dark right" href="/misc/goto?guid=4958522637303757883" target="_blank"><span class="left">Download </span></a><br /> </p> <h2>26. CSSFx.js</h2> <p><a href="/misc/goto?guid=4958522694669526372" rel="attachment wp-att-8860"><img class="alignleft size-full wp-image-8860" title="CSSFx" alt="30个非常棒的CSS开发工具和应用" src="https://simg.open-open.com/show/de9cc1d6263060bbb26e425245f1f655.jpg" width="530" height="330" /></a><br /> cssFx is a JavaScript file (weights 2.5kb) that creates vendor-specific CSS3 properties required for old and new browsers on the client-side. It has support for most of the CSS3 properties and works with the majority of browsers (including IE6).<br /> <br /> <a class="buttons btn_dark right" href="/misc/goto?guid=4958522694746671143" target="_blank"><span class="left">Download </span></a><br /> </p> <h2>27. SpritePad : Easy Way to Create CSS Sprites</h2> <p><a href="/misc/goto?guid=4958522694841162897" rel="attachment wp-att-8861"><img class="alignleft size-full wp-image-8861" title="SpritePad" alt="30个非常棒的CSS开发工具和应用" src="https://simg.open-open.com/show/f2df4c8adac065ba7e47966cc9745970.jpg" width="530" height="330" /></a><br /> SpritePad is an impressive, free web application that allows you to drag ‘n’ drop any number of images to a canvas, position them how you want and get the auto-generated CSS rules. Once you arranged all the items, SpritePad provides us a .zip file which consists of the sprite image + CSS rules also the canvas size can be customized and/or can be shrinked to fit the document with a click. There is a premium version is also available for the users with several other handy features.<br /> <br /> <a class="buttons btn_dark right" href="/misc/goto?guid=4958522694948232312" target="_blank"><span class="left">Download </span></a><br /> </p> <h2>28. Dirty Markup : Beautify Your HTML, CSS & JavaScript Codes</h2> <p><a href="/misc/goto?guid=4958522695037373228" rel="attachment wp-att-8862"><img class="alignleft size-full wp-image-8862" title="dirty_markup" alt="30个非常棒的CSS开发工具和应用" src="https://simg.open-open.com/show/48aa485b0620c42a705dd84afbd27e25.jpg" width="530" height="330" /></a><br /> Dirty Markup is a free web-based application that helps you to easily clean messy codes. The editor uses a simple + functional AceEditor and there are multiple options for each beautifier to get the best results. It has support for HTML(5), CSS and JavaScript by combining the powers of the popular HTML Tidy, CSS Tidy and JS Beautify.<br /> <br /> <a class="buttons btn_dark right" href="/misc/goto?guid=4958522695128498353" target="_blank"><span class="left">Download </span></a><br /> </p> <h2>29. Crunch : Less Editor & Compiler</h2> <p><a href="/misc/goto?guid=4958522695223237280" rel="attachment wp-att-8867"><img class="alignleft size-full wp-image-8867" title="Crunch" alt="30个非常棒的CSS开发工具和应用" src="https://simg.open-open.com/show/1fe395afd039871d992d1b55f1f168f2.jpg" width="530" height="330" /></a><br /> Crunch is a free CSS/LESS editor with syntax highlighting and multi-tab support application that eases the compiling part without the need of command-line but via a user-friendly interface. Once a LESS file is saved, the CSS version is created automatically (which is handy for anyone willing to develop with LESS but don’t want to rely on JavaScript on the client-side).<br /> <br /> <a class="buttons btn_dark right" href="/misc/goto?guid=4958522695306706699" target="_blank"><span class="left">Download </span></a><br /> </p> <h2>30. CSS3 Test</h2> <p><a href="/misc/goto?guid=4958522695392021106" rel="attachment wp-att-8869"><img class="alignleft size-full wp-image-8869" title="css3_test" alt="30个非常棒的CSS开发工具和应用" src="https://simg.open-open.com/show/a038ac8b09dfc9e1f79e3fb7000fc219.jpg" width="530" height="330" /></a><br /> The CSS3 Test is a web-based test suite for finding out which CSS3 properties are supported by the browser being used. It tests several features like backgrounds/borders, transitions, media queries, fonts, animations and much more. It runs multiple test cases on each element and this can be displayed by simply clicking to items.<br /> <br /> <a class="buttons btn_dark right" href="/misc/goto?guid=4958522695481067155" target="_blank"><span class="left">Download </span></a><br /> </p>