Search
1000 results for “codepen”
-
Here's a little thing I made for the 1st #CodePenChallenge of '25: pure #CSS tilt & zoom grid on scroll!
Check it out on @codepen
https://codepen.io/thebabydino/pen/jENzprY
Using pure CSS scroll driven animations, grid, variables, mathematical functions, container query units. Also uses an SVG filter for the dissolve effect.
Chromium only.
#scroll #scrollAnimation #cssVariables #cssGrid #cssLayout #cssMaths #containerQueryUnits #svgFilter #SVG #filter #code #coding #frontend #webDev #webDEvelopment #web #dev
-
A little something combining #CSS shapes, trigonometry, plus scroll-driven animations on @codepen: angled slide!
https://codepen.io/thebabydino/full/zYJKRyq
Also an entry for this week's #CodePenChallenge.
#cssShapes #code #coding #frontend #web #dev #webDev #webDevelopment #scroll #scrollAnimation #trigonometry
-
A little something combining #CSS shapes, trigonometry, plus scroll-driven animations on @codepen: angled slide!
https://codepen.io/thebabydino/full/zYJKRyq
Also an entry for this week's #CodePenChallenge.
#cssShapes #code #coding #frontend #web #dev #webDev #webDevelopment #scroll #scrollAnimation #trigonometry
-
A little something combining #CSS shapes, trigonometry, plus scroll-driven animations on @codepen: angled slide!
https://codepen.io/thebabydino/full/zYJKRyq
Also an entry for this week's #CodePenChallenge.
#cssShapes #code #coding #frontend #web #dev #webDev #webDevelopment #scroll #scrollAnimation #trigonometry
-
A little something combining #CSS shapes, trigonometry, plus scroll-driven animations on @codepen: angled slide!
https://codepen.io/thebabydino/full/zYJKRyq
Also an entry for this week's #CodePenChallenge.
#cssShapes #code #coding #frontend #web #dev #webDev #webDevelopment #scroll #scrollAnimation #trigonometry
-
Pure #CSS 1 div halftone-masked background card https://codepen.io/thebabydino/pen/GRNKqRv on @codepen.
Made this 4 years ago - can you guess how before checking the code?
Doesn't work in Firefox due to an old bug 🪲 https://bugzilla.mozilla.org/show_bug.cgi?id=1481498 not even related to the halftone mask, but caused by the duo text on the right.
#filter #code #coding #frontend #cssfFilter #web #dev #webDev #webDevelopment #blendMode #blending
-
A little pure #CSS 🌟🎄 #animation I made on @codepen a few years ago https://codepen.io/thebabydino/pen/bGwYVOm
#3D #transform #cssTransforms #code #cssAnimation #coding #frontend #xmas #web #dev #webDevlopment #webDev #tree #stars
-
I'm trying so hard to work my way through The Artist's Way right now. *So hard*.
But I also have a ton of responsibilities to people who genuinely need support, plus it's the holidays and that's always stressful, plus this entire year has been a flaming shit dumpster, plus I have a deep-seated need to feel like a good person by sacrificing myself for others (apparently).
So that's all going great. 💀
-
Looks like I took over the Trending section of @codepen 😼
15 out of the 24 demos on the first 6 pages are mine! 😯
#SVG #CSS #filter #scroll #progress #code #svgFilter #scrollAnimation #coding #web #dev #webDev #webDevelopment #frontend
-
Looks like I took over the Trending section of @codepen 😼
15 out of the 24 demos on the first 6 pages are mine! 😯
#SVG #CSS #filter #scroll #progress #code #svgFilter #scrollAnimation #coding #web #dev #webDev #webDevelopment #frontend
-
Looks like I took over the Trending section of @codepen 😼
15 out of the 24 demos on the first 6 pages are mine! 😯
#SVG #CSS #filter #scroll #progress #code #svgFilter #scrollAnimation #coding #web #dev #webDev #webDevelopment #frontend
-
Looks like I took over the Trending section of @codepen 😼
15 out of the 24 demos on the first 6 pages are mine! 😯
#SVG #CSS #filter #scroll #progress #code #svgFilter #scrollAnimation #coding #web #dev #webDev #webDevelopment #frontend
-
Looks like I took over the Trending section of @codepen 😼
15 out of the 24 demos on the first 6 pages are mine! 😯
#SVG #CSS #filter #scroll #progress #code #svgFilter #scrollAnimation #coding #web #dev #webDev #webDevelopment #frontend
-
Something I made over half a decade ago on @codepen: single element pure #CSS border patterns!
Cover method (only allows opaque background + hacky transparency emulations) https://codepen.io/thebabydino/pen/LaxmKO
Masking method (allows transparency) https://codepen.io/thebabydino/pen/pYrQYN
Patterns from the CSS3 Pattern gallery by @leaverou: https://projects.verou.me/css3patterns/
(with gradient code made a bit more modern)#gradient #cssGradient #mask #cssMask #pattern #cssPattern #code #coding #web #dev #webDevelopment #frontend #webDev
-
You're not supposed to hate Cain the story. You're supposed to look at him through the eyes of a grieving mother who believed that he was the answer to all her problems.
You can relate to Eve, because we've all put our trust in something and had it fall apart on us.
#theology #codependency #problems #bible #torah #genesis #Eve #mother #grief
-
-
A day late but here is a dodecicosacron:
https://codepen.io/fractalkitty/pen/zYgEOVb??editors=0010
I used the data from this amazing resource - check out the treasure trove of polyhedra (I had to send a thank you email - what a gem!)
-
Simplest gradient border buttons (with border-radius) https://codepen.io/thebabydino/pen/vYoJqBK
Multiple cases, each just a few lines of code:
✨ solid background
✨ (semi)transparent background
✨ (semi)transparent background for input[type=button] (so no pseudos allowed)#CSS #cssGradient #cssMask #masking #code #coding #frontend #web #dev #webDev #webDevlopment
-
Here's another grid of cubes remake on
@codepen:https://codepen.io/thebabydino/pen/DZOdMq
Now using CSS grid instead of absolute positioning, CSS variables to greatly reduce the amount of code needed.
#CSS #gridLayout #cssGrid #transform #3D #code #coding #frontend #colorMix #web #dev #webDev #webDevelopment #interactive
-
Here's a little thing 🦜 I made on @codepen:
https://codepen.io/thebabydino/pen/bGXeGoa
Uses clip-path, CSS grid, variables, halftone patterns https://mastodon.social/@anatudor/112401133442879091 and more! 🌟
#CSS #gridLayout #cssGrid #SVG #filter #svgFilter #textEffect #clipPath #code #coding #frontend #webDev #web #dev #webDev
-
Made this set of single div loaders on @codepen ~5 years ago https://codepen.io/thebabydino/pen/MWYqMxd
The trick is to register a custom property in order to animate a `conic-gradient()` & use `mask` compositing for the rings/ radial slices.
Back then, this was Chrome only. As of summer 2024, with Firefox finally getting support for animating registered #CSS vars, this and a lot such more demos I've been making for the past 6+ years are now cross-browser!
-
Here's a little collection of #SVG #filter generated textures on @codepen:
https://codepen.io/thebabydino/pen/PovZKaz#svgFilter #texture #code #coding #frontend #web #webDev #dev #webDevelpment
-
Because someone hearted ❤️ this half a decade old @codepen demo again, I've updated support info to reflect the fact that, as of this summer, it is cross-browser - Firefox finally supports registering custom properties too! 🥳🎉🍾🍰
https://codepen.io/thebabydino/pen/yLywVzd
#goo #gooey #blob #blobby #liquid #filter #CSS #code #coding #frontend #web #dev #webDev #webDevelopment
-
So this very subtle pure #CSS pattern got picked on @codepen https://codepen.io/thebabydino/pen/vYqbwLN
¯\_(ツ)_/¯
(only made it to provide an answer to a question someone asked... and I almost answered with "are you sure you uploaded the right image?" because the lines were so subtle I missed them at first)
#pattern #cssPattern #gradient #cssGradient #conicGradient #code #coding #frontend #web #webDev #dev #webDevelopment
-
Here is real magic 🪄 is my personal fave https://codepen.io/thebabydino/pen/JjqXjyJ
Both the texture and the 3D individual letter flip are achieved with SVG filters.
There is absolutely no JS, no images save for CSS gradients, no text duplication or splitting - you can see me edit it in DevTools below.
#CodePen #SVG #CSS #filter #code #svgFilter #coding #texture #3D #textEffects #textEffect #frontend #3dText #3dEffect #paperTexture #web #webDev #webDevelopment #dev #noJS
-
I've just seen a bunch of my demos "trending" on @codepen.
✨ stroke shadow wave 🌊
✨ no matrix gooey effect
✨ slice 🗡️
✨ here is real magic 🧞
✨ slice & offset 🔪
✨ dizzy 3D 🥴
✨ blended layers
✨ split text effect
✨ realistic grainy shadows...just on the first 5 pages! 🤯
#SVG #CSS #filter #svgFilter #3D #transform #cssTransforms #cssGradient #code #coding #web #webDev #webDevelopment #frontend
-
#20books № 13: OKAY FINE I've only seen the film BUT I think about it enough to include the #book here also what are you the 20books police get a life far out
https://www.goodreads.com/book/show/17605621-behind-the-candelabra
#Liberace #narcissism #enmeshment #PsychologicalAbuse #autobiography #biopic #books #TrueStory #codependence #SelfObject
-
Added a #comment #hidefunction to the #youtube comment fetch
https://codepen.io/ryedai1/pen/xxoYowO
Reason:
Some #comments are fetched via #api that are:
* not visible #publicly ( #shadowbanned )
* not on the" #comment held for #review. " in youtube #dashboard
The #commenters name is commmitted to #local #storage.
Sigh
Youtube.
You are so innefficient
#CodeAo -
1⃣1⃣ Pure CSS 1 div animated 🌈 ∞ logo
https://codepen.io/thebabydino/pen/zRZKxKAlso has a video of me live coding it.
#CodePen #geometry #maths #CSS #noJS #transform #code #coding #web #webDev #dev #frontend #webDevelopment #cssGradient #cssVariable