- Web Animation Essentials: CSS Animations and Transitions
- Website Deconstructions - Ihatetomatoes
- Why CSS ::before doesn't work on inputs and images
- https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web
- https://ferrumpipe.com
- https://jeremenichelli.io/2016/04/always-animate-translate-instead-of-positions
- https://thewholesome.dev/p/8-frontend-coding-ideas-that-will
- https://github.com/argyleink/transition.css
- A reference for the render impact of mutating CSS properties.
- https://shud.in/posts/on-ui-animations
- https://medium.com/outsystems-experts/how-to-achieve-60-fps-animations-with-css3-db7b98610108
- https://whistlr.info/2021/box-model-animation
- Amit Sheen - 3D in CSS, and the True Meaning of Perspective + What triggers reflows + https://github.com/GoogleChromeLabs/css-triggers + https://web.archive.org/web/20220727225220/https://csstriggers.com + How To Use CSS Animations And Stay Performant (And Accessible) + Amit Sheen | Getting Creative with Keyframes
- https://jonsuh.com/blog/detect-the-end-of-css-animations-and-transitions-with-javascript
- https://github.com/petargyurov/virtual-bookshelf
- https://kevinhufnagl.com/verceltext-gradient
- https://github.com/prideout/pageturn
- https://www.designsystemhunt.com
- https://calibreapp.com/blog/css-performance
- https://css-tricks.com/building-a-scalable-css-architecture-with-bem-and-utility-classes
- https://experiencinginformation.com/2012/07/22/the-first-responsive-design-website-audi-circa-2002
- https://web.dev/learn/design
- Guidelines for writing sane, maintainable and scalable Sass
- How to test if a font is available
- https://dev.to/srmagura/why-were-breaking-up-wiht-css-in-js-4g9b
- https://github.com/RodrigoTomeES/prefers-color-scheme-hack
- https://www.tpgi.com/the-anatomy-of-visually-hidden
- Collapsible list
- https://www.tpgi.com/the-anatomy-of-visually-hidden
- https://blogs.windows.com/msedgedev/2023/01/17/the-truth-about-css-selector-performance
- https://www.otsukare.info/2022/10/25/css-values-definitions
- https://developer.chrome.com/blog/tether-elements-to-each-other-with-css-anchor-positioning
- https://benmyers.dev/blog/native-visually-hidden
- https://www.robinrendle.com/notes/the-details-element-is-amazing
- https://www.scottohara.me/blog/2023/03/21/visually-hidden-hack.html
- https://kizu.dev/fit-to-width-text
- https://tetralogical.com/blog/2023/06/08/focus-in-view
- https://matthiasott.com/notes/custom-properties-beyond-the-root
- https://www.abeautifulsite.net/posts/better-buttons-with-color-mix-and-custom-properties
- https://fullystacked.net/using-emoji-on-the-web
- https://debuggingcss.com
- https://leanpub.com/css-optimization-basics + https://github.com/j9t/css-optimization-basics
- https://www.steveworkman.com/bookshelf
- https://pragprog.com/titles/tailwind2/modern-css-with-tailwind-second-edition
- "Making Things Better: Redefining the Technical Possibilities of CSS" by Rachel Andrew
- Know a good "CSS from Scratch" course you can recommend?
- https://www.twitch.tv/kevinpowellcss
- Apple Music on macOS
- https://www.liviuvasilescu.ro/blog/ziua-vignelli
- Tailwind CSS: From Zero to Production | Tailwind Labs + https://github.com/tailwindlabs/tailwindcss-from-zero-to-production
- Design for Safari 15
- https://courses.joshwcomeau.com/video-archive/css-for-js
- Designing in the Browser
- https://inclusivedesign24.org/2021/schedule
- CSS Layout from the inside out
- https://codepen.io/rachelandrew/full/2c48047f0816fa9050ec139256a2e8ba + https://m.youtube.com/watch?v=yMEjLBKyvEg
- https://www.freecodecamp.org/news/how-to-create-and-implement-a-design-system-with-css
- https://www.freecodecamp.org/news/learn-tailwind-css
- https://en.wikipedia.org/wiki/Louis_Cheskin#Bibliography
- https://colornamer.netlify.com
- https://www.w3.org/TR/css-color-4/#valdef-color-aliceblue
- Overly descriptive color palettes. inspired by https://github.com/joemfox/colorschemer
- Calico is a small utility written in Haskell which is cat but for colors.
- A Short History of Color Theory
- A tool to sort the named CSS colors in a way that it shows related colors together
- https://contrast-triangle.com
- https://adamschwartz.co/magic-of-css/chapters/4-color
- https://twitter.com/bucciblog/status/1325851426527080448
- https://www.amazon.com/Color-David-Kastan/dp/0300171870
- https://twitter.com/JaimeeBanksOS/status/1333274992067436546
- A color palette generator for design systems. + https://lokeshdhakar.com/projects/color-stacks
- https://www.freecodecamp.org/news/designing-in-color-abd358660a7b
- Math & data behind color spaces and color conversions.
- https://www.benbenandblue.com/episodes/2018/4/17/bbb-14-color
- https://www.sarasoueidan.com/blog/hex-rgb-to-hsl
- Color: A Visual History From Newton to Modern Color Matching Guides
- why something is a certain color
- Full Spectrum: How the Science of Color Made Us Modern by Adam Rogers
- https://www.popsci.com/science/ask-us-anything-why-cant-we-see-more-colors
- https://en.m.wikipedia.org/wiki/Shades_of_yellow#Cyber_yellow
- https://twitter.com/CSS__Cafe/status/1397955842406748161 + https://m.youtube.com/watch?v=mAw75_quIf8 + https://www.meetup.com/CSS-Cafe/events/278134039
- Generate themes for your site, the Curves editor lets you edit color scales across channels for HSL, HSV, LAB, RGB, and LCH.
- https://blog.jim-nielsen.com/2021/css-system-colors
- https://baselinehq.com/blog/colourblindness-information-ui-design-red-green-problems-tips-tricks.html
- https://www.uxmatters.com/mt/archives/2021/09/color-and-universal-design.php
- https://accessiblepalette.com
- https://wildbit.com/blog/2021/09/16/accessible-palette-stop-using-hsl-for-color-systems
- https://daverupert.com/2021/10/alpha-paintlet
- https://observablehq.com/@danburzo/css-gradient-line
- https://courses.joshwcomeau.com/css-for-js/treasure-trove/014-color-palettes
- https://ciechanow.ski/color-spaces
- https://www.amazon.com/Color-Scheme-Irreverent-History-Palettes-ebook/dp/B093QTSYPR
- https://psyche.co/ideas/why-it-took-us-thousands-of-years-to-see-the-colour-violet
- https://github.com/webinista/colortheory
- https://svgees.us/blog/whatGamuts.html
- Color tool based on human perception
- https://pspeter3.com/blog/2020/02/19/accessible-contrast-shades
- Interactive version of Sanzo Wada's - "A Dictionary of Color Combinations"
- https://blinry.org/what-is-color + Gamma correction: the secret behind pretty colors
- https://www.nickkolenda.com/color-psychology
- https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl
- Get random, accessible color combinations
- Traité des couleurs servant à la peinture à l’eau | A. Boogert
- Esoteric Palette Generator Mico-Lib Interpolating HSL Color in cartesian space + https://news.ycombinator.com/item?id=34662722 + https://elastiq.notion.site/elastiq/Color-My-Journey-Through-the-Spectrum-2cfd8dc540474b1c9ef381b9a3bc0f8e + https://m.youtube.com/@meodai/playlists?view=1&sort=lad&flow=grid
- https://biblioteca-digitala.ro/?pub=6191-analiza-structurala-a-vocabularului-limbii-romane-contemporane-numele-de-culori
- https://keithjgrant.com/posts/2023/04/its-time-to-learn-oklch-color
- https://backend.picular.co/api/search?query=cyan
- https://backend.picular.co/api/search?query=%23C7C3C1
- https://bottosson.github.io/posts/colorwrong
- Who can use this color combination?
- https://noti.st/rachelandrew
- Amit Sheen: https://m.youtube.com/playlist?list=PLobGLCa6IPmhHCZn3q0GFs5hNimxgzjMK, https://codepen.io/amit_sheen
- https://twitter.com/zehf/status/1310664033234808833
- Kevin Powell
- https://github.com/micromata/awesome-css-learning
- Jhey Tompkins
- https://github.com/hendurhance/ui-ux
- https://bootcamp.uxdesign.cc/ui-ux-visual-designers-behind-great-games-1bd1b2724001
- https://github.com/nucliweb/People-You-Should-Follow-on-CodePen
- https://github.com/AllThingsSmitty/css-protips
- Prebuilt Tailwind components
- Lynn Fisher
- https://csslayout.io/patterns
- https://web.dev/patterns/components
- Basic todo app functionality without using JavaScript.
- https://github.com/trueskawka/css-drawings
- Styled input range (slider/progress) by Mihai-Cristian Voinea
- WICKEDBLOCKS are a growing collection of more than 120 layout blocks and components built with Tailwind CSS V2 ready to copy paste on your Tailwind project
- https://twitter.com/search?q=(from%3Akevinjpowell)%20%23csstipoftheday + https://codepen.io/collection/nJzQBY
- https://codepen.io/2020/popular/pens/10
- 13 Tips to improve Landing Page Design.
- https://dev.to/karmasakshi/make-your-pwas-look-handsome-on-ios-1o08
- https://github.com/l-hammer/You-need-to-know-css
- https://github.com/alexcican/lab
- Full Screen Vertical Scroll Snap
- https://markodenic.com/css-tips
- cool conic-gradient() patterns!
- https://www.quaxio.com/pure_css_digital_clock.html
- CSS drawings with only one HTML element
- A curated list of websites with an extra bit of fun
- https://erikarow.land/other/colophon
- https://github.com/stars/brianlovin/lists/personal-websites
- http://www.gregoryschmidt.ca/writing/when-is-a-pixel-not-a-pixel-pixels-points-dps
- https://joshcollinsworth.com/blog/never-use-px-for-font-size
- https://shkspr.mobi/blog/2021/02/just-because-i-have-a-vertical-screen-doesnt-mean-im-on-a-phone + https://news.ycombinator.com/item?id=26000405
- https://wattenberger.com/blog/css-percents
- Does Safari 15 finally fix viewport height?
- https://n12v.com/css-retina-and-physical-pixels
- vh, svh, lvh, and dvh
- https://ashleemboyer.com/blog/why-you-should-use-px-units-for-margin-padding-and-other-spacing-techniques
- min-content, max-content, fit-content
- https://blog.logrocket.com/understanding-min-content-max-content-fit-content-css
- use the box-shadow property to created a layered component.
- How They Fit Together: Transform, Translate, Rotate, Scale, and Offset
- https://justmarkup.com/articles/2020-04-15-css-property-in-a-tweet
- https://www.stefanjudis.com/today-i-learned/defined-can-be-used-to-target-not-yet-defined-custom-elements
- https://ishadeed.com/article/finding-the-root-cause
- https://css-tricks.com/a-complete-guide-to-css-gradients
- https://dev.opera.com/articles/css-will-change-property + https://aerotwist.com/blog/bye-bye-layer-hacks
- https://www.bram.us/2020/11/30/native-aspect-ratio-boxes-in-css-thanks-to-aspect-ratio
- https://kilianvalkhof.com/2021/css-html/you-want-overflow-auto-not-overflow-scroll
- https://schepp.dev/posts/smooth-scrolling-and-page-search
- https://www.bram.us/2021/01/11/nested-media-queries
- https://www.zachleat.com/web/fluid-images
- @scroll-timeline
- https://justmarkup.com/articles/2020-04-15-css-property-in-a-tweet
- https://noti.st/rachelandrew/VeraEX/understanding-display
- https://www.oddbird.net/2021/05/14/support-unknown
- fit-content and fit-content()
- https://web.archive.org/web/20160806230624/http://colinaarts.com/articles/inline-block-and-you
- https://web.archive.org/web/20161029155622/https://colinaarts.com/articles/the-magic-of-overflow-hidden
- https://www.bram.us/2021/09/15/the-future-of-css-cascade-layers-css-at-layer
- https://medium.com/@johan.isaksson/how-i-made-googles-data-grid-scroll-10x-faster-with-one-line-of-css-78cb1e8d9cb1
- https://samuelkraft.com/blog/safari-15-bottom-tab-bars-web
- https://www.bram.us/2021/12/27/css-in-2022
- https://ishadeed.com/snippet/fit-content
- Use :has() to power micro-interactions and theme
- CSS Features to start learning, as I expect them to ship in all browsers in 2022
- The missing shorthand for logical properties
- https://www.miriamsuzanne.com/2022/07/04/body-margin-8px
- https://patrickbrosset.com/articles/2022-10-24-do-you-really-understand-CSS-radial-gradients
- https://www.otsukare.info/2022/10/25/css-values-definitions
- https://www.matuzo.at/blog/2022/100-days-of-more-or-less-modern-css
- clip-path
- https://una.im/color-mix-opacity
- https://fullystacked.net/posts/scope-in-css + https://twitter.com/pepelsbey_dev/status/1664767779369541632
- https://blog.richardekwonye.com/bezier-curves
align-content- https://fullystacked.net/accentcolor
- https://www.w3.org/2021/10/TPAC/demos/css-nesting.html
- https://css-tip.com/first-last-element-with-class
- https://jeremenichelli.io/2015/11/the-first-child-reset
- https://jaketracey.com/styling-accessible-html-file-inputs
- Giving users and developers more control over focus
- https://matthiasott.com/notes/focus-visible-is-here + https://twitter.com/m_ott/status/1314917091523342338
- https://www.bram.us/2021/04/15/identify-and-extract-pseudo-element-selectors-from-built-in-html-elements-using-devtools
- https://www.azabani.com/2022/09/01/meet-the-css-highlight-pseudos.html + https://www.azabani.com/talks
- https://developer.chrome.com/articles/at-scope
- https://jwdallas.com/posts/namingcssvariables
- https://piccalil.li/tutorial/getting-started-with-css-custom-properties
- https://increment.com/frontend/a-users-guide-to-css-variables
- https://www.sarasoueidan.com/blog/style-settings-with-css-variables
- https://github.com/notoriousb1t/awesome-css-variables
- CSS Vars + HSL colors = a powerful color system.
- Dark mode in 5 minutes, with inverted lightness variables
- https://css.oddbird.net/rwd/query/explainer
- Designing With Container Queries
- https://css-tricks.com/can-we-create-a-resize-hack-with-container-queries
- https://mxb.dev/blog/media-queries-in-times-of-container-queries
- https://github.com/sturobson/Awesome-Container-Queries
- Improving CSS Architecture with Cascade Layers, Container Queries, Scope
- https://layout.bradwoods.io
- https://grid.layoutit.com
- https://www.hsablonniere.com/prevent-layout-shifts-with-css-grid-stacks--qcj5jo
- https://www.learnwithjason.dev/let-s-learn-css-grid
- Grid by example, Rachael Andrew
- https://piccalil.li/tutorial/build-a-responsive-media-browser-with-css
- https://frontend.horse/articles/thinking-outside-the-box-with-css-grid
- https://calendartricks.com/a-calendar-in-three-lines-of-css
- https://melanie-richards.com/blog/css-grid-sticky
- https://www.jayfreestone.com/writing/bulletproof-flag
- https://polypane.app/blog/faking-container-queries-with-css-grid
- https://fjolt.com/article/a-guide-to-css-grid
- https://noti.st/rachelandrew/Mny9Vg/grid-content-re-ordering-and-accessibility
- https://codepen.io/TurkAysenur/full/gOmMgpx
- https://github.com/PrathamKumar14/CSS-Layout-Notes
- https://vgpena.github.io/using-css-grid-the-right-way
- Extending elements beyond the content area with CSS Grid & named grid lines
- https://utopia.fyi/blog/designing-a-utopian-layout-grid + https://utopia.fyi/grid/calculator
- https://developer.chrome.com/en/blog/reading-order
- discoveries on how the CSS gap property operates when hiding items in grid-template & grid-auto layouts
- The new CSS
subgridvalue allows a child element to inherit the columns and rows from its parent + https://codepen.io/jh3y/pen/zYyYGLx
- https://github.com/yoksel/flex-cheatsheet
- https://github.com/philipwalton/flexbugs
- https://github.com/philipwalton/solved-by-flexbox
- My incomplete mental model for flexbox's main axis
- https://dev.to/melnik909/my-3-tips-about-flexbox-that-will-make-your-css-better-50g6
- https://tiffanybbrown.com/2022/01/how-does-flexbox-work/index.html
- https://www.joshwcomeau.com/css/interactive-guide-to-flexbox
- https://ethanmarcotte.com/wrote/points-break
- https://polypane.app/blog/overlooked-breakpoints-in-responsive-design
- https://www.sarasoueidan.com/blog/prefers-color-scheme-browser-vs-os
- https://helloyes.dev/blog/2022/re:-css-breakpoints-every-developer-needs-to-know
- https://web.dev/patterns/layout
- https://github.com/incompl/csslayoutsite
- https://courses.kevinpowell.co/courses/conquering-responsive-layouts
- https://moderncss.dev
- https://kilianvalkhof.com/2020/css-html/full-bleed-layout-using-simple-css
- https://blog.benestudio.co/custom-file-upload-button-with-pure-css-5aacf39aa0a + https://codepen.io/adambene/pen/xRWrXN
- https://responsibleweb.app + https://github.com/joyheron/responsible-web-apps
- Minimal snippets for modern CSS layouts and components
- Your cheat sheet for float, clear and defer
- Minimal snippets for modern CSS layouts and components
- https://adrianroselli.com/2021/04/sortable-table-columns.html
- https://alistapart.com/article/designing-for-the-unexpected
- https://noti.st/rachelandrew/3IBB4Z/css-layout-from-the-inside-out
- A collection of CSS snippets to help you do progressive enhancement in eBooks
- https://foobartel.com/notes/css-contextual-spacing
- Creating tiny zines using HTML/CSS layout.
- An extensive list of CSS/JS browserhacks from all over the interwebs.
- https://www.magicpattern.design/tools/css-backgrounds
- https://patrickbrosset.com/articles/2016-05-27-visual-Tools--Prototyping-in-the-browser
- https://www.swyx.io/why-tailwind + https://markus.oberlehner.net/blog/tailwind-css-the-antifragile-css-framework
- https://github.com/creativetimofficial/tailwind-starter-kit
- Grab the color palette from an image using just Javascript. Works in the browser and in Node.
- Visualize Sass HSL color functions in real-time without compiling. + https://github.com/jimniels/sassme
- A design tool for comparing colors.
- A generator to create the "frosted glass aesthetic" which combines a partially transparent background with backdrop-filter to create the effect.
- VS Code extension that lets you open a CSS Flexbox cheatsheet directly in the editor.
- Conic.css - nice, simple conic gradients
- amazing generators
- What's the best (simple) tool for creating animations?
- https://davidwalsh.name/detect-overflow-elements
- https://github.com/sachin1092/awesome-material
- https://github.com/davidgilbertson/know-it-all
- Tailwind CSS components
- Alfred 4 Workflow to find the perfect color in the Tailwind Color Palette
- https://github.com/scastiel/3d-book-image-css-generator
- Generate clothoid rounded corners by CSS clip-path
- Dynamic Viewport Height in Tailwind
- Merge Tailwind CSS classes without style conflicts
- https://tailwindcomponents.com/cheatsheet
- https://flowbite.com/tools/tailwind-cheat-sheet
- https://github.com/evilmartians/oklch-picker + https://bottosson.github.io/posts/oklab + Two new color spaces for color picking - Okhsv and Okhsl
- http://www.irongeek.com/i.php?page=videos/bsidestampa2020/track-e-09-http-covert-channel-using-only-htmlcss-thomas-slota-william-york
- https://github.com/PortSwigger/css-exfiltration + https://portswigger.net/research/ublock-i-exfiltrate-exploiting-ad-blockers-with-css
- https://github.com/OliverBrotchie/CSS-Fingerprint
- https://blog.huli.tw/2022/09/29/css-injection-2
- https://www.secforce.com/blog/new-technique-of-stealing-data-using-css-and-scroll-to-text-fragment-feature
- https://sanderwind.medium.com/unleashing-the-power-of-css-injection-the-access-key-to-an-internal-api-789b166d0527
- https://wiki.csswg.org/ideas/mistakes
- https://dfkaye.com/posts/2021/05/07/custom-attributes-are-fast-good-and-cheap + https://www.keithcirkel.co.uk/css-classes-considered-harmful