Shakedown Social

Frontend DogmaCSS Color Functions, by <a href="https://mastodon.social/@csstricks" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@csstricks</a>:<a href="https://css-tricks.com/css-color-functions/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://css-tricks.com/css-color-functions/</a><a href="https://mas.to/tags/guides" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#guides</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/colors" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#colors</a> <a href="https://mas.to/tags/functions" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#functions</a>

Jesse SkinnerI'm thinking of developing a new course or workshop in the fall.. would any of these interest you?<a href="https://toot.cafe/tags/webdev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webdev</a> <a href="https://toot.cafe/tags/svelte" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#svelte</a> <a href="https://toot.cafe/tags/html" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#html</a> <a href="https://toot.cafe/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a> <a href="https://toot.cafe/tags/javascript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#javascript</a> <a href="https://toot.cafe/tags/nginx" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#nginx</a> <a href="https://toot.cafe/tags/lua" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#lua</a> <a href="https://toot.cafe/tags/freelancer" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#freelancer</a>

Dusk To Don :raccoon:<a href="https://badhtml.com/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://badhtml.com/</a><a href="https://todon.eu/tags/cursedWebsites" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cursedWebsites</a> <a href="https://todon.eu/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://todon.eu/tags/webdev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webdev</a> <a href="https://todon.eu/tags/humor" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#humor</a>

Doug Parker 🕸️Anyone know if it's possible to remove all <a href="https://techhub.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> variables on an element?I'm thinking something like `all: initial;` but covering inherited CSS variables.The solutions I'm finding involving looking at loaded stylesheets on the page, which feels way more heavyweight than this should be.

CODEMODDSpeak Their Language: Simple Code Mods for a Multi-Lingual WebsiteIn today's interconnected world, your website has the potential to reach users across the globe.Good news! While large, enterprise-level localization involves many layers, you can start making your web pages multi-lingual with surprisingly simple HTML, CSS, and JavaScript hacksReady to make your website a polyglot?<a href="https://codemodd.blogspot.com/2025/06/speak-their-language-simple-code-mods.html" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codemodd.blogspot.com/2025/06/speak-their-language-simple-code-mods.html</a><a href="https://mastodon.social/tags/programming" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#programming</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/Computers" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Computers</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/JavaScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#JavaScript</a> <a href="https://mastodon.social/tags/languages" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#languages</a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a>

ValeI went to a bank and put a really high negative margin on all the money inside. This offset was enough for it to appear outside the bank, allowing me to abscond with it.Learn more neat tricks like this in my upcoming book, CSS for Crime.<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/csstips" rel="nofollow noopener noreferrer" target="_blank">#CSSTips</a> <a class="hashtag" href="https://fedi.vale.rocks/tag/webdev" rel="nofollow noopener noreferrer" target="_blank">#WebDev</a>

JamesCSS anchor positioning is going to be in all major browsers by the end of the year! 🎉 Sign up for OddBird's free weekly email course to learn how it's going to make layouts more performant and resilient, and unlock new design possibilities. <a href="https://front-end.social/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a> <a href="https://front-end.social/tags/webdev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webdev</a> <a href="https://oddbird.net/learn/courses/anchor-positioning/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://oddbird.net/learn/courses/anchor-positioning/</a>

Roel NieskensWould you rather pay 💰💰💰💰💰 up front for a webfont and be done with it?Or pay 💰 monthly/annually?And would you like to receive the relevant CSS for your webfont, or would you like to figure it out yourself?Please fill in <a href="http://fontstand.com/survey" rel="nofollow noopener noreferrer" translate="no" target="_blank">http://fontstand.com/survey</a> and help make (web)font (licensing) better!<a href="https://typo.social/tags/typography" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#typography</a> <a href="https://typo.social/tags/webdev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webdev</a> <a href="https://typo.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://typo.social/tags/fonts" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#fonts</a>

Sara SoueidanSeeing <a href="https://front-end.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> carousels being promoted as accessible again, so here is a periodic reminder:<a href="https://front-end.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> carousels are not "accessible by default" <a href="https://www.sarasoueidan.com/blog/css-carousels-accessibility/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://www.sarasoueidan.com/blog/css-carousels-accessibility/</a> They are still highly experimental and there are still many open <a href="https://front-end.social/tags/accessibility" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#accessibility</a> questions & issues being discussed.+The browser will not do everything for you—you'll still have work to do, too.

Ana Tudor 🐯I have a new article out <a href="https://frontendmasters.com/blog/grainy-gradients/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://frontendmasters.com/blog/grainy-gradients/</a>It's about a better technique to create grainy gradients, without the big problem that layering a noise layer brings: altering the original gradient palette (to a greater or lesser extent, depending on the approach used).<a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/SVG" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SVG</a> <a href="https://mastodon.social/tags/filter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#filter</a> <a href="https://mastodon.social/tags/svgFilter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#svgFilter</a> <a href="https://mastodon.social/tags/grainy" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#grainy</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#code</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/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dev</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/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDevelopment</a>

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/Comics" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Comics</a> Sheriff vs. Sans-Sheriff · When web typography goes wild west <a href="https://ilo.im/164hwm" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://ilo.im/164hwm</a>_____ <a href="https://mastodon.social/tags/Font" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Font</a> <a href="https://mastodon.social/tags/Typeface" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Typeface</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/Website" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Website</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/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a>

