Mastodon.green

Inautilo<a href="https://mastodon.social/tags/Design" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Design</a> <a href="https://mastodon.social/tags/Approaches" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Approaches</a> Designing in the browser · Your starting point for in-browser mockups <a href="https://ilo.im/163dnu" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://ilo.im/163dnu</a>_____ <a href="https://mastodon.social/tags/Browser" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Browser</a> <a href="https://mastodon.social/tags/DesignProcess" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#DesignProcess</a> <a href="https://mastodon.social/tags/UiDesign" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#UiDesign</a> <a href="https://mastodon.social/tags/WebDesign" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebDesign</a> <a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Development</a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebDev</a> <a href="https://mastodon.social/tags/Frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Frontend</a> <a href="https://mastodon.social/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/JavaScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#JavaScript</a>

fcr<a href="https://post.lurk.org/@xpub" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@xpub</a> > <a href="https://post.lurk.org/tags/Declarations" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Declarations</a>", project/special issue on CSS by Master Experimental Publishing, Piet Zwart Institute, Willem de Kooning Academy, Hogeschool Rotterdam, presented at <a href="https://gts.varia.zone/@varia" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@varia</a> Rotterdam, 19th April 2024[moving images from high-speed still photographs]<a href="https://spectra.video/w/6NZbvCCmukYiPznJdvtCtF" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://spectra.video/w/6NZbvCCmukYiPznJdvtCtF</a><a href="https://post.lurk.org/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a> <a href="https://post.lurk.org/tags/experimentalpublishing" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#experimentalpublishing</a> <a href="https://post.lurk.org/tags/declarations" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#declarations</a>

Paul Houle💌 Better typography with text-wrap pretty<a href="https://webkit.org/blog/16547/better-typography-with-text-wrap-pretty/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://webkit.org/blog/16547/better-typography-with-text-wrap-pretty/</a><a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> <a href="https://mastodon.social/tags/www" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#www</a> <a href="https://mastodon.social/tags/browsers" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#browsers</a> <a href="https://mastodon.social/tags/html" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#html</a> <a href="https://mastodon.social/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a> <a href="https://mastodon.social/tags/typography" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#typography</a> <a href="https://mastodon.social/tags/design" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#design</a> <a href="https://mastodon.social/tags/programming" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#programming</a>

Frontend DogmaSo, You Want to Give Up CSS Pre- and Post-Processors…, by @zellwk.bsky.social (<a href="https://mastodon.social/@csstricks" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@csstricks</a>):<a href="https://css-tricks.com/so-you-want-to-give-up-css-pre-and-post-processors/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://css-tricks.com/so-you-want-to-give-up-css-pre-and-post-processors/</a><a href="https://mas.to/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a> <a href="https://mas.to/tags/preprocessors" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#preprocessors</a> <a href="https://mas.to/tags/postprocessors" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#postprocessors</a> <a href="https://mas.to/tags/tailwind" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#tailwind</a> <a href="https://mas.to/tags/lightningcss" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#lightningcss</a>

Number6 :syncthing:Hey <a href="https://fosstodon.org/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> experts!I'm looking a some CSS where there are forward slashes ("/") in front of curly braces.This use of slashes is new to me. Or maybe it is something proprietary. Could only google traditional uses of slash inside font specs.Can anyone explain? Sample below --@-moz-document domain("mastodon.social"), domain("fosstodon.org"), domain("peoplemaking.games"), domain("toot.cat"), domain("vt.social") { / { responsiveW1 = 1320px

BCWHSDigital Toolbox: CSS Is a style sheet language used for specifying the presentation and styling of a document written in a markup language such as HTML/CFML. <a href="https://wadebach.blackcatwhitehatsecurity.com" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://wadebach.blackcatwhitehatsecurity.com</a> <a href="https://mastodon.social/tags/Digital" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Digital</a> <a href="https://mastodon.social/tags/Toolbox" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Toolbox</a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/programming" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#programming</a>

