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


Loaders.css

  • Posted By: Jason Taetsch
  • ...

CSS animations are smooth, native to modern browsers and fast-loading. With so many upsides they are a ripe solution to replace clunky GIFs and script based animations that often require additional libraries and struggle to provide a smooth experience across platforms. by Conner Atherton is a set of performance based animations to keep users engaged while the content on your page is served to their browser.  CSS-based animations provide a far better experience than typical jQuery or Javascript without the typical jumps and quirks associated with translating elements across the page.

CSS Reference

  • Posted By: Jason Taetsch
  • ...

Web languages are expansive by default, its nearly impossible to have the ins and outs of an entire language at the top of your mind everyday.  Every designer needs a handy reference tool at their disposal to quickly resolve any simple hangups that can so often delay a design project. The ever helpful team at codrops have created this simple and elegant reference chart of important CSS properties that you may have forgotten. The CSS Reference breaks down the CSS properties into six major categories: pseudo-class, property, function, data type, concept and @rule with import details for each item on the reference complete with illustrated examples to further boost your understanding of CSS.

CSS_reference

Hover CSS

  • Posted By: Jason Taetsch
  • ...

CSS3 transitions and animations provide lightweight and smooth animations that enhance user elements and the visual feel of a webpage. Hover.css by Ian Lunn provides over 100 dynamic effects that extends the traditional CSS hover effects including glow transitions, speech bubbles, page curls and many others. The effects are ready to use on nearly any element such as links and buttons or SVG grapphics and images. For the more advanced deployment, the collection is available for vanilla CSS, SASS and LESS.  Hover.css will work great across modern browser environments but not in Internet Explorer 8 and below.

Hovercss

CSS Stats

  • Posted By: Jason Taetsch
  • ...

Think your CSS skills are on par with the titans of the tech industry? CSS Stats can provide some impartial insight into the matter. The CSS Stats tool by Mrmrs & Jxnblk  parses the CSS of a site to tally the number of total rules, selectors, declarations and colors used to deliver the front-end experience to a user. It provides a quick snapshot of total vs. unique declarations and other important factors to assess the overall health and maintainability of your code. CSS Stats also has quick links to some of the most-visited sites on the Internet to compare how your codebase matches up against industry benchmarks.

CSS_Stats

Material Palette

  • Posted By: Jason Taetsch
  • ...

With the ever increasing resolution of screens and monitor sizes the visual aspects of a web design has never been more important. Fortunately there are a number of tools available to make the task of creating an impressive color scheme even easier. The Material Palette from Matthieu Aussaguel creates a custom palette for web design and other projects based on a selection of flat colors chosen by the user. The Material Palette coordinates appropriate primary and secondary text colors, suggested divider colors as well as the primary colors of the design and any hues that would work nicely as accents.

materialpallette