Joe CrawfordTuesday at 1pm Eastern: Front End Study Hall 030: an <a href="https://xoxo.zone/tags/IndieWeb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#IndieWeb</a> jawn where whoever joins the hall study and work with <a href="https://xoxo.zone/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a> and <a href="https://xoxo.zone/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> to unwrap troubles and elucidate web pages. Come be a part of it. Tell a friend. Click around for prior notes. <a href="https://events.indieweb.org/2025/06/front-end-study-hall-030-RO3uuIOftX24" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://events.indieweb.org/2025/06/front-end-study-hall-030-RO3uuIOftX24</a>

Dawn Tåke 🌙 :sparkletrans:Well, aside from it not verifying me on Mastodon yet, I have my website in a pretty good place. I'm not sure of the legibility of the "villainous" side, (there are more links if you click on Villainy,) and some of the icons are broken and I can't fix that at work, but otherwise, it's a pretty solid Web 1.0 lookin' thing. HTML, I learned some CSS to simplify things, but no Javascript, no flash, no nada else.Check it out if you care to! <a href="https://tourma.great-site.net/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://tourma.great-site.net/</a><a href="https://tech.lgbt/tags/Website" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Website</a> <a href="https://tech.lgbt/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a> <a href="https://tech.lgbt/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a>

Revesdespace🛰️ <a href="https://universeodon.com/tags/PhotoDuJour" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#PhotoDuJour</a> : La station spatiale chinoise <a href="https://universeodon.com/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> vu par un satellite BlackSky Via HEOSpace

Caleb Hailey📢 Calling all dark mode enthusiast 🌚For websites that offer a built-in dark mode, how dark is dark enough? Is it like as-black-as-my-soul dark, or would a darker shade color work? For example, what about this bg color? <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>

Roel NieskensIs anybody out there using absolute font sizes in their CSS?<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/absolute-size" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://developer.mozilla.org/en-US/docs/Web/CSS/absolute-size</a>I saw <a href="https://front-end.social/@chriscoyier" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@chriscoyier</a> use them at <a href="https://typo.social/tags/CSSDay" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSSDay</a> and was wondering if this built-in typographic scale is any good?<a href="https://typo.social/tags/typography" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#typography</a> <a href="https://typo.social/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a>

JcrabappleA new way to style gaps in <a href="https://dmv.community/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a>  |  Blog  |  Chrome for Developers<a href="https://developer.chrome.com/blog/gap-decorations" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://developer.chrome.com/blog/gap-decorations</a>

CODEMODDRoll into a Refresh: Your Simple Dice Roller Game for Instant Brain Breaks!Today, we're diving into a tiny project: a Simple Dice Roller Game. It's built with just a few lines of HTML, styled cleanly with CSS (using Tailwind for a modern look), and brought to life with a dash of JavaScript. No complex setups, no installs - just an instant, smile-inducing distraction<a href="https://codemodd.blogspot.com/2025/06/roll-into-refresh-your-simple-dice.html" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codemodd.blogspot.com/2025/06/roll-into-refresh-your-simple-dice.html</a><a href="https://mastodon.social/tags/Programming" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Programming</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/Computers" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Computers</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> <a href="https://mastodon.social/tags/GameDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#GameDev</a> <a href="https://mastodon.social/tags/Game" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Game</a>

Caleb HaileyThe first major component of the <a href="https://mastodon.social/@makehypertext" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@makehypertext</a> movement is HyperTemplates – a pure-HTML templating engine and blazing fast static site generator. 🚀<a href="https://hypertemplates.net/blog/introducing-hypertemplates/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://hypertemplates.net/blog/introducing-hypertemplates/</a>You can build incredible modern websites with pure <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>, and <a href="https://mastodon.social/tags/Javascript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Javascript</a>! No frameworks, no build tools, no sacrifices, and no nonsense (unless you're into those sorts of things). 😊We hope you will give HyperTemplates a try, and we can't wait to see what you make with it! 📐<a href="https://mastodon.social/tags/MakeHyperText" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#MakeHyperText</a>

CSS by T. Afif :verified:💡 CSS Tip!Save this code for the future. It will be the easiest way to create hexagon shapes and ... 🥁🥁🥁 ... it works with border! 🤩<a href="https://css-tip.com/hexagon/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://css-tip.com/hexagon/</a>The magic? The new corner-shape property!<a href="https://front-end.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://front-end.social/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a>

Recent searches

Search options

Administered by:

Server stats:

#css