Difference between revisions of "Category:Cascading Style Sheets"

From perpendicular angel knowledgebase
Jump to navigation Jump to search
(20 intermediate revisions by the same user not shown)
Line 1: Line 1:
[[Category: Design]]
[[Category: Design]]
==General education and tutorials==
[https://www.smashingmagazine.com/2019/01/how-to-learn-css/ 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
[https://flukeout.github.io CSS Diner] gamifies learning CSS.


== 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]] on her website
[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] by [[Matthew Lein]] on his website.
* [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 by [[Western Civilization]]


== 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] by [[Keegan Street]] helps to display the specificity of a selector in a more understandable visual way.
== Gradients==
=== Tools ===


* [http://www.colorzilla.com/gradient-editor/ Colorzilla's gradient editor] will help you build pretty much any gradient ever with CSS.  
==Colors==
== Layers ==
According to [https://twitter.com/meyerweb/status/1001908939766845445 this tweet] by [[Eric Meyer]]:
<blockquote>
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.
</blockquote>
* [https://cathydutton.co.uk/posts/css-custom-properties-and-accesability/ CSS Custom Properties and Accessibility] by [[Cathy Dutton]] on her website describes how to use CSS variables to name colors in the system so the color palette is themeable and switch themes using [[Javascript]] and local storage. She also describes using these techniques for font face and font size.


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.
==Focus==
 
* [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.  
* [http://nicolasgallagher.com/pure-css-speech-bubbles/ Pure CSS Speech Bubbles] by Nicholas Gallagher - aka &quot;how to give your help bubble a tail&quot;
== Gradients==
* [http://www.colorzilla.com/gradient-editor/ Ultimate CSS Gradient Generator] by [[ColorZilla]] will help you build pretty much any gradient ever with CSS.


== 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.  
[[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.  
[[Responsive Design]] is a layout tool that predates CSS Grids.  
Line 35: Line 55:
[[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.
[[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==
==Naming best practices==
===Tools===
* [http://bdavidxyz.com/blog/how-to-name-css-classes/ How to name CSS classes] by [[David Boureau]] on his website
* [https://css-tricks.com/examples/nth-child-tester/ nth-child-tester] help you figure out what the nth-child controls will do.
== Sticky ==
* [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.
* [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://lea.verou.me/2020/06/hybrid-positioning-with-css-variables-and-max/ Hybrid positioning with CSS variables and max()] by [[Lea Verou]] on her website explains how you can get something that's sort-of-sticky using no Javascript


== Sticky ==
==Visual Design==
* [https://css-tricks.com/examples/nth-child-tester/ nth-child-tester] by [[Chris Coyier]] on [[CSS-Tricks]] helps you figure out what the nth-child controls will do.
===Stripes===
* [https://css-tricks.com/stripes-css/ Stripes in CSS] by [[Chris Coyier]] on [[CSS-Tricks]], offers multiple ways to generate stripes in CSS
* [http://www.stripegenerator.com Stripe Generator] by [[Alessandro La Rosa]] and [[Fabio Fidanza]] generates stripes in a downloadable file that you can then x-repeat over the space that you need it to fill.


[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.
===Speech Bubbles===
* [http://nicolasgallagher.com/pure-css-speech-bubbles/ Pure CSS Speech Bubbles] - multiple techniques for giving a "speech bubble" look to content on your site, by [[Nicholas Gallagher]]

Revision as of 11:21, 7 January 2021


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

CSS Diner gamifies learning CSS.

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 on her website

Tools

Cascades and Specificity

Also known as "why is this thing here overriding that thing over there?!?"

Tools

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

Gradients

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

Sticky

Visual Design

Stripes

Speech Bubbles

Pages in category "Cascading Style Sheets"

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