Mike-麥-Mai-v1.618 😎a tiny codepen for a quick CSS tip. probably old news to some people but i still encounter devs who don't know this little nugget. <a href="https://codepen.io/mikemai2awesome/pen/NPPPozJ" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/mikemai2awesome/pen/NPPPozJ</a><a href="https://mastodon.social/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a> <a href="https://mastodon.social/tags/html" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#html</a> <a href="https://mastodon.social/tags/a11y" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#a11y</a>

Reilly Spitzfaden (they/them)My IndieWeb blog carnival entry on “renewal”! I talk about reconnecting w/ what I most enjoy about composing & coding, and avoiding treating leisure & projects as if I need to impress someone. <a href="https://reillyspitzfaden.com/posts/2025/04/indieweb-blog-carnival-renewal/" rel="nofollow noopener noreferrer" target="_blank">reillyspitzfaden.com/posts/2025/0...</a> <a class="hashtag" href="https://bsky.app/search?q=%23IndieWeb" rel="nofollow noopener noreferrer" target="_blank">#IndieWeb</a> <a class="hashtag" href="https://bsky.app/search?q=%23Blog" rel="nofollow noopener noreferrer" target="_blank">#Blog</a> <a class="hashtag" href="https://bsky.app/search?q=%23Blogging" rel="nofollow noopener noreferrer" target="_blank">#Blogging</a> <a class="hashtag" href="https://bsky.app/search?q=%23WebDev" rel="nofollow noopener noreferrer" target="_blank">#WebDev</a> <a class="hashtag" href="https://bsky.app/search?q=%23WebDesign" rel="nofollow noopener noreferrer" target="_blank">#WebDesign</a> <a class="hashtag" href="https://bsky.app/search?q=%23Coding" rel="nofollow noopener noreferrer" target="_blank">#Coding</a> <a class="hashtag" href="https://bsky.app/search?q=%23HTML" rel="nofollow noopener noreferrer" target="_blank">#HTML</a> <a class="hashtag" href="https://bsky.app/search?q=%23CSS" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://reillyspitzfaden.com/posts/2025/04/indieweb-blog-carnival-renewal/" rel="nofollow noopener noreferrer" target="_blank">IndieWeb Blog Carnival — “Rene...</a>

Reilly Spitzfaden (they/them)My April IndieWeb blog carnival entry on “renewal”! I often feel compelled to tweak and redesign my website at the expense of other things I value. I talk about reconnecting with what I most enjoy about composing and coding, and avoiding treating my leisure and projects as if I need to impress someone.<a href="https://reillyspitzfaden.com/posts/2025/04/indieweb-blog-carnival-renewal/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://reillyspitzfaden.com/posts/2025/04/indieweb-blog-carnival-renewal/</a><a href="https://hachyderm.io/tags/IndieWeb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#IndieWeb</a> <a href="https://hachyderm.io/tags/Blog" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Blog</a> <a href="https://hachyderm.io/tags/Blogging" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Blogging</a> <a href="https://hachyderm.io/tags/WebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebDev</a> <a href="https://hachyderm.io/tags/WebDesign" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebDesign</a> <a href="https://hachyderm.io/tags/Coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Coding</a> <a href="https://hachyderm.io/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a> <a href="https://hachyderm.io/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a>

adamghillDid you know that the <a href="https://indieweb.social/tags/Django" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Django</a> admin can be themed?! 🤯 Here are 10 packages for the Django admin which can transform it with a Dracula theme, <a href="https://indieweb.social/tags/Bootstrap" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Bootstrap</a> <a href="https://indieweb.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a>, <a href="https://indieweb.social/tags/Tailwind" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Tailwind</a>, and more!Jazz up your Django admin today! 🎷<a href="https://www.djangoproject.com/weblog/2025/apr/18/admin-theme-roundup/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://www.djangoproject.com/weblog/2025/apr/18/admin-theme-roundup/</a>

