CSS Tools, Resources And Templates:
CSS menus, generators, CSS debuggers, templates and CSS tutorials.


Create CSS Animations on the Fly

  • Posted By: Jason Taetsch
  • ...

CSS animations are lightweight and smooth, and thanks to the death of Internet Explorer 6 they are now widely accessible in most modern browsers. While most designers are likely familiar with the basic transitions and animations, the CCS3 standard includes features for much more advanced animations that can provide visual impact without drastically increasing load times.  The team at Stylie created a useful tool to quickly create CSS animations on the fly and grab the necessary CSS rules to implement the animations in your next project.  As always check with your projects analytics to verify that the majority of users can take advantage of the new animations, if not, you’ll want to include a fallback to make sure every user has a similar experience.

style_featured

CSS3 Animations Library

  • Posted By: Jason Taetsch
  • ...

Hardware accelerated animations provided in the CSS3 standards are a smooth and lightweight alternate to JavaScript powered animations. However the triggers for CSS animations are limited compared to events in Javascript or jQuery, and they cannot be stacked or utilize callbacks.  Thanks to you can now have much more control over your CSS animations. The animo.js tool by Big Room Studios provides capabilities to manage CSS animations like never before. The library includes features to stack animations, blur text, set callbacks and control trigger events for CSS animations. Animo.js relies on the animate.css library to power the magic behind the animations and is dependent on jQuery 2 or later.

animojs

Marx Stylish CSS Reset

  • Posted By: Jason Taetsch
  • ...

CSS reset rules have been around for years, helping designers to restore the baseline styles that pesky browser’s like to apply across the board. The is a raw CSS based reset stylesheet that doesn’t rely on scripting or classes to get the job done. It is a lightweight and simple reset, best suited for projects that do not rely on attribute-heavy frameworks. Author Matthew Blode took care to ensure that base styles included clean typography and are fully responsive as well as mobile friendly.  By avoiding the use of classes, the stylesheet is ready to be included directly with little customisation needed to bring the clean style rules to your next project.

marx

Select or Die

  • Posted By: Jason Taetsch
  • ...

The design is in the details. Unfortunately designers are often forced to hand over the reigns to the native browser presets for “select” and “option” elements. The Select or Die plugin is a highly configurable jQuery-based option for taking the stylistic reigns back from the clunky browser style rules. Select or Die attaches custom CSS attributes to easily roll your own style rules as you would any other HTML5 element. Additional features make it easy to configure placeholders for the select elements, apply unique styles to different elements and even treat the various options in the drop-down menu as external links to other pages. If you are looking for more control of your design, Select or Die is a great place to start.

selectordie

 

Local Font

  • Posted By: Jason Taetsch
  • ...

The wonderful world of fonts has truly turned the world wide web into a much more visually appealing place. The widespread use of fancy display fonts does come with a view downsides however, largely on the performance end. The localFont tool created by Jamie Caballero uses local storage functions to store the CSS for @font-face declarations.  The tool saves the font files as part of the CSS file allowing them to be accessed much faster than typical caching techniques. Browser support for the caching goes back to IE 8+ so you can feel comfortable using it on sites that don’t require legacy support.

localfont