https://developer.mozilla.org/en-US/docs/Web/CSS/list-style CSSCompressor: https://csscompressor.com/ *css-basics Run animated linear gradient over page -------------------------------------------------------- https://codepen.io/redstapler/pen/LMyLxP _____________________________________ Change image based on CSS *clicked state* --------------------------- Click me!
 
(Source: https://stackoverflow.com/questions/1129699/can-you-use-if-else-conditions-in-css ) _______________________________________________ Compact dropdown button (with images) ------------------------------------------------------------' _______________________________ Text Hover Tooltip: ----------------------------
Hover over me Tooltip text
(Source: https://www.w3schools.com/css/css_tooltip.asp ) _____________________________________ Waitbutwhy / Bigfoot Popup note: -----------------------

…they’d managed to place 27.9MB of images onto the Critical Path. Almost 30MB of previously non-render blocking assets had just been turned into blocking ones on purpose with no escape hatch. Start render time was as high as 27.1s over a cable connection 1.

  1. 5Mb up, 1Mb down, 28ms RTT. ↩

(Source: https://codepen.io/ryedai1/pen/PoJjOLE ) _________________ Popup Footnote: ---------------- a.footnote {text-decoration:none; background-color: #FEF6BB; padding-left: 2px; padding-right: 2px; margin-right: 2px; -webkit-transition: all 2s ease; -moz-transition: all 2s ease; -o-transition: all 2s ease; transition: all 2s ease;} a.footnote span {z-index: -1; opacity: 0; position: fixed; left: 15px; bottom: 20px; margin-left: 0px; margin-right: 18px; padding:14px 20px; border-radius:4px; box-shadow: 5px 5px 8px #CCC; border:1px solid #DCA; background-color: #FEF6BB; -webkit-transition: all 2s ease; -moz-transition: all 2s ease; -o-transition: all 2s ease; transition: all 2s ease;} a.footnote:hover span {z-index: 9; opacity: 1; -webkit-transition: all 2s ease; -moz-transition: all 2s ease; -o-transition: all 2s ease; transition: all 2s ease;}

text¹An interesting and informative comment appears here, as if by magic.

(Source: https://codepen.io/WilliamRobertson/pen/ONpWRJ?html-preprocessor=haml ) _____________ CSS at time of day: -------------------- (Source: https://css-tricks.com/snippets/javascript/different-stylesheet-pending-the-time-of-day/ ) ______________ CSS Snowflakes ----------------------- ___________________________ Call CSS File ------------------- ___________________________ Set page background solid color: --------------- ============== == cssbasics == CSS can be added to HTML documents in 3 ways: Inline - by using the style attribute inside HTML elements. Internal - by using a