#codepen

💡 CSS Tip!

Use the new color-mix() function to generate random colors from your favorite one
✅ A new color on each page load
✅ No contrast issue
✅ Easily control the color range

Demo: https://codepen.io/t_afif/full/eYEQbmg via :codepen: #CodePen

#CSS

💡 CSS Tip!

Use the new color-mix() to manipulate the Hue of a color in the HSL color space (until better support for relative color syntax)

Demo: https://codepen.io/t_afif/pen/VwGNQEv via :codepen: #CodePen

#CSS

RT Juxtopposed
just made this design for the @CodePen play button challenge. been wanting to make this animation for a while now.
check it out on CodePen for a little surprise (it's not rickroll, I promise): https://codepen.io/Juxtopposed/pen/vYzPrbg
#CodePen #CodePenChallenge https://t.co/oPvF6KFlVJ

:sys_twitter: https://twitter.com/juxtopposed/status/1640816049062035457

✨ New post!
Creating Advanced CSS Shapes with CSS Trigonometric functions

https://danielcwilson.com/posts/css-shapes-with-trig-functions/

Plenty of #CodePen demos, as well

(Feels good to be back to writing, by the way)

💡 CSS Tip!

Use the new color-mix() to create different shades from one color.

Mix with ⚫️ black for a darker color and ⚪️ white for a lighter color

Demo: https://codepen.io/t_afif/pen/ExeMOPV via :codepen: #CodePen

#CSS

💡 CSS Tip!

Use the new color-mix() function to create a color switch.
✅ No color duplication
✅ Define your colors once using one variable
✅ Easy switch between colors
✅ Suitable for dark/light mode

Demo: https://codepen.io/t_afif/pen/XWPGWPp via :codepen: #CodePen

#CSS

`pen.new` I use @codepen daily and like it a lot. Yet there are two things that I miss: customisable keyboard shortcuts (I have a German keyboard) and faster performance. Compared with Vite locally, #Codepen feels just too slow.

`csb.new` Looking for alternatives, I found #CodeSandbox promising. They have two modes, cloud and browser - and browser mode has the responsiveness I was looking for.

Let's see if I get used to it or come back to Codepen for the many details they sure got right.

Me on #CodePen.

RT simey
the @CodePen #codepen #challenge is about Expanding Buttons ... Well here's the Expanding Brain meme (Galaxy Brain) in button format.
The code is a mess, don't look.
https://codepen.io/simeydotme/pen/jOveeBg
#webdev #css #js #frontend #FrontEndDeveloper

:sys_twitter: https://twitter.com/simeydotme/status/1638858415895109634

An expanding gallery for this week #CodePenChallenge

🌟 A CSS-only version with minimal code

Demo: https://codepen.io/t_afif/full/JjaebpJ via :codepen: #CodePen

#CSS

RT comicss
An animated version of today's cartoon! It is also coded in HTML and CSS, with some CSS animations.
Live demo and source code: https://codepen.io/alvaromontoro/pen/GRXGPBP
Cartoon on comiCSS (static image): https://comicss.art/?id=80
#css #html #video #codepen #animation #comic #webcomic #comicss https://t.co/AbXnCvFE9A

:sys_twitter: https://twitter.com/comi_CSS/status/1637632297083043840

my cultured ink is featured in this week's codepen spark!

https://codepen.io/spark/330

#codepen #creativecoding #wccchallenge #mathart

New demo... walking through how to do cutouts inside an element with CSS Shapes (via clip paths) + CSS Trig functions:

#codepen: https://codepen.io/danwilson/full/oNPoXEo

This is an animated version of today's cartoon! It is also coded in HTML and CSS, with some CSS animations.

Live demo and source code: https://codepen.io/alvaromontoro/pen/GRXGPBP

Cartoon on comiCSS site (static image): https://comicss.art/?id=80

#css #html #video #codepen #animation #demo #comic #webcomic #comicss

🎨 CSS Pattern!

Demo: https://codepen.io/t_afif/full/qBMygYM via :codepen: #CodePen

More CSS-only patterns 👉 https://css-pattern.com

#CSS

Viewed several pieces by Carlos Cruz-Diez recently at the Museum of Fine Arts Houston. Lots of lenticular effects and visual fun.

Which means I had to take a pass recreating the approach with CSS and 3D transforms on #codepen

https://codepen.io/danwilson/full/ZEMjXEB

💡 CSS Tip!

Add rotating circles around your image with a nice hover effect
✅ Only one element (the <img> tag)
✅ No pseudo-element
✅ Optimized with CSS variables
✅ Powered by trigonometric functions and @​property 🤩

Demo: https://codepen.io/t_afif/full/oNPyPQd via :codepen: #CodePen

#CSS

Another experiment with radio buttons for #CodePenChallenge

🌟 CSS-only using trig functions and :has() selector

Demo: https://codepen.io/t_afif/full/bGxMeJJ via :codepen: #CodePen

Use the keyboard and hold the key down for some magic levitation 🤩

You can add as many input as you want!

#CSS

A CSS drawing of a Motorola RAZR V3 (the best flip phone ever created 😉)

Coded in HTML and CSS, it is responsive and slightly animated (the screen will go to sleep after 10 seconds and wake up after pressing any button.)

Demo on #codepen: https://codepen.io/alvaromontoro/pen/JjaMMXw

#CSSArt #css #html #drawing #motorola #RAZR

A jumping radio button? Why not!

A fun little experience for this week #CodePenChallenge

🌟CSS-only powered by the :has() selector and some magic cubic-bezier()

Demo: https://codepen.io/t_afif/full/abaYxQj via :codepen: #codepen

#CSS

Reveal the caption of an image with a fancy hover effect. Powered by CSS Mask.

Demo: https://codepen.io/t_afif/full/BaOYqKZ via :codepen: #codepen

#CSS

@javascript

I want your #codepen / #jsfiddle

And the most random assortment of buttons to summon Satan https://codepen.io/thebabydino/pen/eYYyqZR

Fun fact: first made this for a conference talk. Upon arriving there, discovered the venue was a church. One of the paintings there crashed with a loud noise during my talk.
https://twitter.com/anatudor/status/1197923211347931138

Requires support for registering custom properties via @ property.

#CSS #JS #CodePen #webDev #button #buttons #control #controls #coding #webDevelopment #mask #svg #satan

Plus:

✨ an old download button https://codepen.io/thebabydino/pen/xZxyPb

✨ an animated version https://codepen.io/thebabydino/pen/VwzpMxV (Chromium only) of the candy ghost buttons I wrote about a few years back on CSS-Tricks: https://css-tricks.com/css-ing-candy-ghost-buttons/

#CSS #JS #CodePen #webDev #button #buttons #control #controls #coding #webDevelopment #mask #pastel

Some XOR effect close buttons for some random quotes https://codepen.io/thebabydino/pen/VwmQQwJ

The basic idea behind is something I recorded myself coding from scratch https://codepen.io/thebabydino/pen/bGBLXEy

The concept behind the XOR is something I explaine in this @css article https://css-tricks.com/taming-blend-modes-difference-and-exclusion/

#CSS #JS #blending #CodePen #webDev #button #buttons #control #controls #coding #webDevelopment

Some #3D pure #CSS buttons:

✨ https://codepen.io/thebabydino/pen/NWWzKzR

✨ https://codepen.io/thebabydino/pen/QWLJpOb

✨ https://codepen.io/thebabydino/pen/OwOgBv

✨ https://codepen.io/thebabydino/pen/bGrLprB

https://twitter.com/anatudor/status/1624419401184296961

#CodePen #webDev #button #buttons #control #controls #coding #webDevelopment #neumorphism

Some more glassy pure #CSS buttons with a single button element:

✨ https://codepen.io/thebabydino/pen/ajLVGN

✨ https://codepen.io/thebabydino/pen/GBMEqv

✨ https://codepen.io/thebabydino/pen/JBrNEx

✨ https://codepen.io/thebabydino/pen/jBbXPP

#CodePen #webDev #button #buttons #control #controls #coding #webDevelopment #glassy #pastel #neon

Some metallic buttons:

✨ https://codepen.io/thebabydino/pen/VeBoXx

✨ https://codepen.io/thebabydino/pen/QyVGeq

✨ https://codepen.io/thebabydino/pen/GBOKgV

✨ https://codepen.io/thebabydino/pen/VeGgXR

#CSS #CodePen #webDev #button #buttons #control #controls #coding #webDevelopment #metallic

Responsive buttons with #CSS vars
https://codepen.io/thebabydino/pen/qyVyKb

Glass buttons
#1 https://codepen.io/thebabydino/pen/QBOKPy

#2 https://codepen.io/thebabydino/pen/jpaZBy

Flat buttons
https://codepen.io/thebabydino/pen/porLEXy

#CodePen #webDev #button #buttons #control #controls #coding #webDevelopment

Would have loved to do something for this week's #CodePenChallenge, but the past weeks have had too many tech (both hardware & software) and non-tech problems eating out of my time, so all I have is a bunch of older button demos I made on #CodePen:

Soft #buttons https://codepen.io/thebabydino/pen/dLLxdj

#CSS #webDev #button #control #coding #webDevelopment

🎨 CSS Pattern!

Demo: https://codepen.io/t_afif/full/qBMpyqV via :codepen: #codepen

More CSS-only patterns 👉 https://github.com/Afif13/CSS-Pattern

#CSS

A nice use-case of #ChatGPT for me as a #marketer is the option to generate HTML.

And then, copy/paste the HTML into an online HTML editor (like #codepen) to get a preview of it.

This gives a better feel of what the copy could look like on a web page.

And iterating on the copy with ChatGPT is also fun.

#copywriting #marketing #wireframe #webdevelopment #productivity

💡 CSS Tip!

Add a fancy hover effect to your image
✅ One element (no pseudo-element)
✅ Optimized with CSS variables
✅ Powered by trigonometric functions and @​property 🤩

Demos via :codepen: #codepen

Version 1: https://codepen.io/t_afif/full/NWLXqPz
Version 2: https://codepen.io/t_afif/full/oNPpjLd

#CSS

But now, we can compute the scaling factor as the cosine of the skew angle, animate the skew angle* and the scaling factor changes accordingly 🥳🎉

*@​property support needed

#css #trigonometry #CodePen #coding #maths #geometry #webDev #webDevelopment #transform #CSStransforms #tiling

So we must scale down edges along the y axis post-skew in order to get a rhombus again!

This scaling factor is the cosine of the skew angle, which doesn't change linearly with a linear change in the angle from -90° to 90°. We can approximate the change with cubic-bezier, but we can't use individual transform properties as those would place the skew after the scale.

So when I first coded this 5 years ago, I chose to use #JS.

#css #transform #maths #trigonometry #CodePen #webDev #coding

There's also this square tiling https://codepen.io/thebabydino/pen/JjBEzMQ

This is a pure #CSS version of something I coded with #JS a few years back https://codepen.io/thebabydino/pen/JNZGwE/

If you look at the orange squares, they get squished to rhombi & eventually to a line (then they go back).

This is done with skew along the x axis. But the way this works https://codepen.io/thebabydino/full/JoQRdb means edges along the other axis (y) get longer & we don't have a rhombus (all 4 edges equal) anymore!

#CodePen #trigonometry #webDev #maths

Happy to be standing with the #artist , Brian DuPont, in front of one of his pieces inspired by a #poem of mine, "Ars Poetica"

The lines in his #art represent the stanzas, and some of my words are there he assures me. He wants viewers to "work... like #codepen breakers"

#ArtMatters #CreativeToots #creativecoding #coding #painting #poetry #poetrycommunity #writing #WritingCommunity #Gallery #JoinIn

Also made this torus knot https://codepen.io/thebabydino/pen/vYdMVJK??editors=0100

CSS trig functions allow to avoid hardcoding the position vector into a custom prop for each & every item making up the knot as I had to before when coding such shapes:

✨ https://codepen.io/thebabydino/pen/GMmzjP?editors=0100

✨ https://codepen.io/thebabydino/pen/wEqVwz?editors=1000

✨ https://codepen.io/thebabydino/pen/eGBZeQ?editors=0100

#css #webDev #coding #maths #geometry #3D #CodePen #torusKnot #trigonometry

GRUB is giving me a massive headache today😵😵‍💫, so here are a few things I made on #CodePen
that should now work in Chromium 111+ as a result of support for trigonometric functions dropping.

First up: Animated Möbius strip using CSS mathematical functions https://codepen.io/thebabydino/pen/wvybyMo

#css #webDev #coding #maths #geometry #3D #trigonometry #moebius

💡 CSS Tip!

Create a colorful loader using a few lines of code
✅ One element
✅ 10 CSS declarations
✅ One value to control the size

Demo: https://codepen.io/t_afif/full/MWqOpYG via :codepen: #codepen

#CSS

💡 CSS Tip!

Use online generators to create CSS shapes using clip-path in not time!

Polygon Shapes 👉 https://css-generators.com/polygon-shape
Starburst Shapes 👉 https://css-generators.com/starburst-shape

✅ One Click to copy the code

Demo: https://codepen.io/t_afif/full/KKxXRWB via :codepen: #codepen

#CSS

🎨 CSS Art!

The last episode of #AttackOnTitan was a masterclass! Here is a CSS Art to celebrate it

A CSS-only version of The Rumbling! Coming for you! ☠️☠️ ☠️

Demo: https://codepen.io/t_afif/full/BaOLqom via :codepen: #codepen

More CSS-only Arts 👉 https://css-only.art

#CSS #ShingekiNoKyojin #AttackonTitanFinalSeason

For the latest #CodePenChallenge: grainy dissolving an image's edges https://codepen.io/thebabydino/pen/oNMBeye?editors=1100

Done with #CSS + an #SVG filter, heavily commented.

For comparison, the original image in the img tag which you can see on right click, open image in new tab.

#CodePen #webDev #webDevelopment #coding #SVGFilter

Something for this week's #CodePenChallenge: 1 div grainy/ dithered gradient blob with a simple SVG filter https://codepen.io/thebabydino/pen/GRBrWeY

I've given this concept a try before https://twitter.com/anatudor/status/1407388305948397571 but lately, I've been toying with SVG filters a bit more and... I got better at it...🤷‍♀️

#CSS #SVG #CodePen #SVGFilter #dither #grainy #gradient #blob #webDev #webDevelopment #compositing #maths