The web developer resource, CSS Flow (Figure A), created by the French developer Thibaut Courouble, includes a compilation of open-source code snippets including web UI elements, complete UI kits, and widgets which are coded with HTML5, CSS3, and Sass/SCSS. Since the source code is registered under an MIT License, the only requirement is that you need to keep the copyright notice and license information within the source code when you use it for your websites and repositories. Several of the CSS code snippets are reviewed below. Figure AFlip-down Clock snippet (Figure B) has the example countdown time of 42 minutes 8 seconds hard coded into the HTML and the styling looks great, but for you to get it into a functional state, you will need to find a script or code for counting down. This is not that hard to incorporate, in fact, Tripwire has a good article on 25 Cool jQuery Countdown Scripts, which would allow you to manipulate the styles to match the particular countdown script.
The Flip-down Clock code snippet has been tested with success in Firefox 4, Safari 4, Chrome 14, Opera 10, and IE 9.Multicolored Push Buttons is a set of CSS-generated buttons with cool active states, and a generator is included in the Sass source, which allows you to create button styles from a single input color. The CSS also includes several @media screen states for 800px and 400px breakpoints, and also uses several CSS3 styles such as box shadow, border radius, and linear gradients to create the effects as displayed in Figure C.
The Multi-colored Push Buttons have been tested with success in Firefox 4, Safari 4, Chrome 13, Opera 10, and IE 8.Notepaper Blockquote includes properties such as radial gradient, repeating linear gradients, transforms, and some before/after settings for the larger quotes. A portion of the demo page highlighting the effect is shown in Figure D. The snippet also has flexible width and height settings and degrades well in older browsers. The Notepaper Blockquote code has been tested with success in Firefox 4, Safari 4, Chrome 13, Opera 10, and IE 6.
The UI kits range in price from $9 to $19 each, or can all five be purchased for $39.
While several of the CSS code snippets provided by CSS Flow will require some added scripting and coding to get them fully functioning as parts of your existing or new code, the snippets do afford a great starting point for specific requirements you may have in your web development efforts.
Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal government.