Difference between revisions of "Category:Cascading Style Sheets"
Jump to navigation
Jump to search
| Line 1: | Line 1: | ||
[[Category: Design]] | [[Category: Design]] | ||
== Animation == | == Animation == | ||
| Line 21: | Line 12: | ||
* [https://matthewlein.com/tools/ceaser Ceaser - CSS Easing Animation Tool] | * [https://matthewlein.com/tools/ceaser Ceaser - CSS Easing Animation Tool] | ||
* [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 | ||
== 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. | |||
* [http://nicolasgallagher.com/pure-css-speech-bubbles/ Pure CSS Speech Bubbles] by Nicholas Gallagher - aka "how to give your help bubble a tail" | |||
== Layout == | |||
[[CSS Grid]] | |||
== Patterns== | |||
===Tools=== | |||
* [https://css-tricks.com/examples/nth-child-tester/ nth-child-tester] help you figure out what the nth-child controls will do. | |||
== 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:45, 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
- Ceaser - CSS Easing Animation Tool
- Transforms tool for testing transformations and animations
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.
- Pure CSS Speech Bubbles by Nicholas Gallagher - aka "how to give your help bubble a tail"
Layout
Patterns
Tools
- nth-child-tester help you figure out what the nth-child controls will do.
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.