Posts by anatudor@mastodon.social
(DIR) Post #AjG8ifDHG2kYa57nXc by anatudor@mastodon.social
2024-06-24T17:19:49Z
0 likes, 0 repeats
@aral @codepen I'm an idiot. I pasted the wrong link for the demo. Fixed now.Thanks. Both for checking and for letting me know.
(DIR) Post #AjGJIAd1RoVxgsjiYS by anatudor@mastodon.social
2024-06-24T19:18:21Z
0 likes, 0 repeats
@aral @codepen One more question: do you have a wide gamut display? https://www.wide-gamut.com/test/image-sdrI don't, and I'm curious if this might have anything to do with the display...
(DIR) Post #AjzOolthOuv9WSjOAS by anatudor@mastodon.social
2024-07-15T08:05:48Z
0 likes, 1 repeats
How would you go about creating this multi-layer text *with strokes* smooth effect on `:hover` without duplicating the text? That includes duplication in pseudo `content`, btw.I did it with #SVG filters https://codepen.io/thebabydino/pen/poXJyRP - can you guess how before checking the code? 😼Original @codepen demo I came across https://codepen.io/vstefanova/pen/wvLBwWz uses text duplication in the pseudo, but I thought I could do without.#CSS #filter #svgFilter #code #coding #frontend #web #dev #webDevelopment #textEffect
(DIR) Post #AmOb7KiapE7ajVBO4m by anatudor@mastodon.social
2024-09-26T11:47:47Z
1 likes, 0 repeats
Just code, no images. The lighting and the graininess are created using an SVG filter, the rest is just CSS.Live on @codepen https://codepen.io/thebabydino/pen/MWBNrZq#SVG #CSS #filter #svgFilter #button #code #coding #frontend #webDevelopment #web #dev #webDev
(DIR) Post #Aml202U7mXbI7wXwci by anatudor@mastodon.social
2024-10-05T14:22:06Z
0 likes, 1 repeats
#tinyCSStip Simplest circle sector in 4 CSS declarations!1⃣ set width to desired diameter2⃣ square element with aspect-ratio3⃣ turn square into disc4⃣ conic-gradient() magic! 🪄The start angle and sector angle can also be animated for fun results.Because someone asked https://www.reddit.com/r/css/comments/1fvo5dl/comment/lq9mtjj/#CSS #gradient #cssGradient #code #coding #frontend #web #dev #webDev #webDevelopment
(DIR) Post #Aml203FyubsiWMwADY by anatudor@mastodon.social
2024-10-05T16:32:39Z
0 likes, 0 repeats
#tinySVGtip You want to do it with #SVG? Here's an SVG solution too!It uses a single `circle` element inside an `svg` and less than 10 #CSS declarations, including those in keyframes! ✨ #code #coding #graphics #frontend #web #dev #webDevelopment #webDev
(DIR) Post #Aml203gZJl9HqpNOeu by anatudor@mastodon.social
2024-10-07T08:35:04Z
0 likes, 0 repeats
#tinyCSStip If you don't need the start angle and the sector angle to be decoupled, you can simplify things by making the sector angle depend on the start one. 💡4 base declarations + 1 simple animation = magic! 🪄All pure #css #code #coding #frontend #web #webDev #dev #webDevelopment
(DIR) Post #AmtmvpSgMlNTUON5H6 by anatudor@mastodon.social
2024-10-11T08:37:10Z
0 likes, 0 repeats
11! of my demos throughout the first @codepen trending pages!#SVG #CSS #filter #3D #svgFilter #graphicEffect #textEffects #texture #css3D #transform #code #coding #web #dev #webDev #webDevelopment #frontend
(DIR) Post #AmtmvqFbQsVdw7G9Wi by anatudor@mastodon.social
2024-10-11T09:33:19Z
0 likes, 1 repeats
The first one is this text effect that uses absolutely no images whatsoever save for #CSS gradients.Some #SVG filter magic 🪄 is responsible for the background texture and also for the 3D look of the text and its grainy gradients.https://codepen.io/thebabydino/pen/gONbppb #filter #svgFilter #texture #textEffect #textEffects #noise #cssGradient #code #coding #3D #3dText #frontend #web #dev #webDev #webDevelopment
(DIR) Post #AmtmvsikFV0bb4uSEC by anatudor@mastodon.social
2024-10-11T11:36:24Z
0 likes, 1 repeats
The second is a quick little thing I live-coded in Professor Mode on @codepen in under 15 minutes a little while back.Just like the first, it has absolutely no text duplication, not in the markup and not in pseudo content.A little #SVG #filter magic 🪄 slices and offsets it https://codepen.io/thebabydino/pen/RwmPZVR#CSS #cssGradient #svgFilter #code #coding #frontend #web #dev #webDev #webDevelopment
(DIR) Post #Amtmvu7x1GlVxXi69g by anatudor@mastodon.social
2024-10-11T13:27:21Z
0 likes, 1 repeats
The third is something I quickly made to answer a question I saw on reddit https://reddit.com/r/css/comments/1fwm87i/comment/lqg11fl/It's similar to something you can find on a lot of websites with a couple extra constraints: ✨ no extra elements, no pseudos✨ working fine on top of image background#CSS #cssGradient #mask #cssMask #code #coding #frontend #web #dev #webDev #webDevelopment
(DIR) Post #AoKay9yP9piNCHAWMi by anatudor@mastodon.social
2022-11-18T15:16:04Z
0 likes, 0 repeats
Please, use the `for` attribute on labels so input value can be changed by clicking on label as well: https://codepen.io/thebabydino/pen/XejRbo/#html #a11y #accessibility
(DIR) Post #AoPbT5CvBktoSb00oK by anatudor@mastodon.social
2024-11-25T20:14:55Z
0 likes, 0 repeats
@aral Completely unrelated, but that looks like a fun distorted conic-gradient().
(DIR) Post #ArNJcKjsK3aHKHcCTg by anatudor@mastodon.social
2025-02-22T11:21:36Z
0 likes, 0 repeats
@aral More trustworthy (and cuter) alarm system: 🐺
(DIR) Post #ArTlafSCSQHuk6uPY0 by anatudor@mastodon.social
2025-01-18T09:47:53Z
1 likes, 0 repeats
Know the animated 🌈 border + glow effect that's all the rage? It's normally done by adding an opaque cover on top of two 🌈 layers.But what if we wanted a (semi)transparent background within the border? It's possible with pure #CSS!Heavily commented on @codepen https://codepen.io/thebabydino/pen/KwPBvzo#cssGradient #conicGradient #code #web #dev #webDev #webDevlopment #frontend #coding #cssAnimation #rainbow
(DIR) Post #ArTlajwpkTAWgHGvqq by anatudor@mastodon.social
2025-01-21T12:12:49Z
0 likes, 0 repeats
Also on the topic of cards with gradient border & glow, I just came across such a demo on @codepen and forked it to reduce the number of #CSS declarations to about half and get rid of all nested elements and a pseudo.My fork: https://codepen.io/thebabydino/pen/jENvVvg?editors=1100Original: https://codepen.io/vedzzb/pen/KwPvNQj?editors=1100#cssGradient #code #coding #frontend #webDev #webDev #webDevelopment
(DIR) Post #AzxOxfi6VINYbnD3aq by anatudor@mastodon.social
2025-11-05T15:19:04Z
0 likes, 0 repeats
I am a cat: a little @codepen demo https://codepen.io/thebabydino/pen/YPwMMap(for context https://www.reddit.com/r/css/comments/1oow2xt/keyframes_melting_my_brain/)#CSS #code #coding #frontend #webDev #web #dev #webDevelopment
(DIR) Post #AzxOxgtU6T4oHNXeyG by anatudor@mastodon.social
2025-11-05T22:48:51Z
1 likes, 0 repeats
Speaking of 🐈
(DIR) Post #B2PtJiBvVa4LbOB3oG by anatudor@mastodon.social
2026-01-18T17:43:47Z
0 likes, 0 repeats
@aral With a spiked mace through all orifices.
(DIR) Post #B3mFXE3AKN29UuetUW by anatudor@mastodon.social
2026-02-28T10:28:48Z
0 likes, 0 repeats
@aral Seeing that one day is so long overdue makes me think it may never come for a lot of the normal people who saw their lives turned upside down in the process.