Difference between revisions of "Category:Cascading Style Sheets"

From perpendicular angel knowledgebase
Jump to navigation Jump to search
Line 13: Line 13:
* [http://www.westciv.com/tools/3Dtransforms/index.html Transforms] tool for testing transformations and animations
* [http://www.westciv.com/tools/3Dtransforms/index.html Transforms] tool for testing transformations and animations


== Gradients==
=== Tools ===
* [http://www.colorzilla.com/gradient-editor/ Colorzilla's gradient editor] will help you build pretty much any gradient ever with CSS.
== Layers ==
== Layers ==


Line 29: Line 33:
===Tools===
===Tools===
* [https://css-tricks.com/examples/nth-child-tester/ nth-child-tester] help you figure out what the nth-child controls will do.
* [https://css-tricks.com/examples/nth-child-tester/ nth-child-tester] help you figure out what the nth-child controls will do.
* [http://www.stripegenerator.com Stripe Generator] generates stripes in a downloadable file that you can then x-repeat over the space that you need it to fill.


== Sticky ==
== Sticky ==


[https://advent2017.digitpaint.nl/21/ Adhesive action with position:sticky!] by Digitpaint explains how to put nav elements and similar items sticky to the top or bottom of a page using no Javascript.
[https://advent2017.digitpaint.nl/21/ Adhesive action with position:sticky!] by Digitpaint explains how to put nav elements and similar items sticky to the top or bottom of a page using no Javascript.

Revision as of 19:57, 15 May 2018


Animation

Animation is a design technique for drawing the eye to a specific piece of content on the page. CSS allows for designers to animate elements on the page efficiently and with little performance overhead.

Training classes

Web Animation Essentials: CSS Animations and Transitions by Rachel Nabors

Tools

Gradients

Tools

Layers

Overlays: also called layers, info layers, help bubbles, modals, dialogues (but not HTML dialogs or Javascript dialogs...) anyway, they're things that pop up on top of the page you're on.

Layout

CSS Grid is hands-down the most effective recent way to do layout.

Responsive Design is a layout tool that predates CSS Grids.

Grid Systems predate both Responsive Design and CSS Grids. While they're not exactly the way that we'd do design today, knowing about the visual design elements, planning a desktop layout with a grid system can help figure out a visual design system even today.

Patterns

Tools

  • nth-child-tester help you figure out what the nth-child controls will do.
  • Stripe Generator generates stripes in a downloadable file that you can then x-repeat over the space that you need it to fill.

Sticky

Adhesive action with position:sticky! by Digitpaint explains how to put nav elements and similar items sticky to the top or bottom of a page using no Javascript.

Pages in category "Cascading Style Sheets"

The following 3 pages are in this category, out of 3 total.