davidbisset, to CSS
@davidbisset@phpc.social avatar

Man I love #css

Time-based CSS Animations w/ math functions.

https://yuanchuan.dev/time-based-css-animations

via @yuanchuan

vantablack, to webdev
@vantablack@cyberpunk.lol avatar

what do i need to change to make https://amazingdigitalcirc.us so it actually scrolls down the page?

phranck, to CSS German
@phranck@chaos.social avatar

Hat hier jemand Ahnung von #CSS? Weil, ich bin zu bloed dafuer... 🙄

Ich baue mir mit #Publii grad was Neues, und hab da schon etwas dran herumgefingert, aber es will nicht so, wie ich das will.

Originalzustand ist, dass die beiden Haelften gleich breit sind. Ausser auf Mobile-Devices, da gibt es nur eine Spalte.

Ich will aber, dass die bei breitem Viewport immer 35%/65% haben.

Wie geht dem?
Zu Hülf... 🙏

https://layered.work

css, to CSS
@css@front-end.social avatar
davidbisset, to CSS
@davidbisset@phpc.social avatar

What You Need to Know about Modern (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.”

vanilla, to CSS
@vanilla@social.spicyweb.dev avatar

Oh, the drama!

Rachel Andrew:

> Chrome is keen to see an implementation of masonry type layouts on the web. However, we feel that implementing it as part of the CSS Grid specification as proposed in the recent WebKit post would be a mistake.

Rachel goes on to explain how the “masonry” layout differs enough from standard grid so as to warrant a different mode.

What do you think? Should masonry be an addition to grid? Or should it be its own layout mode?

https://thathtml.blog/2024/05/masonry-the-rebuttal/

stvfrnzl, to Astro
@stvfrnzl@mastodon.online avatar

Inspired by @matthiasott great newsletter: has anyone experience implementing with @astro?

Here's his article: https://buttondown.email/ownyourweb/archive/issue-14/

And here's what I found but couldn't test yet: https://kld.dev/adding-webmentions/

davidbisset, to CSS
@davidbisset@phpc.social avatar

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

pawelgrzybek, to CSS
@pawelgrzybek@mastodon.social avatar

“Help us invent CSS Grid Level 3, aka “Masonry” layout” by @jensimmons

https://webkit.org/blog/15269/help-us-invent-masonry-layouts-for-css-grid-level-3/

…and

“An alternative proposal for CSS masonry” by @rachelandrew

https://developer.chrome.com/blog/masonry

After reading these two blog posts, I am slowly shaping up my opinions about the implementation of masonry layout in CSS. Most likely, a super long blog post is coming soon...

olets, to CSS
@olets@hachyderm.io avatar

Excited to share tailwindcss-fluid-font-size, a new fluid typography Tailwind plugin.

I’ve been iterating on Tailwind approaches to fluid typography for a couple years. tailwindcss-fluid-font-size is more flexible and, to me, the most ergonomic and idiomatically “Tailwindy” of the solutions I’ve built or read about.

Open minded Tailwind haters might even be interested in at least the design.

https://tailwindcss-fluid-font-size.olets.dev/

#Tailwind #TailwindCSS #FluidTypography #CSS #CSSClamp #FrontEnd

sarajw, to CSS
@sarajw@front-end.social avatar

Hopefully quick CSS question:

If you declare layers in one stylesheet, do you have to have the styles associated with those layers within or imported into the same stylesheet, or can they exist in completely different files, as long as they're all linked into the same html via the head?

Thank you!

chriskirknielsen, to CSS
@chriskirknielsen@front-end.social avatar
rauschma, to CSS
@rauschma@fosstodon.org avatar

: AFAICT, it’s not possible to hide all HTML .fragment elements after one with the marker class .current

<ul>
<li class="fragment">One</li>
<li class="fragment current">Two</li>
<li class="fragment">Three</li>
</ul>

<div class="fragment">
First
</div>
<div class="fragment">
Second
</div>
<div class="fragment">
Third
</div>

Workaround via JavaScript: Add class .hidden to all .fragment elements and remove them, one by one (vs. “moving” class .current).

joelanman, to CSS
@joelanman@hachyderm.io avatar

big fan of flexbox for web app layouts!
#css

helma, to CSS Dutch
@helma@mastodon.social avatar

Fijn dat er ein-de-lijk in de mainstream media aandacht voor komt. Wel jammer dat weer de nadruk ligt op de scheidslijn privacy en security. Het gaat hier in eerste instantie juist om het verbreken van veel security waarvoor je een klein beetje security terug zou krijgen (niet bewezen).

@Schneier_rss

https://nos.nl/artikel/2518925-kinderporno-opsporen-met-detectiesoftware-op-mobiel-experts-tegen-eu-wetsvoorstel

kizu, to CSS
@kizu@front-end.social avatar

Spatial navigation¹ and reading-order² in when?

Especially, reading-order should be implemented by all browsers before masonry or any other additions to layout.

  1. https://drafts.csswg.org/css-nav-1/
  2. https://drafts.csswg.org/css-display-4/#reading-order-items
jameskerr, to CSS
@jameskerr@mastodon.social avatar

Trying to put gridlines on children of display: grid in a non-hacky way is simply impossible.

#css #webdev #programming

scottjenson, to CSS
@scottjenson@social.coop avatar

#CSS challenge!

<body>
<div class="container">
<div class="item">item 1</div>
<div class="item">item 2</div>
<div class="item">item 3</div>
<div class="item hidden">item 4</div>
</div>
</body>

where .hidden { display: none }

Question: Can I use item:last-child {} to stylize item 3?

Apparently :last-child targets the last child in the DOM, not the last visible child. (this means hidden item 4 is styled.

Is there any way to do this using only CSS?

geoffrich, to CSS
@geoffrich@front-end.social avatar

A bit of a work conundrum...

  1. We render part of a page inside multiple websites we don't control (so we don't have control over the site's CSS, just our own)
  2. We want to use rem units so it adjusts to the user's preferred font size
  3. However, some of these sites do things like "font-size: 62.5%" on &lt;html&gt;, which makes our page section look smaller than expected (since root font size is now 10px instead of 16px)

Is there a way to get consistent sizes and keep using rem units?

AndriiKuznietsov75, to webdev Ukrainian
@AndriiKuznietsov75@social.kyiv.dcomm.net.ua avatar
piggo, to CSS
@piggo@piggo.space avatar

Is there a non-cursed way to make a #CSS lozenge yet? Rectangle someone stepped on and it got squished to a side, with the top and bottom still parallel?

davidbisset, to javascript
@davidbisset@phpc.social avatar
davidbisset, to CSS
@davidbisset@phpc.social avatar

This could be handy.

"The Ultimate Collection of #CSS only Shapes"

https://css-shape.com/

davidbisset, to ai
@davidbisset@phpc.social avatar

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

css, to CSS
@css@front-end.social avatar

💡 CSS Tip!

Use modern CSS to add a status indicator to your avatar using less than 10 CSS declarations and without extra elements.
✅ Only the image element
✅ No pseudo-element
✅ Transparent gap
✅ Optimized with CSS variables

Demo: https://codepen.io/t_afif/full/yLrWeQP via :codepen: @codepen

Online Version: https://css-tip.com/status-indicator/

three rounded images with a status indicator at the bottom right

css,
@css@front-end.social avatar

We can easily change the position of the indicator by rearranging the margin/padding values.

Demo: https://codepen.io/t_afif/full/rNbgoyz via :codepen: @codepen

#CSS #HTML

four images with status indicator

  • All
  • Subscribed
  • Moderated
  • Favorites
  • anitta
  • kavyap
  • PowerRangers
  • hgfsjryuu7
  • magazineikmin
  • InstantRegret
  • rosin
  • everett
  • Youngstown
  • slotface
  • vwfavf
  • thenastyranch
  • mdbf
  • DreamBathrooms
  • Leos
  • Durango
  • tacticalgear
  • cubers
  • cisconetworking
  • khanakhh
  • osvaldo12
  • GTA5RPClips
  • ngwrru68w68
  • tester
  • normalnudes
  • ethstaker
  • modclub
  • provamag3
  • All magazines