schalkneethling, to CSS
@schalkneethling@hachyderm.io avatar

I had an amazing conversation with @mia for an upcoming episode of the Mechanical Ink podcast. Here is a little clip of some of the things on the horizon for

video/mp4

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

Inspired by @robb, I made a game collection page — less visually appealing, but I had fun with the : https://chriskirknielsen.com/games/library/

stvfrnzl, to accessibility
@stvfrnzl@mastodon.online avatar

New blog post! Free consulting for ! recommendations from yours truly! testing! Click here and find out how clearly wins this iteration of the series:

https://stevefrenzel.dev/posts/screen-reader-check-tidal-widget/

teacherbuknoy, to CSS
@teacherbuknoy@masto.ai avatar
Luke, to CSS
@Luke@typo.social avatar

Tinkering with text rotated 90° in

syntaxseed, to wordpress
@syntaxseed@phpc.social avatar

I've been working on a plugin for a client that generates custom PDF worksheet printouts for teachers. And it's turning out SO awesome that I'm basically high on coding satisfaction today. 😁

Not bad for my first plugin!

syntaxseed,
@syntaxseed@phpc.social avatar

It's using a library called TCPDF which requires pretty old-timey HTML & very limited so.... table layouts are back baby!!

😆

But I've managed to exactly match the manually created PDFs, so I'm pretty happy with it.

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

Another article and another single element experimentation using images!

Check my latest article @smashingmag

https://smashingmagazine.com/2024/04/sliding-3d-image-frames-css/

A lot of cool CSS Tricks to create a fancy reveal animation 👇

A fancy hover effect to reveal image inside a 3D box

hi_mayank, to CSS
@hi_mayank@hachyderm.io avatar

i missed that logical resize: block is in all browsers now.

put it on your textareas!

bmispelon, to CSS
@bmispelon@mastodon.social avatar

New article this week: A technique for making desaturated background images: https://blog.bmispelon.rocks/articles/2024/2024-04-12-css-desaturated-background-image.html

pixelambacht, to CSS
@pixelambacht@typo.social avatar

A couple of weeks ago I was invited to help the students of the Hogeschool van Amsterdam write modern/weird/creative CSS. The students have all wrapped op their projects and I wanted to highlight a few!

The students had a few requirements to meet which made things even more interesting, like not being allowed to use classes or IDs (except SVG use). Also, no JavaScript or external tools/frameworks -- only CSS and HTML.

Themes were: fireworks, control panel, Rubik's cube

👉

#css #frontend

dutchcelt, to CSS
@dutchcelt@mastodon.social avatar

It's pretty cool to see new uses of CSS' revert-layer. Mixins must be one of my favourites so far. I thank @knowler, @kizu, and @hi_mayank for their insight and persistence.


https://dutchcelt.nl/posts/css-mixins/

mfru, to CSS
@mfru@mastodon.social avatar

can anyone explain to me why the following CSS code would always calculate as 0px even though --fs-0 and --baseline yield concrete values that are not 0?

cvennevik, to CSS
@cvennevik@hachyderm.io avatar

Hrm. I have a large web app that mainly relies on scoped, local component styling. I want to set new default styles for text and links, so that we don't have to repeat the style in every component.

However, the components were styled around the current defaults, and some break visually when I change the defaults.

Are there good strategies for gradually migrating styles like this, instead of having to fix the app at once?

#CSS #Web

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

💡CSS Tip!

Use modern CSS to cut the corner of an image with a pixelated effect because why not!
✅ Only one element (the image tag)
✅ Only 4 properties
✅ Optimized with CSS variables

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

Online Version: https://css-tip.com/pixelated-corner/

Two image with cut corners

cssbasics, to CSS
@cssbasics@hachyderm.io avatar

Using #CSS Relative Colors: "This article explains relative color syntax, shows what the different options are, and looks at some illustrative examples." https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_colors/Relative_colors

cssbasics, to CSS
@cssbasics@hachyderm.io avatar

:has roundup - "I still haven’t used :has outside of little demos and screwing around in Codepen but there’s been a growing chorus over the last few months about all the tiny yet amazing things that :has can do for us." https://robinrendle.com/notes/has-roundup/

nhoizey, to CSS French
@nhoizey@mamot.fr avatar
amberage, to CSS
@amberage@eldritch.cafe avatar

Is there an easy way to restore default behaviour in CSS?

I've got a spoiler thing going on where I make text and background black and remove text-decoration for an element. When it's hovered on, I want to restore everything to default. I.e. links should be blue again, purple when visited, underlined, etc.

Recreating all that with CSS is not only more work, but also results in inconsistent behaviour (i.e. color: purple is not the same purple as the default visited link colour, etc.).

Using color: initial; didn't work, the link was black instead of blue.

#CSS

nhoizey, to javascript French
@nhoizey@mamot.fr avatar

🔗 “67 Weird Debugging Tricks Your Browser Doesn't Want You to Know” by @alannorbauer

#browser #debug #JavaScript #CSS #DOM

⚓️ https://nicolas-hoizey.com/links/2024/04/02/67-weird-debugging-tricks-your-browser-doesn-t-want-you-to-know/

nhoizey, to CSS French
@nhoizey@mamot.fr avatar

🔗 “How we’re approaching theming with modern CSS” by @belldotbz

⚓️ https://nicolas-hoizey.com/links/2024/04/02/how-we-re-approaching-theming-with-modern-css/

cssbasics, to CSS
@cssbasics@hachyderm.io avatar

Setting And Persisting Color Scheme Preferences With And A “Touch” Of : "With recent developments in CSS, core functionality that has always required JavaScript can now be done without it." https://www.smashingmagazine.com/2024/03/setting-persisting-color-scheme-preferences-css-javascript/

anders, to 11ty
@anders@thoresson.social avatar

I'm about to start using for the first time, to make the development of my new site a bit easier. Learning both and modern leads to a lot of manual rollbacks I hope will become easier.

I've read a lot about Git, but one question lingers still: I’m building my site based on Base Blog, in a repo I cloned using Desktop.

How do I disconnect (or whatever the technical term is) from the original Github repo and turns it into a private of my own?

jake4480, to security
@jake4480@c.im avatar
presstype, to CSS
@presstype@mastodon.social avatar

experts, I want to animate an SVG kind of like a gif with just showing and hiding layers sequentially in the SVG. I’m not sure where to start. I don’t need any transitions or anything.

presstype,
@presstype@mastodon.social avatar

Got it working across browsers. Took a slightly different approach using a sprite image.
https://codepen.io/briandlevy/pen/NWmMQdN

  • All
  • Subscribed
  • Moderated
  • Favorites
  • bokunoheroacademia
  • kavyap
  • InstantRegret
  • everett
  • magazineikmin
  • thenastyranch
  • Youngstown
  • slotface
  • osvaldo12
  • cisconetworking
  • rosin
  • mdbf
  • normalnudes
  • DreamBathrooms
  • tester
  • ethstaker
  • khanakhh
  • Durango
  • cubers
  • relationshipadvice
  • anitta
  • Leos
  • GTA5RPClips
  • tacticalgear
  • modclub
  • HellsKitchen
  • lostlight
  • sketchdaily
  • All magazines