Create accountLogin

Recent searches

No recent searches

Search options

Not available on mstdn.maud.io.
mstdn.maud.io is one of the many independent Mastodon servers you can use to participate in the fediverse.
The place to express your ❤️ more freely. / あなたの「すき」をもっと自由に書き表すための場所。

Administered by:

Server stats:

347
active users

mstdn.maud.io: AboutStatusProfiles directoryPrivacy policyTerms of service

Mastodon: AboutGet the appKeyboard shortcutsView source codev4.4.0-alpha.4+maud

#css

14 posts11 participants1 post today
CSS by T. Afif :verified:<p>And here is the code to generate any polygon shape with rounded corners!</p><p><a href="https://css-tip.com/rounded-polygon/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="">css-tip.com/rounded-polygon/</span><span class="invisible"></span></a></p><p>Update the variables then get your code (There is another variation using CSS variables as well).</p><p><a href="https://front-end.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> <a href="https://front-end.social/tags/HTML" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>HTML</span></a></p>
CSS by T. Afif :verified:<p>💡 CSS Tip!</p><p>Shapes with rounded corners are a nightmare in CSS but it's now easy with the new shape() function! 🥳</p><p>Let's start with a classic: The Hexagon</p><p><a href="https://css-tip.com/rounded-hexagon/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="">css-tip.com/rounded-hexagon/</span><span class="invisible"></span></a></p><p>Yes, you can animate the radius and rotate the shape. Modern CSS is cool!</p><p>Do you want another polygon shape? I am cooking a generic code to create all of them.</p><p><a href="https://front-end.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> <a href="https://front-end.social/tags/HTML" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>HTML</span></a></p>
Mia (web luddite)<p>We're giving away a free ticket to the CSS Layout Workshop. To be entered in the drawing, comment below with…</p><p>- A question you have about CSS layout<br>- Or a fun demo, trick, or snippet of CSS</p><p>The winner will be announced on Friday, April 18!</p><p><a href="https://front-end.social/tags/css" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>css</span></a> <a href="https://www.oddbird.net/workshops/cascading-layouts/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://www.</span><span class="ellipsis">oddbird.net/workshops/cascadin</span><span class="invisible">g-layouts/</span></a></p>
CSS by T. Afif :verified:<p>If you don't know, my CSS Tip website is open to advertisers. Don't miss the opportunity to promote your product and support my work!</p><p>Reach a wide audience of passionate web developers (~14.000 active users per month) starting from 150$/month.</p><p><a href="https://css-tip.com/advertise/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="">css-tip.com/advertise/</span><span class="invisible"></span></a></p><p><a href="https://front-end.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> <a href="https://front-end.social/tags/HTML" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>HTML</span></a></p>
CSS by T. Afif :verified:<p>I have made a small interactive demo to better see how flex-wrap affects the alignment and also see the difference between align-content and align-items.</p><p>Demo: <a href="https://codepen.io/t_afif/full/EaxBevN" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="">codepen.io/t_afif/full/EaxBevN</span><span class="invisible"></span></a> via <span class="h-card" translate="no"><a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>codepen</span></a></span> </p><p><a href="https://front-end.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> <a href="https://front-end.social/tags/HTML" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>HTML</span></a></p>
GENKI<p>* 🎨 明度・彩度・色相もそれぞれ変数化できる <a href="https://social.vivaldi.net/tags/CssVariables" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CssVariables</span></a> <br>* 🧮 特定の色を相対的に変化可能な <a href="https://social.vivaldi.net/tags/RelativeColorSyntax" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>RelativeColorSyntax</span></a><br>* 🌈 色をより人間の知覚に近い形で扱える <a href="https://social.vivaldi.net/tags/oklch" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>oklch</span></a> </p><p>このあたりは、現存するどのデザインツールよりも、現在のブラウザーで使える <a href="https://social.vivaldi.net/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> の機能のほうが柔軟で拡張性が高い。</p><p>…あれ、ということはやっぱり最強のデザインツールは <a href="https://social.vivaldi.net/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> なのでは :vivaldia_1:</p>
GENKI<p>某所で <a href="https://social.vivaldi.net/tags/oklch" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>oklch</span></a> とか <a href="https://social.vivaldi.net/tags/RelativeColorSyntax" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>RelativeColorSyntax</span></a> とか最新の <a href="https://social.vivaldi.net/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> のカラー周りの機能について雑談してみて、oklch() とか使って色管理するにはまだデザインソフト側が対応してないからやっぱり採用ハードルあるよなーと思ったんだけど</p><p>いまふと「いや、むしろだからこそインブラウザデザインの時代なんじゃないか！？」と思ったりした</p><p>:vivaldia_5: インブラウザデザインの夜明けぜよ :macos:</p>
CSS by T. Afif :verified:<p>Do you know the flex-wrap property? It allows flex items to wrap but it has another "secret" behavior not related to wrapping.</p><p>Many are not aware of this hidden functionality but it is never too late to learn about it!</p><p><a href="https://css-tip.com/flex-wrap/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="">css-tip.com/flex-wrap/</span><span class="invisible"></span></a></p><p><a href="https://front-end.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> <a href="https://front-end.social/tags/HTML" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>HTML</span></a></p>
ゆなす🧑‍💻☕🍷🍶🍾🍹🍺<p>信用にならないchatgpt さん…… いつ時点の原文情報読んでいるのかとても気になる <a href="https://oransns.com/tags/css" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>css</span></a> <a href="https://oransns.com/tags/mdn" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>mdn</span></a><br><a href="https://chatgpt.com/share/67fc64db-ffd4-8000-af4a-59e6e72d14bd" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">chatgpt.com/share/67fc64db-ffd</span><span class="invisible">4-8000-af4a-59e6e72d14bd</span></a></p>
Terence Eden<p>Is the ordering of attribute values ever semantically or logically important.</p><p>For example, is there ever a practical difference between:</p><p>`&lt;p class="a b"&gt;`<br>and<br>`&lt;p class="b a"&gt;`</p><p><a href="https://mastodon.social/tags/HTML" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>HTML</span></a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> <a href="https://mastodon.social/tags/JavaScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>JavaScript</span></a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebDev</span></a></p>
GENKI<p><a href="https://social.vivaldi.net/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> 変数を活用したフレームワークの <a href="https://social.vivaldi.net/tags/OpenProps" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>OpenProps</span></a> の作者で Chrome for developers でも最新の <a href="https://social.vivaldi.net/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> を中心にたくさんの記事を執筆してる Adam Argyle さん、急に Google での仕事を失った（クビになった？）っぽい…<br>何があったんだ…</p><p>G̶o̶o̶g̶l̶e̶r̶… ex-Googler. · April 10, 2025<br><a href="https://nerdy.dev/ex-googler" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="">nerdy.dev/ex-googler</span><span class="invisible"></span></a></p>
Ana Tudor 🐯<p>There is a flag for container style queries in Firefox!</p><p>I repeat, there is a flag 🏁 in Firefox! 🦊</p><p>You just need to switch it to true!</p><p>Thanks, <span class="h-card" translate="no"><a href="https://mastodon.social/@nicolaschevobbe" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>nicolaschevobbe</span></a></span>! </p><p><a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a></p>
Mia (web luddite)<p>Here's another CSS demo from my new Cascading Layouts workshop – using grid line names for article layout and overlapping grid areas.</p><p>Dates: April 28-30 - Online<br>Time: 9am - 11:30am PT</p><p>Early-bird pricing available 2 more days! </p><p>(one more demo next week <a href="https://front-end.social/tags/css" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>css</span></a>)</p><p><a href="https://www.oddbird.net/workshops/cascading-layouts/#workshop-video-2" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://www.</span><span class="ellipsis">oddbird.net/workshops/cascadin</span><span class="invisible">g-layouts/#workshop-video-2</span></a></p>
Helen Fernanda<p>Tentando entender esse negócio de color-mix():</p><p>🔗 <a href="https://codepen.io/helenfernanda/pen/MYWMYpa" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/helenfernanda/pen/M</span><span class="invisible">YWMYpa</span></a></p><p><a href="https://social.vivaldi.net/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a></p>
CSS by T. Afif :verified:<p>📝 New CSS Article!</p><p>Excited about the new attr() function? Learn how I am using it to style the native progress element with a few lines of CSS. It's the article where I using if() as well 😁</p><p><a href="https://frontendmasters.com/blog/custom-progress-element-using-the-attr-function/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">frontendmasters.com/blog/custo</span><span class="invisible">m-progress-element-using-the-attr-function/</span></a> </p><p><a href="https://front-end.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> <a href="https://front-end.social/tags/HTML" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>HTML</span></a></p>
CSS by T. Afif :verified:<p>Bouncy Range Slider!</p><p>Demo: <a href="https://codepen.io/t_afif/full/ogNRWMN" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="">codepen.io/t_afif/full/ogNRWMN</span><span class="invisible"></span></a> via @CodePen </p><p>A funny (and useless) CSS-only experimentation using modern features.</p><p>⚠️ Chrome-only ⚠️</p><p><a href="https://front-end.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> <a href="https://front-end.social/tags/HTML" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>HTML</span></a></p>
Stéphane Bortzmeyer<p>Sur <a href="https://mastodon.gougere.fr/tags/Gemini" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Gemini</span></a>, c'est tous les jours, le jour nu sans <a href="https://mastodon.gougere.fr/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> ! <a href="https://css-naked-day.org/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="">css-naked-day.org/</span><span class="invisible"></span></a></p><p><span class="h-card" translate="no"><a href="https://mamot.fr/@ploum" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>ploum</span></a></span> <span class="h-card" translate="no"><a href="https://pleroma.chagratt.site/users/Chagratt" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>Chagratt</span></a></span></p>
Tommi 🤯<p><strong>✨Happy CSS Naked Day! 👀</strong></p><p>I am participating in <a href="https://pan.rent/tags/CSSnakedDay" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSSnakedDay</span></a> for the first time in my life!</p><p>If you wanna see some <a href="https://pan.rent/tags/HTMLporn" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>HTMLporn</span></a>… <a href="https://tommi.space" rel="nofollow noopener" target="_blank">My website is naked</a>! 😱</p><p>This celebration would be the perfect occasion to get a couple of fun HTML stickers I made 👾<br><a href="https://ournet.rocks/promo/" rel="nofollow noopener" target="_blank">Get them here</a>, and, if you’d like, leave a donation to support my work! 💕</p><p><a href="https://pan.rent/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> <a href="https://pan.rent/tags/HTML" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>HTML</span></a> <a href="https://pan.rent/tags/personalWebsite" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>personalWebsite</span></a> <a href="https://pan.rent/tags/website" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>website</span></a></p>
CSS by T. Afif :verified:<p>I just wrote my first if() in CSS combined with other modern stuff.</p><p>Looks like I am programming with CSS?!! 🤓</p><p>A new article coming soon...</p><p><a href="https://front-end.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a></p>
Mia (web luddite)<p>Registration is open for the Cascading Layouts workshop!</p><p>It's fully online, April 28-30, so you can join us from anywhere. Each of the 3 days are 2.5 hours from 9am-11:30am PT. We'll talk about grid, subgrid, CQs &amp; more.</p><p>4 days left to get $100 off your ticket:<br><a href="https://www.oddbird.net/workshops/cascading-layouts/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://www.</span><span class="ellipsis">oddbird.net/workshops/cascadin</span><span class="invisible">g-layouts/</span></a> <a href="https://front-end.social/tags/css" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>css</span></a></p>
SearchLive feeds
About