Difference between revisions of "Category:Cascading Style Sheets"
| Line 17: | Line 17: | ||
* Transforms and animation | * Transforms and animation | ||
* Using cheat sheets | * Using cheat sheets | ||
== Animation == | == 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. | 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 === | === Training classes === | ||
[http://rachelnabors.com/css-animations-course/ Web Animation Essentials: CSS Animations and Transitions] by Rachel Nabors | [http://rachelnabors.com/css-animations-course/ Web Animation Essentials: CSS Animations and Transitions] by Rachel Nabors | ||
=== Tools === | === Tools === | ||
* [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 | ||
== Cascades and Specificity == | == Cascades and Specificity == | ||
Also known as "why is this thing here overriding that thing over there?!?" | Also known as "why is this thing here overriding that thing over there?!?" | ||
===Tools=== | ===Tools=== | ||
* [http://specificity.keegan.st Specificity Calculator] helps to display the specificity of a selector in a more understandable visual way. | * [http://specificity.keegan.st Specificity Calculator] helps to display the specificity of a selector in a more understandable visual way. | ||
| Line 45: | Line 39: | ||
* [https://css-tricks.com/focusing-on-focus-styles/ Focusing on Focus Styles] by Eric Bailey at CSS-Tricks explains the basics of applying focus to elements, when to do it, and why. It also covers some upcoming focus elements not yet widely supported, such as focus-within. | * [https://css-tricks.com/focusing-on-focus-styles/ Focusing on Focus Styles] by Eric Bailey at CSS-Tricks explains the basics of applying focus to elements, when to do it, and why. It also covers some upcoming focus elements not yet widely supported, such as focus-within. | ||
== Gradients== | == Gradients== | ||
* [http://www.colorzilla.com/gradient-editor/ Colorzilla's gradient editor] will help you build pretty much any gradient ever with CSS. | * [http://www.colorzilla.com/gradient-editor/ Colorzilla's gradient editor] will help you build pretty much any gradient ever with CSS. | ||
== Layers == | == 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. | 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" | * [http://nicolasgallagher.com/pure-css-speech-bubbles/ Pure CSS Speech Bubbles] by Nicholas Gallagher - aka "how to give your help bubble a tail" | ||
== Layout == | == Layout == | ||
[[CSS Grid]] is hands-down the most effective recent way to do layout. | [[CSS Grid]] is hands-down the most effective recent way to do layout. | ||
| Line 65: | Line 54: | ||
==Naming best practices== | ==Naming best practices== | ||
* [http://bdavidxyz.com/blog/how-to-name-css-classes/ How to name CSS classes] by David Boureau | * [http://bdavidxyz.com/blog/how-to-name-css-classes/ How to name CSS classes] by David Boureau | ||
== 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. | ||
==Visual Design== | |||
* [https://css-tricks.com/examples/nth-child-tester/ nth-child-tester] help you figure out what the nth-child controls will do. | |||
===Stripes=== | |||
* [https://css-tricks.com/stripes-css/ Stripes in CSS] by Chris Coyier, offers multiple ways to generate stripes in CSS | |||
* [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. | |||
Revision as of 20:45, 1 December 2019
General education and tutorials
How to Learn CSS by Rachel Andrew for Smashing Magazine covers each of the following topics with links to more in-depth resources. It's a tutorial's tutorial:
- Language fundamentals
- Selectors
- Inheritance and the cascade
- The box model
- Normal flow
- Formatting contents
- Being in or out of flow
- Layout
- Alignment
- Sizing
- Responsive Design
- Fonts and typography
- Transforms and animation
- Using cheat sheets
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
Cascades and Specificity
Also known as "why is this thing here overriding that thing over there?!?"
Tools
- Specificity Calculator helps to display the specificity of a selector in a more understandable visual way.
Colors
According to this tweet by Eric Meyer:
FUN FACT: in CSS and SVG, 'gray'/'grey' (#808080) is darker than 'darkgray'/'darkgrey' (#A9A9A9) because that’s how they were defined in HTML and one version of the X11 color system, respectively. When the two systems were merged, nobody wanted to touch the underlying values.
Focus
- Focusing on Focus Styles by Eric Bailey at CSS-Tricks explains the basics of applying focus to elements, when to do it, and why. It also covers some upcoming focus elements not yet widely supported, such as focus-within.
Gradients
- Colorzilla's gradient editor will help you build pretty much any gradient ever with CSS.
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
CSS Grid is hands-down the most effective recent way to do layout.
Flexbox is a close second, but only works in rows or columns, giving CSS Grid the edge in complex layouts.
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.
Naming best practices
- How to name CSS classes by David Boureau
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.
Visual Design
- nth-child-tester help you figure out what the nth-child controls will do.
Stripes
- Stripes in CSS by Chris Coyier, offers multiple ways to generate stripes in CSS
- Stripe Generator generates stripes in a downloadable file that you can then x-repeat over the space that you need it to fill.
Pages in category "Cascading Style Sheets"
The following 3 pages are in this category, out of 3 total.