Frontend Dogma

“css” Archive (2)

  1. My Take on Fading Content Using Transparent Gradients in CSS (by/via) · ·
  2. Modern CSS, the State of the Web, Safari’s Progress, and More! With Jen Simmons (by+) · · , , , , ,
  3. Create a Currency Converter With HTML, CSS, and Vanilla JavaScript (by/via) · · , ,
  4. Fading Content Using Transparent Gradient in CSS (by) · · ,
  5. A Practical Introduction to Scroll-Driven Animations With CSS “scroll()” and “view()” (by/via) · · , , ,
  6. The Complex but Awesome CSS “border-image” Property (by/via) · · ,
  7. Difference Between “getElementByID” and “querySelector” (by) · · ,
  8. Combining “:has” and “:only-child” to Change Tab Containers (by) · ·
  9. 5 CSS Snippets Every Front-End Developer Should Know in 2024 (by/via) ·
  10. Using CSS Houdini to Extend Styling and Layout Capabilities (via) · · ,
  11. Accounting for Internationalization With CSS and HTML (via) · · ,
  12. Taking a Closer Look at “@ property” in CSS (by) · ·
  13. Using Heaps of Cutting Edge CSS Features to Build a Progress Indicator (by) · · ,
  14. Nested Dark Mode via CSS Proximity (by) · ·
  15. Notes on Using Logical Properties and Values (by) · ·
  16. How I’m Writing CSS in 2024 (by) · · ,
  17. Under the Radar CSS Features for Your CSS Reset (by) · · ,
  18. CSS in 2024, Am I Right? (by) · ·
  19. Is CSS Alive? (by) ·
  20. My CSS Resets (by) · ·
  21. Tyler’s CSS Wish List for 2024 (by/via) · ·
  22. The View Transitions API and Delightful UI Animations II (by/via) · · , ,
  23. Every Container Queries Demo Is a Card (by) · ·
  24. CSS Wishlist (by) · ·
  25. Container Style Queries (by/via) · ·
  26. The Devil Is in the Details: A Look Into a Disclosure Widget Markup (by) · · ,
  27. CSS-Based State Management (by) · ·
  28. The View Transitions API and Delightful UI Animations (by/via) · · , ,
  29. Container Queries and Units (by/via) · · ,
  30. Scroll-Driven Animations (by/via) · · ,
  31. Cool Wiggly Hover Animation With CSS (by) · · ,
  32. Locking Scroll With “:has()” (by) · · ,
  33. CSS Nesting (by/via) · ·
  34. Clean Architecture: Theming With Tailwind and CSS Variables (via) · · , ,
  35. New CSS Viewport Units Do Not Solve the Classic Scrollbar Problem (by/via) · · ,
  36. Border Images in CSS: A Key Focus Area for Interop 2023 (by/via) · · , , , ,
  37. We Can :has It All (by) · · , ,
  38. Practical “img” Element Defaults (by/via) · · ,
  39. View Transitions (by/via) · · ,
  40. “align-content” in Block Layout (by) · · , ,
  41. How to Center an Element in CSS Without Adding a Wrapper in HTML (by/via) · · , ,
  42. CSS “animation-composition” (by/via) · ·
  43. CSS “@ scope” (by/via) · · ,
  44. Christmas Tree Animations Made With CSS and JS · · , , ,
  45. How We Reduced CSS Size and Improved Performance Across GOV.UK (via) · · , ,
  46. Anchor Positioning (by/via) · ·
  47. Popover API (by/via) · · ,
  48. CSS Scroll Snapping Aligned With Global Page Layout: A Full-Width Slider Case Study (by/via) · · , ,
  49. Embrace the Platform (by/via) · · , , , , ,
  50. Using Date-Based CSS to Make Old Web Pages Look Old (by) · ·
  51. Three Modern CSS Properties Your Website Must Have (by/via) ·
  52. Quantity Queries Are Very Easy With CSS “:has()” (by/via) · ·
  53. Media Queries in HTML Video (by) · · , , ,
  54. Oh No! My JSON! (by) ·
  55. The Shrinkwrap Problem: Possible Future Solutions (by) ·
  56. CSS Snapshot 2023 (by+/via) ·
  57. CSS Wrapped: 2023! (by+/via) · · , , ,
  58. Fine, I’ll Use a Super Basic CSS Processing Setup (by/via) · · ,
  59. 4 Dead Simple Ways of Customizing Bootstrap (by) · · ,
  60. Blind CSS Exfiltration: Exfiltrate Unknown Web Pages (by/via) · ·
  61. CSS Media Query for Scripting Support (by) · · , ,
  62. How to Use a Color Font (by) · · ,
  63. CSS Relative Colors (by/via) · ·
  64. Is 2024 the Year of CSS Nesting? (by/via) · ·
  65. Creating a Marquee Effect With CSS Animations (by) · · ,
  66. CSS: BEM or Atomic Design (by) · · , ,
  67. Hide and Debug Empty Elements With CSS (by/via) ·
  68. The Difference Between Nesting an “@ layer” in “@ media” and “@ container” Query (by) · · , , , ,
  69. Oh No, Overflow! (by/via) · ·
  70. The “hanging-punctuation” Property in CSS (by) · ·
  71. “oklch()” Retains Perceived Lightness for Different Hue Angles (by) · · , ,
  72. Preventing Scroll “Bounce” With CSS (by/via) · ·
  73. Weird HTML Hacks (by) · · , , ,
  74. A Few Ways CSS Is Easier to Write in 2023 (by/via) · · ,
  75. Browsers Only Update “:target” on Page Load and During Fragment Navigation (by/via) · ·
  76. An Interactive Guide to CSS Grid (by) · · ,
  77. Width and Height in CSS (by) ·
  78. CSS4 Is Coming (Not a Clickbait) (by/via) · ·
  79. CSS Nesting UX in DevTools (by) · · , , , ,
  80. CSS Nesting (by) · ·
  81. The CSS Property You Didn’t Know You Needed ·
  82. The Best CSS Background Patterns for Your Next Project · ·
  83. Getting Started With CSS Container Queries (by/via) · · ,
  84. Modular CSS and Different Ways to Structure Your Stylesheets (by) · ·
  85. About Subgrid and Colored Grid Lines (by) · ·
  86. Is It Worth Keeping Your CSS DRY—Pros and Cons · · ,
  87. Elevate Your CSS Debugging Skills With These Chrome DevTools Tricks in 2024 (by) · · , , , ,
  88. Cascade Layers, CSS Functions, and More CSS With Miriam Suzanne (by+/via) · · , , ,
  89. Never Use “Scroll” Value for Overflow (by) · ·
  90. CSS Nesting Is Here (by/via) · ·
  91. CSS Nesting Relaxed Syntax Update (by/via) · · , , , ,
  92. “@ scope” (by/via) · · ,
  93. Using CSS “content-visibility” to Boost Your Rendering Performance (via) · · ,
  94. CSS Positioning Crash Course (by/via) · · ,
  95. Surprising Facts About New CSS Selectors (by/via) · ·
  96. Addressing Accessibility Concerns With Using Fluid Type (by/via) · · ,
  97. (Don’t) Mind the Gap (by/via) · ·
  98. Removing List Styles Without Affecting Semantics (by) · · , ,
  99. Totally Remdom, or How Browsers Zoom Text (by) · · , , ,
  100. Workarounds for Buggy Gradients (by) · · ,
  101. Messing About With CSS Gradients (by/via) · ·
  102. “:fullscreen” Demo Without JavaScript (by) · ·
  103. Why You Should Use “px” Units for Margin, Padding, and Other Spacing Techniques (by) · · , ,
  104. Use the CSS “:disabled” Pseudo-Class Instead of the “[disabled]” Attribute Selector to Match Disabled Form Controls (by/via) · · ,
  105. How Bear Does Analytics With CSS · · , ,
  106. The “prefers-reduced-transparency” Media Feature (by) · · ,
  107. One HTML Tag, Thirty+ CSS Drawings—My Divtober 2023 Collection (by) · ·
  108. 2023: 0 of the Global Top 100 Websites Use Valid HTML (by) · · , ,
  109. What Exactly Is “Modern” CSS? (by) ·
  110. The New CSS Math: “rem()” and “mod()” (by) · · ,
  111. View Transitions and Stacking Context: Why Does My CSS View Transition Ignore “z-index”? (by) · · ,
  112. Let’s Reinvent the Wheel (by) · · , , ,
  113. Some Sensible Defaults for Your “img” Elements (by) · ·
  114. 20 Simple Ways to Style the HTML “details” Element (by/via) · ·
  115. CSS “prefers-reduced-transparency” (by/via) · · ,
  116. Complex MPA View Transitions (by) · · ,
  117. Tailwind vs. Semantic CSS (by) · · , , , ,
  118. CSS “text-wrap: pretty” (by/via) · · , , , ,
  119. Changing Colors in an SVG Element Using CSS and JavaScript (by) · · , ,
  120. Solved by CSS Scroll-Driven Animations: Style an Element Based on the Active Scroll Direction and Scroll Speed (by/via) · · ,
  121. When to Use CSS “text-wrap: balance;” vs. “text-wrap: pretty;” (by) · · ,
  122. I Asked People to Make This Simple Layout and Was Surprised by the Results (by) · · , ,
  123. Prodding Firefox to Update “:has()” Selection (by) · · , , ,
  124. How to Animate Along a Path in CSS (by/via) · · ,
  125. The New “light-dark()” Function to Switch Theme Color in CSS (by) · · ,
  126. A Couple of New CSS Functions I’d Never Heard Of (by) · ·
  127. Scroll-Driven State Transfer (by) · ·
  128. CSS Findings From Photoshop Web Version (by) · · , , ,
  129. Bubble Sort… in Pure CSS? (No JS) (by) · · ,
  130. What’s New in CSS? (by/via) · ·
  131. Using CSS Custom Properties Like This Is a Waste (by) · · ,
  132. Honor User’s Transparency Setting in CSS (by) · · ,
  133. Styling External Links With Attribute Selectors (by/via) · · ,
  134. CSS Relative Color Syntax (by/via) · · ,
  135. CSS-Only Scroll-Driven Animation and Other Impossible Things (by+/via) · · ,
  136. The Future of CSS: Easy Light-Dark Mode Color Switching With “light-dark()” (by/via) · · ,
  137. Don’t Use Fixed CSS “height” or “width” on Buttons, Links, or Any Other Text Containers (by) · · , , ,
  138. Naming Variables in CSS (by) · · ,
  139. CSS 3D Text Effects · ·
  140. What Happened to Separation of Concerns in Frontend Development (by) · · , , ,
  141. When to Nest CSS (by/via) · ·
  142. An Anchored Navbar Solution (by) · · ,
  143. Limit the Reach of Your Selectors With the CSS “@ scope” At-Rule (by/via) · · , ,
  144. Still No CSS Reset (by) · ·
  145. Being Picky About a CSS Reset for Fun and Pleasure (by) · ·
  146. Demystifying CSS Container Queries (by+/via) · · ,
  147. Have You Seen These Weird Image Tag Issues? (by) · ·
  148. Understanding the CSS Auto-Resizing Textarea Trick (by) · · ,
  149. Re-Creating the Pop-Out Hover Effect With Modern CSS (by/via) · ·
  150. CSS Nesting and the Cascade (by/via) · · ,
  151. Easy Dark Mode With “color-scheme” (by) · · , , ,
  152. Stop Using JS for That: Moving Features to CSS and HTML (by/via) · · , ,
  153. CSS Terminology Demystified (by/via) · · ,
  154. Textareas With Auto-Increasing Height Using CSS (by) · ·
  155. The Path to Awesome CSS Easing With the “linear()” Function (by/via) · · ,
  156. How to Escape CSS Selectors in JavaScript (by) · · , , ,
  157. Responsive Type Scales With Composable CSS Utilities (by) · · ,
  158. CSS Findings From The Threads App II (by) · ·
  159. A (More) Modern CSS Reset (by) · ·
  160. 1-Minute CSS Tip: Accent Colors (by) · · ,
  161. Expert CSS: The CPU Hack (by) · ·
  162. Solved by CSS Scroll-Driven Animations: Detect If an Element Can Scroll or Not (by/via) · · ,
  163. Revealing Images With CSS Mask Animations (by/via) · · ,
  164. How Custom Property Values Are Computed (by) · ·
  165. Limitations of Scoped CSS (by) · ·
  166. Nuclear Anchored Sidenotes (by) · ·
  167. Gradients, Blend Modes, and a Really Cool Hover Effect (by/via) · · ,
  168. WOFF Has Left the Building (by) · · , ,
  169. Why Are We Not Still Using Tables-for-Layout? (by) · · ,
  170. CSS Lobotomized Owl Selector: A Modern Guide (by/via) · · , ,
  171. CSS “display” Is a Multi-Keyword Property? (by/via) · ·
  172. Type Safe CSS Design Systems With “@ property” (by) · · , ,
  173. Small Details to Improve Your Website’s Experience (by) · · , ,
  174. Selecting the Scoping Root (by) · ·
  175. Clocks and Countdowns: Timing in CSS and JavaScript (by) · ·
  176. Let’s Make a Rubber Button With HTML, CSS and SVG (by/via) · · , , ,
  177. Connected Grid Layout Animation (by/via) · · ,
  178. Using “rem” Doesn’t Make Your Website Responsive—Here’s Why · · ,
  179. CSS Loaders (by) · · , ,
  180. Case Study: Rebuilding TechCrunch Layout With Modern CSS (by) · · ,
  181. Realistic CSS Animations and the “linear()” Timing Function (by) · · ,
  182. Falling for OKLCH: A Love Story of Color Spaces, Gamuts, and CSS (by/via) · · ,
  183. State of CSS 2023 (by+/via) · ·
  184. Scope vs. Shadow DOM (by) · · , , , ,
  185. A Few Interesting Ways to Use CSS Shadows for More Than Depth (by/via) · · ,
  186. A Quick Introduction to CSS “@ scope” (by/via) · · , , ,
  187. Styling Links and Buttons (by) · · , ,
  188. Let’s Build a Website Using XML (by) · ·
  189. Combining “:placeholder-shown” and “:has” (by) · · ,
  190. Scroll Shadows With “animation-timeline” (by) · · ,
  191. A Deep Dive Into CSS “color-mix()” (by) · · ,
  192. How to Use the CSS “gap” Property (by/via) · · ,
  193. The New CSS Math: “round()” (by) · ·
  194. BEM Methodology Is Not About CSS (by) · · ,
  195. CSS-Only Syntax Highlighting… With a Single Element and Gradients (by) · ·
  196. Thinking on Ways to Solve Adaptive Typography (by/via) · · , ,
  197. Four New CSS Features for Smooth Entry and Exit Animations (by+/via) · · , , , ,
  198. CSS Selectors: A Visual Guide (by) · · ,
  199. Testing Your Animation Refresh Rate With CSS Crimes? (by) · · ,
  200. An “alt” Decision Tree Using Only “:has()” (by) · · ,
  201. OKLCH in CSS: Consistent, Accessible Color Palettes (by/via) · · , , ,
  202. Create Direction-Aware Effects Using Modern CSS (by) · · ,
  203. A Beginner’s Guide to CSS Grid Layout (by/via) · · ,
  204. User-Adaptive Interfaces With “AccentColor” (by) · ·
  205. Progressively Enhanced Form Validation: HTML and CSS (by/via) · · , , ,
  206. An Overview of CSS Sizing Units (by/via) · · ,
  207. How to Use the CSS Grid “repeat()” Function (by/via) · · , ,
  208. CSS and Accessibility: Inclusion Through User Choice (by/via) · · , ,
  209. Why Isn’t “z-index” Working? (by+/via) · ·
  210. Creating Custom Easing Effects in CSS Animations Using the “linear()” Function (by/via) · · ,
  211. Mixing Colors to Create Variants in CSS (by) · ·
  212. Randomness in CSS Using Trigonometry (by) · ·
  213. A Future of Themes With CSS Container Style Queries (by) · · ,
  214. Resume and Pause Animations in CSS (by) · ·
  215. How to Define an Array of Colors With CSS (by/via) · · , ,
  216. How “position: absolute” Works in CSS Grid (by/via) · · ,
  217. Adapting Typography to User Preferences With CSS (by/via) · · ,
  218. How to Use CSS “aspect-ratio” (by/via) · ·
  219. 10 Simple CSS and JavaScript Micro-Interactions for Buttons (by/via) · · , ,
  220. Enable Hover Conditionally in CSS (by) ·
  221. CSS Cascade Layers (by+/via) · · ,
  222. How to Use CSS “object-fit” and “object-position” (by/via) · · ,
  223. Figma Now Supports “rem” Units: Understanding the Use and Benefits (by/via) · · , ,
  224. Getting Started With CSS Nesting (by) · · , ,
  225. Advanced Positioning in CSS Grid (by/via) · · ,
  226. Down-and-Across Highlighting (by) · · , ,
  227. Scroll Progress Animations in CSS (by/via) · · ,
  228. Writing CSS in 2023: Is It Any Different Than a Few Years Ago? (by/via) ·
  229. CSS Findings From the Threads App (by) · ·
  230. A Case Study on Scroll-Driven Animations Performance (via) · · , , ,
  231. Introduction to CSS Grid: A Comprehensive Guide (by) · · ,
  232. My Journey to Learning CSS (by) · · ,
  233. Sass Features in CSS (by) · · ,
  234. All the Places Where You Can Use “prefers-color-scheme” Media Query (by) · · , , ,
  235. Awesome List of Free CSS [Generators] · · , ,
  236. New Viewport Units (by) · · ,
  237. The New “@ font-face” Syntax (by) · · ,
  238. From Hacks to Elegance: Transforming a Card Component With Modern CSS Wizardry (by/via) · · , ,
  239. Shines, Perspective, and Rotations: Fancy CSS 3D Effects for Images (by/via) · · ,
  240. Offset Parent and Stacking Context: Positioning Elements in All Three Dimensions (by/via) · ·
  241. An Introduction to Native CSS Nesting (by/via) · · ,
  242. CSS Only Floating Labels · · ,
  243. Can We Query the Root Container? (by/via) · ·
  244. The Trick to Smoothly Animating Shadows in CSS (by) · · , ,
  245. Are We There Yet? (by) · · ,
  246. Solved: Tricky Floating Image Alignment (by/via) · · , ,
  247. Under-Engineered Comboboxen? (by) · · , ,
  248. How to Use CSS “background-size” and “background-position” (by/via) · · ,
  249. Position-Driven Styles (by) · ·
  250. Building Sliding Cards With “position: sticky;” (by) ·