CSS - Never Complete Only Abandoned

# Tips ## Underline Styles Skipping descenders etc ```cardlink url: https://css-tricks.com/styling-underlines-web/ title: "Styling Underlines on the Web | CSS-Tricks" description: "Styling the underlines that sit beneath links can be a tricky business, and I constantly forget what’s the best approach depending on the situation." host: css-tricks.com favicon: https://css-tricks.com/favicon.ico image: https://css-tricks.com/wp-json/social-image-generator/v1/image/245767 ``` - https://developer.mozilla.org/en-US/docs/Web/CSS/text-underline-offset ## Lens Blur Esque Text If you make each letter *slightly* larger (by like `0.1em`) and also increase the blur radius *slightly* it ends up looking very much like some kind of lens focus blur. This effect is much strong with larger text. <div style="overflow: hidden; height: 5em; display: flex; justify-content: center; align-items: center;"> it is d i f f i c u l t to live in a world with so much 𝓫𝓮𝓪𝓾𝓽𝔂 that will be 𝔩𝔬𝔰𝔱 to 𝖙𝖎𝖒𝖊 </div> - https://www.w3docs.com/snippets/css/how-to-create-a-blurry-text-in-css.html - https://www.w3docs.com/tools/code-editor/5602 ## Shifting Glowing Rainbow Button Made by [[Juxtopposed]]. ```cardlink url: https://codepen.io/Juxtopposed/pen/JjVXRey title: "Fancy Glowing Button" description: "Made for this video: https://www.youtube.com/watch?v=--4n9c4-h1Y..." host: codepen.io favicon: https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico image: https://assets.codepen.io/9051928/internal/screenshots/pens/JjVXRey.custom.png?version=1710112791 ``` ```cardlink url: https://youtu.be/--4n9c4-h1Y title: "I tried Blurring things in Quirky ways" description: "Let's talk about 10 different levels of blurring (Gaussian blur) in design and code.// Find all the codes in this CodePen collection:https://codepen.io/colle..." host: youtu.be favicon: https://www.youtube.com/s/desktop/fc387bff/img/logos/favicon_32x32.png image: https://i.ytimg.com/vi/--4n9c4-h1Y/maxresdefault.jpg ``` ```cardlink url: https://www.juxtopposed.com title: "Juxtopposed" host: www.juxtopposed.com favicon: https://www.juxtopposed.com/logo.png ``` ```cardlink url: https://stacksorted.com/buttons title: "Stack Sorted." description: "Find Inspiration in Design Elements." host: stacksorted.com favicon: https://stacksorted.com/favicon.png image: https://stacksorted.com/preview.png ``` ## Animated Rainbow Card ```cardlink url: https://codepen.io/boom123bam/pen/YzBboEJ title: "3D Card Hover + Animated Background" description: "A card with a glowing border and a 3D hover effect I made for my website..." host: codepen.io favicon: https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico image: https://shots.codepen.io/username/pen/YzBboEJ-800.jpg?version=1702587356 ``` ```cardlink url: https://codepen.io/Juxtopposed/pens/public title: "Juxtopposed on CodePen" host: codepen.io favicon: https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico image: https://assets.codepen.io/9051928/internal/avatars/users/default.png?fit=crop&format=auto&height=512&version=1666888813&width=512 ``` ## Alternate Syntax Pre-processor ```cardlink url: https://stylus-lang.com title: "Stylus" description: "Expressive, robust, feature-rich CSS language built for nodejs" host: stylus-lang.com favicon: https://stylus-lang.com/logo.svg image: https://www.stylus-lang.com/og.png ```