Category:Cascading Style Sheets - Revision history

Kirabug at 16:05, 28 March 2023

2023-03-28T16:05:11Z

← Older revision		Revision as of 09:05, 28 March 2023
Line 65:		Line 65:
	==Visual Design==		==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.		* [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.
			* [https://css-tricks.com/almanac/properties/t/text-transform/ text-transform] by [[Chris Coyier]] on [[CSS-Tricks]] explains how different values change your text.
	===Stripes===		===Stripes===
	* [https://css-tricks.com/stripes-css/ Stripes in CSS] by [[Chris Coyier]] on [[CSS-Tricks]], offers multiple ways to generate stripes in CSS		* [https://css-tricks.com/stripes-css/ Stripes in CSS] by [[Chris Coyier]] on [[CSS-Tricks]], offers multiple ways to generate stripes in CSS

Kirabug at 18:49, 12 January 2023

2023-01-12T18:49:35Z

← Older revision		Revision as of 11:49, 12 January 2023
Line 41:		Line 41:
	* [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.		* [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.

			==CSS Custom Properties (CSS Variables)==
			* [https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties Using CSS custom properties (variables) by [[MDN]]
	==Focus==		==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.		* [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.

Kirabug: /* General education and tutorials */

2021-01-07T18:21:39Z

General education and tutorials

← Older revision		Revision as of 11:21, 7 January 2021
Line 17:		Line 17:
	* Transforms and animation		* Transforms and animation
	* Using cheat sheets		* Using cheat sheets

			[https://flukeout.github.io CSS Diner] gamifies learning CSS.

	== Animation ==		== Animation ==

Kirabug: /* Sticky */

2020-06-19T04:58:30Z

Sticky

← Older revision		Revision as of 21:58, 18 June 2020
Line 56:		Line 56:
	* [http://bdavidxyz.com/blog/how-to-name-css-classes/ How to name CSS classes] by [[David Boureau]] on his website		* [http://bdavidxyz.com/blog/how-to-name-css-classes/ How to name CSS classes] by [[David Boureau]] on his website
	== 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.
			* [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

	==Visual Design==		==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.		* [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.

Kirabug: /* Layers */

2020-06-18T05:59:39Z

Layers

← Older revision		Revision as of 22:59, 17 June 2020
Line 44:		Line 44:
	* [http://www.colorzilla.com/gradient-editor/ Ultimate CSS Gradient Generator] by [[ColorZilla]] will help you build pretty much any gradient ever with CSS.		* [http://www.colorzilla.com/gradient-editor/ Ultimate CSS Gradient Generator] by [[ColorZilla]] 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.~~
	* [http://nicolasgallagher.com/pure-css-speech-bubbles/ Pure CSS Speech Bubbles] by [[Nicholas Gallagher]] on his website - 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.

Kirabug: /* Stripes */

2020-06-18T05:57:00Z

Stripes

← Older revision		Revision as of 22:57, 17 June 2020
Line 64:		Line 64:
	===Stripes===		===Stripes===
	* [https://css-tricks.com/stripes-css/ Stripes in CSS] by [[Chris Coyier]] on [[CSS-Tricks]], offers multiple ways to generate stripes in CSS		* [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 [[~~Alex~~ 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.		* [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.

	===Speech Bubbles===		===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]]		* [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]]

Kirabug: /* Stripes */

2020-06-18T05:56:20Z

Stripes

← Older revision		Revision as of 22:56, 17 June 2020
Line 64:		Line 64:
	===Stripes===		===Stripes===
	* [https://css-tricks.com/stripes-css/ Stripes in CSS] by [[Chris Coyier]] on [[CSS-Tricks]], offers multiple ways to generate stripes in CSS		* [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] generates stripes in a downloadable file that you can then x-repeat over the space that you need it to fill.		* [http://www.stripegenerator.com Stripe Generator] by [[Alex 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.

	===Speech Bubbles===		===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]]		* [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]]

Kirabug: /* Visual Design */

2020-06-18T05:53:36Z

Visual Design

← Older revision		Revision as of 22:53, 17 June 2020
Line 61:		Line 61:
	[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==		==Visual Design==
	* [https://css-tricks.com/examples/nth-child-tester/ nth-child-tester] by [[~~somebody~~]] on [[CSS-Tricks]] helps you figure out what the nth-child controls will do.		* [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===		===Stripes===
	* [https://css-tricks.com/stripes-css/ Stripes in CSS] by [[Chris Coyier]] on [[CSS-Tricks]], offers multiple ways to generate stripes in CSS		* [https://css-tricks.com/stripes-css/ Stripes in CSS] by [[Chris Coyier]] on [[CSS-Tricks]], offers multiple ways to generate stripes in CSS

Kirabug: /* Gradients */

2020-06-18T05:41:45Z

Gradients

← Older revision		Revision as of 22:41, 17 June 2020
Line 42:		Line 42:
	* [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/ Ultimate CSS Gradient Generator] by [[ColorZilla]] 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.

Kirabug: /* Tools */

2020-06-18T05:34:59Z

Tools

← Older revision		Revision as of 22:34, 17 June 2020
Line 30:		Line 30:
	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.

	==Colors==		==Colors==
	According to [https://twitter.com/meyerweb/status/1001908939766845445 this tweet] by [[Eric Meyer]]:		According to [https://twitter.com/meyerweb/status/1001908939766845445 this tweet] by [[Eric Meyer]]: