From 445b514b5177fddec263eeaa6233ac69500ed726 Mon Sep 17 00:00:00 2001 From: Zachary Vance Date: Fri, 21 Jul 2023 19:08:36 -0400 Subject: [PATCH] Add sutff --- html-css-cheatsheet.html | 158 ++++++++++++++++++++++++++++++++++++--- 1 file changed, 146 insertions(+), 12 deletions(-) diff --git a/html-css-cheatsheet.html b/html-css-cheatsheet.html index e58b662..bb3697d 100644 --- a/html-css-cheatsheet.html +++ b/html-css-cheatsheet.html @@ -1,4 +1,5 @@ + @@ -95,8 +96,8 @@ } .red { background-color: pink; } .blue { background-color: lightblue; } - .green { background-color: green; } - .yellow { background-color: yellow; } + .green { background-color: lightgreen; } + .yellow { background-color: palegoldenrod; } div.em { width: 1em; height: 1em; @@ -116,7 +117,12 @@ } form > div:not(:first-child) { padding-top: 0.5em; - border-top: 1px solid; + border-top: 1px solid lightgrey; + /* Look "connected" */ + padding-left: 5px; + padding-right: 5px; + margin-left: -5px; + margin-right: -5px; } @keyframes resizer-v { 0% { @@ -134,8 +140,8 @@ margin-right: 0; } 100% { - width: 50%; - margin-right: 50%; + width: 60%; + margin-right: 40%; } } @@ -150,7 +156,9 @@ -

(Work in progress) Za3k presents: An HTML and CSS cheatsheet!

(Oh my god stop animating)
+

(Work in progress) Za3k presents: An HTML and CSS cheatsheet!

+ +
Hover over a section to animate (or click to disable animation)
@@ -470,9 +478,9 @@ $("input[type=checkbox]").attr("checked"); 
<input type="password" placeholder="password"/>
<input type="file"/>
-
+ 
<input type="range" min="1" max="100" value="50"/>
-
+ @@ -526,11 +534,115 @@ $("textarea").val();
-

TODO: CSS Animations

+

CSS Animations

+ Not all properties can be animated, but many can. + +
+ fading transition +
+ + + +

Transitions can change a property gradually.

+ +
a       { transition-duration: 0.8s;
+          transition-property: opacity; }
+a:hover { opacity: 10%; }
+ + + + + +

Animations change properties in a defined and continuous way.

+ + 
animation: «duration» «name» «iteration-count» «direction»;
+
+a { animation: glow 5s ease-in-out infinite alternate; }
+@keyframes glow {
+    0%   { color: red; } ...
+    100% { color: violet; }
+}
+ + + +

Transforms and animations can be combined.

+
a:hover {
+  animation: shift-a-bit 0.5s ease-in-out infinite alternate;
+}
+@keyframes shift-a-bit {
+  0%   { transform: rotate(0); }
+  100% { transform: rotate(5deg); }
+}
+
-

TODO: Columnar Layout

+

Columnar Layout

+ +
+ Whereas recognition of the inherent dignity and of the equal and inalienable rights of all members of the human family is the foundation of freedom, justice and peace in the world, +

Whereas disregard and contempt for human rights have resulted in barbarous acts which have outraged the conscience of mankind, and the advent of a world in which human beings shall enjoy freedom of speech and belief and freedom from fear and want has been proclaimed as the highest aspiration of the common people, +

+ 
div { column-count: 3; }
+
+
Whereas recognition of the inherent dignity and of the equal and inalienable rights of all members of the human family is the foundation of freedom, justice and peace in the world,
+
Whereas disregard and contempt for human rights have resulted in barbarous acts which have outraged the conscience of mankind, and the advent of a world in which human beings shall enjoy freedom of speech and belief and freedom from fear and want has been proclaimed as the highest aspiration of the common people,
+
Whereas it is essential, if man is not to be compelled to have recourse, as a last resort, to rebellion against tyranny and oppression, that human rights should be protected by the rule of law,
+
Whereas it is essential to promote the development of friendly relations between nations,
+
+ 
div.outer { column-count: 3; }
+div.inner { break-inside: avoid-column; }
+ +
+
+
+
+
+
+
+
+
+
+ 
div.outer { columns: auto;
+            column-gap: 1em;
+            column-width: 6em; }
+div.inner { break-inside: avoid-column; }
@@ -606,7 +718,30 @@ tr:nth-child(odd) { background-color: lightyellow; }
-

TODO: CSS Selector Reference

+

CSS Selector Reference

+
*           All elements
+#id         Element with the given id
+div         All <div>s
+.foo        Elements with class "foo"
+.foo.bar    Elements with class "foo" and "bar"
+div.foo     <div>s with class "foo"
+[attr]      Elements with attribute "attr"
+[attr=val]  Elements with attribute "attr" set to "val"
+
+a b         b, a descendent of a
+a < b       b, a child of a
+a, b        a or b
+a + b       b immediately after a
+a ~ b       b immediately before a
+:not(...)   inverts selector
+:has(...)   cannot use yet
+
+:hover. :visited
+:first-child, :last-child, :only-child
+:nth-child(n+3)   3rd, 4th, 5th child
+:nth-child(even)  2nd, 4th, 6th child
+
+::before, ::after
@@ -618,7 +753,6 @@ tr:nth-child(odd) { background-color: lightyellow; } script.src = 'https://.../jquery.min.js'; document.appendChild(script); -

Or, it's often easier to style elements directly. Jquery is especially good for this: 

$("button").on("click", () => {
-- 
2.47.3