Below, you will find:
- Expert Guidance
- Books & Reference
- CSS: Animation ・ Effects ・ Frameworks ・ Grid Systems
- Design: Colors & Patterns ・ Icons & Fonts ・ Responsive Web Design
- Tools: Code Playgrounds ・ CSS Preprocessors ・ Image Editors ・ Interactive Mockups ・ Vector Graphics Editors
These sites are the best of the best at providing compelling, current content on design and CSS coding.
These resources are more static in nature and provide a great foundation for your CSS learning.
Mozilla Developer Network (MDN)
- Learn CSS layout
- A Beginner’s Guide to HTML & CSS
- An Advanced Guide to HTML & CSS
- CSS Programming
- Field Guide
- Google Style Guide
- Scalable and Modular Architecture for CSS
Animation, transitions, and motion effects have become essential for an effective user experience.
Techniques used to achieve various visual effects using CSS.
- 3d Ribbons
- Accordion with CSS3
- CSS3 Patterns Library
- Custom Forms
- Image Content Slider
- Item Blur Effect
- reveal.js
- Rotating Billboard
- Shiny Knobs
- Text on a Circle
Front-end frameworks allow you to style and layout your UI's more efficiently.
- Bootstrap
- also useful: Bootswatch)
Grids allow you to split your screen up into blocks, similar to newspapers, allowing you to more easily control layout.
- Designing With Grid-Based Approach
- Don't Overthink It Grids
- Grid CSS layouts. Tell me the reasons to not use
An effective color palette can enhance the appeal of your site or app.
Using icon fonts in today's world of varying screen sizes and resolutions is a very effective technique.
- Beautiful web type
- Creating and Using a Custom Icon Font
- Icon Fonts Are Awesome
- Why And How To Use Icon Fonts
RWD is without a doubt one of the most overused, overhyped, and overloaded buzzwords in the history of the web. That being said, it remains a solid design technique for many situations.
- Cross Device Tutorial
- Density Converter
- Fluid grids, orientation & resolution independence
- Hardboiled CSS3 Media Queries
- How to Approach a Responsive Design
- Media Queries for Standard Devices
- Media Queries
- Multi-Device Layout Patterns
- Responsive Data Table Roundup
- Responsive Navigation Patterns
- Responsive Wireframes
- Simple Responsive Device Diagram
- The Goldilocks Approach
- Use CSS transitions to link Media Queries and JavaScript
If you want to have a sandbox, where you can play around with your latest CSS ideas and tests, these resources will give you what you need. Make changes to your changes in your code and instantly see the results, all within your browser.
Preprocessors save you time and make your CSS code more manageable through the use of variables, mix-in's (reusable groups of styles), and many other constructs. The preprocessing "language" is a superset of CSS and compiles into pure CSS for deployment.
These tools are a must have for any graphic designer. They are essential for creating app icons, backgrounds, or nearly any other graphic resource.
While static images have their place, they are just not enough to convey user interactions, and things like animation. This is where interactive mockups can help get the point across.
- Keynote with templates:
These tools seem to be more relevent now than ever. Due to the increase in the variation of screen size, resolutions, and pixel densities, more and more products require the use of scalable vector graphics. These tools are used to create such graphics.