davidbisset.social

css

  • From @chriscoyier "One of the Boss Battles of #CSS is Almost Won! Transitioning to Auto" https://frontendmasters.com/blog/one-of-the-boss-battles-of-css-is-almost-won-transitioning-to-auto/ "The experimental CSS function calc-size(auto) can be used so that transitions and animations can go from zero (0) to this value. But that is unlikely to be the final syntax! ⚠️ So be forewarned."

  • Nice tip: Case Insensitive #CSS Attribute Selector https://davidwalsh.name/css-attribute-case

  • "Here’s What We Learned From the First State of #HTML Survey" https://frontendmasters.com/blog/state-of-html-2023-results-2 "…when asked how they allocated their time between writing HTML/#CSS and JavaScript/TypeScript code, 59% said they spent more than half their time writing #JavaScript – even though the survey was clearly aimed at people interested in HTML."

  • "In Praise Of The Basics" https://www.smashingmagazine.com/2024/05/in-praise-of-the-basics/ "Long live the basics! Long live the “a-ha!” moments that help us all fall in love with the World Wide Web." #webdev #oldschool #html #css

  • Modern #CSS Layouts: You Might Not Need A Framework For That #webdev https://www.smashingmagazine.com/2024/05/modern-css-layouts-no-framework-needed/

  • Making a tic-tac-toe game with 'randomness' using pure #HTML and #CSS. Without #JavaScript. https://blog.scottlogic.com/2024/05/17/noJS-2-stochastic-boogaloo.html

  • Why new #CSS features aren't getting fast adoption as one might think. https://mxb.dev/blog/old-dogs-new-css-tricks/ "While there are many different reasons for the slow adoption, I think one of the biggest barriers are our own brains."

  • matcha.css is a "drop-in semantic styling library in pure #CSS". https://matcha.mizu.sh/ Designed to style #HTML elements similarly to a default browser stylesheet, eliminating the need for users to manually patch their documents. Ideal for fast prototyping, static HTML pages, #Markdown generated documents, etc.

  • Untitled post 59366

    .counter_with_drawers { margin-left: -40px;} #CSS #memes

  • Popover element entry and exit animations in a few lines of #CSS https://pawelgrzybek.com/popover-element-entry-and-exit-animations-in-a-few-lines-of-css/ (Technically works in Firefox, but better in Chrome). via @pawelgrzybek

  • “Why don’t we talk about minifying #css anymore?” #webdev https://blog.sentry.io/why-dont-we-talk-about-minifying-css/

  • Designing furniture using the #CSS grid https://alnvdl.github.io/2023/01/07/designing-furniture-using-the-css-grid.html https://alnvdl.github.io/squareplanner/#

  • Untitled post 59306

    Man I love #css Time-based CSS Animations w/ math functions. https://yuanchuan.dev/time-based-css-animations via @yuanchuan

  • What You Need to Know about Modern #CSS (Spring 2024 Edition) https://frontendmasters.com/blog/what-you-need-to-know-about-modern-css-spring-2024-edition/ “even if you know about this stuff, it takes time to build the muscle memory around it.” #frontend

  • text-box-trim-examples ( jantimon/text-box-trim-examples )

    text-box-trim examples and playground (previously known as leading-trim) Created by jantimon on Nov 12, 2022.

  • Untitled post 59295

    CSS Text Box Trim examples. It's a #CSS property that allows you to remove the leading whitespace from a block of text. Useful for removing the space between the top of the text and the top of the container. #frontend

  • Detect #JavaScript Support in #CSS https://ryanmulligan.dev/blog/detect-js-support-in-css/

  • Untitled post 59282

    This could be handy. "The Ultimate Collection of #CSS only Shapes" https://css-shape.com/

  • Interesting and simple way for #AI, wondering what they used. Seems to work pretty well in my tests. Generate #palettes from a text prompt: https://aicolors.co/ #frontend #CSS

  • Neat. Printing music with #CSS Grid. https://cruncher.ch/blog/printing-music-with-css-grid/ #music #frontend

  • Masonry Layouts in #CSS https://www.csscade.com/masonry-layouts-in-css via @csscade #frontend

  • This is a pretty neat #CSS effect. "Blurry Text Reveal on Scroll" https://tympanus.net/codrops/2024/04/23/blurry-text-reveal-on-scroll/ #frontend

  • Love how #WebKit folks are asking for public input on the #CSS Grid (Masonry) layout. https://webkit.org/blog/15269/help-us-invent-masonry-layouts-for-css-grid-level-3/

  • Light/dark mode simplified by the #CSS light-dark() function https://pawelgrzybek.com/light-dark-mode-simplified-by-the-css-light-dark-function/ #frontend

  • 5 ways to style text with #CSS inspired by the Spider-verse https://blog.logrocket.com/5-ways-style-text-css-inspired-spider-verse/ #frontend #spiderman

  • Setting And Persisting Color Scheme Preferences With #CSS And A “Touch” Of #JavaScript https://www.smashingmagazine.com/2024/03/setting-persisting-color-scheme-preferences-css-javascript/

  • TIL about the "text-emphasis" #CSS property. 🫢 https://www.amitmerchant.com/spicing-up-text-with-text-emphasis-in-css/

  • "Monolith" is a #CLI tool for saving complete web pages as a single #HTML file. Embeds #CSS, image, and #JavaScript assets all at once, producing a single HTML5 document https://github.com/Y2Z/monolith https://crates.io/crates/monolith

  • Untitled post 59055

    magick.css is a minimalistic, (mostly) classless #CSS framework that has a "magically playful look… akin to the notes of a wizard". https://css.winterveil.net/

  • Why I 🧡 the web: "Single Div" #CSS Drawing Experiment https://a.singlediv.com/ AMAZING what you can do with just CSS. It's these proof of concepts and experiments that made (and continue to make) the web fun for devs like me. More:https://github.com/lynnandtonic/a-single-div #frontend