Skip to main content

Items tagged with: code

Search

Items tagged with: code

Here's a neat little effect with no text duplication. Uses `background-clip: text` to create the split text face effect + scroll-driven animations to tie the gradient split line position to the 1st section's bottom edge.

Live on @codepen codepen.io/thebabydino/pen/XJW…

cc @bramus

#CSS #scroll #scrollAnimation #coding #cssAnimation #gradientText #frontend #web #dev #webDev #webDevelopment #code

#dev #web #webdev #code #css #coding #frontend #webdevelopment #cssanimation #scrollanimation #scroll #gradienttext @Bramus @CodePen

#tinyCSStip
Revert animated parent transform (like a scale or skew) on child without an extra animation using registered custom properties.

codepen.io/thebabydino/pen/MYW…

#CSS #code #coding #frontend #transform #web #dev #webDev #webDevelopment

@property --f { syntax: '<number>'; initial-value: 1; inherits: true } .scale { scale: var(--f); animation: scale 2s ease-in-out infinite alternate; /* no need for another animation on ::before to revert scale */ &::before { scale: calc(1/var(--f)) } } @keyframes scale { to { --f: .5 } }
#dev #web #webdev #code #css #coding #frontend #webdevelopment #transform #tinyCSStip

Someone hearted this button ripple effect demo on @codepen (coded about half a decade ago) and made me notice it still said "only works in Chromium" - as of last summer, it's cross-browser! 🥳🎉

codepen.io/thebabydino/pen/LYZ…

#CSS #JS #JavaScript #code #coding #web #dev #webDev #webDevelopment #frontend

#dev #web #webdev #javascript #code #css #coding #frontend #js #webdevelopment @CodePen

Made this a couple of years ago on @codepen but for some reason never shared it: a hopefully accessible base for a smooth elastic dropdown codepen.io/thebabydino/pen/qBJ…

Based on a thing at a now dead link which did something of the kind with a huge div soup.

#css #js #a11y #dropdown #coding #code #web #dev #webDev #webDevelopment #frontend

#dev #web #webdev #code #css #a11y #coding #frontend #js #webdevelopment #dropdown @CodePen

Know how border-image & border-radius don't play nice together?

(interactive codepen.io/thebabydino/pen/jxZ…)

#tinyCSStip there's a workaround IF corner radius ≤ border-width: use inset() clip-path + a round value!

clip-path: inset(0 round $r)

@codepen demo: codepen.io/thebabydino/pen/qBE…

(and yes, this is a tip I first shared on twitter over half a decade ago x.com/anatudor/status/12199161… )

#CSS #clipPath #cssClipPath #coding #web #dev #webDev #webDevelopment #code #frontend #borderImage #borderRadius

Screenshot showing the interactive demo showing that setting a `border-image` on an element with `border-radius` makes the `border-radius` be ignored.
Screenshot of the solution when the desired corner rounding is not bigger than the border-width: ``` border: solid $r; border-image: linear-gradient(90deg, purple, orange) 1; clip-path: inset(0 round $r) ```
#dev #web #webdev #code #css #coding #frontend #webdevelopment #borderimage #borderradius #tinyCSStip #clippath #cssclippath @CodePen

thanks for summarizing in one article your personal experience with writing code with LLM. 🙏

I'll post some sentences I found interesting 👇

#LLM #AI #Code #Insights #Learning

#ai #code #learning #llm #insights

Because someone just hearted a 5 year old @codepen demo codepen.io/thebabydino/pen/GRo… I made using a #Sass function + looping to generate a #CSS 🌈: we don't need *any* Sass for this anymore! 🎉

We can now do it with

background:
linear-gradient(in hsl longer hue 90deg,
hsl(0, 95%, 65%) 0 0)

#SCSS #loop #looping #newCSS #rainbow #cssGradient #coding #code #frontend #web #dev #webDev #webDevelopment #hueInterpolation

Comparative look at the old Sass code vs. the new and much simpler plain CSS code, both producing the same result (a nice-looking rainbow) shown before both of them. Old SCSS solution: ``` @function get-rainbow($n: 12, $sat: 90%, $lum: 65%) { $unit: 360/$n; $s-list: (); @for $i from 0 through $n { $s-list: $s-list, hsl($i*$unit, $sat, $lum) } @return $s-list } html { background: linear-gradient(90deg, get-rainbow()) } ``` New plan CSS solution: ``` html { background: linear-gradient(in hsl longer hue 90deg, hsl(0, 95%, 65%) 0 0) } ```
#dev #web #webdev #code #css #coding #frontend #rainbow #loop #webdevelopment #cssgradient #sass #scss #looping #newcss #hueinterpolation @CodePen

⇧