davidbisset.social

css

  • Untitled post 59634

    #CSS @property and the New Style https://ryanmulligan.dev/blog/css-property-new-style/ "The ensuing demo explores what's possible in the next generation of CSS."

  • Why I 🧡 the web. Someone made a site that lets everyone edit the same #gradient in real-time. https://internetgradient.com/ Going a little #viral so it's slow. Best to use on a desktop, full screen and Chrome (Firefox worked slower). #CSS

  • #CSS finally adds vertical centering in 2024 https://build-your-own.org/blog/20240813_css_vertical_center/

  • A recent and "fresh look" at the #CSS grid template areas and how to take advantage of its full potential. #webdev https://ishadeed.com/article/css-grid-area/

  • An introduction to #CSS container queries. https://www.hongkiat.com/blog/css-container-queries/?ref=web-design-weekly.com #webdev

  • A collection of simple one-line #CSS solutions to add "little improvements to any web page". https://alvaromontoro.com/blog/68055/ten-css-one-liners-for-almost-every-project #webdev

  • …and here's an #opensource app that turns #photos into kaleidoscope animations. #JavaScript #CSS https://collidingscopes.github.io/

  • Flow Charts with #CSS Anchor Positioning https://coryrylan.com/blog/flow-charts-with-css-anchor-positioning

  • 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