Frontend DogmaItem Flow: A New Unified Concept for Layout, by @saron.bsky.social and <a href="https://w3c.social/@fantasai" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@fantasai</a> and others (<a href="https://front-end.social/@webkit" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@webkit</a>):<a href="https://webkit.org/blog/16587/item-flow-part-1-a-new-unified-concept-for-layout/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://webkit.org/blog/16587/item-flow-part-1-a-new-unified-concept-for-layout/</a><a href="https://mas.to/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a> <a href="https://mas.to/tags/layout" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#layout</a> <a href="https://mas.to/tags/grids" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#grids</a> <a href="https://mas.to/tags/flexbox" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#flexbox</a> <a href="https://mas.to/tags/masonry" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#masonry</a>

ValeThere is very little in this world more satisfying than getting CSS shorthand correct first time.<a class="hashtag" href="https://fedi.vale.rocks/tag/css" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a class="hashtag" href="https://fedi.vale.rocks/tag/webdev" rel="nofollow noopener noreferrer" target="_blank">#WebDev</a> <a class="hashtag" href="https://fedi.vale.rocks/tag/frontenddev" rel="nofollow noopener noreferrer" target="_blank">#FrontEndDev</a>

Eric Mächler 🖖HTML & CSS Hintergrund Experimente #1 <a href="https://www.chefblogger.me/2021/12/20/html-css-hintergrund-experimente-1/?utm_source=mastodon&utm_medium=social" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://www.chefblogger.me/2021/12/20/html-css-hintergrund-experimente-1/?utm_source=mastodon&utm_medium=social</a> <a href="https://masto.maechler.cloud/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a>

Frontend Dogma“:only-child”, by <a href="https://front-end.social/@kevinpowell" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@kevinpowell</a>:<a href="https://html-css-tip-of-the-week.netlify.app/tip/only-child/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://html-css-tip-of-the-week.netlify.app/tip/only-child/</a><a href="https://mas.to/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a> <a href="https://mas.to/tags/selectors" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#selectors</a>

DrunkenTortoisePicked these 2 books up from world of books <a href="https://mastodon.social/tags/books" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#books</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#coding</a> <a href="https://mastodon.social/tags/javascript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#javascript</a> <a href="https://mastodon.social/tags/html" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#html</a> <a href="https://mastodon.social/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a>

Franck ☠️[OT] CSS c'est diablerie <a href="https://mstdn.nrkn.fr/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://open-time.net/post/2025/04/18/CSS-c-est-diablerie" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://open-time.net/post/2025/04/18/CSS-c-est-diablerie</a>

Justin FerrellThis is cool! Because Google Fonts isn't <a href="https://mastodon.social/tags/GDPR" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#GDPR</a> compliant, someone built "Bunny Fonts" to be a GDPR-compliant alternative. Drop-in replacement with an identical API!<a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebDev</a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a><a href="https://fonts.bunny.net/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://fonts.bunny.net/</a>

Frontend DogmaIf It Works, It’s Right, by @bell.bz (@piccalil.li):<a href="https://piccalil.li/blog/if-it-works-its-right/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://piccalil.li/blog/if-it-works-its-right/</a><a href="https://mas.to/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a>

Frontend DogmaOut of Order, by <a href="https://social.design.systems/@donnie" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@donnie</a>:<a href="https://blog.damato.design/posts/out-of-order/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://blog.damato.design/posts/out-of-order/</a><a href="https://mas.to/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a> <a href="https://mas.to/tags/positioning" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#positioning</a> <a href="https://mas.to/tags/design" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#design</a>

Nina HaghighiBack when I was learning about <a href="https://mastodon.social/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a>, there was an amazing resource called CSS Zen Garden. It helped expand my knowledge of what was possible. It was like magic. TIL it's still around (no Internet Archive needed). <a href="https://csszengarden.com" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://csszengarden.com</a>

Recent searches

Search options

Administered by:

Server stats:

#css