#CodePen

#CodeAlcea

Render #pdf in browser
(@ #codepen )
https://codepen.io/ryedai1/full/KKGYemE

Now if just I could forward an url and load that pdf without user interaction...

#CodeRyeDai

Render #pdf in browser
(@ #codepen
https://codepen.io/ryedai1/full/KKGYemE

skeuomorphic keyboard keys! (Using the chromebook im using right now as a reference)

https://codepen.io/Vixey/pen/bGmzRWB

#WebDev #creativecoding #css #codepen

✨Best way to get grainy gradients✨ https://patreon.com/posts/video-grainy-83191847/

🚫 no external images
🚫 no base64 vomit
🚫 no messing with contrast/ brightness of gradient
✅ under 250 bytes #SVG filter
✅ even less #CSS
✅ covers text & shadow cases

https://codepen.io/thebabydino/pen/abjpEbz

https://codepen.io/thebabydino/pen/VwBPygQ

#CodePen #svgFilter #filter #coding #webDev #frontend #webDevelopment

RT Zoë | z-
Stacked cards that show on hover. A friend asked me how to do this effect so I whipped this up for them and I wasn't sure going into it but I quite like it.
https://codepen.io/z-/pen/eYPLWWL on @CodePen #CodePen #webdesign #css https://t.co/uM29TuUWrU

:sys_twitter: https://twitter.com/zed_dash/status/1658469586138972160

RT Jordan Dey
I've created an instant photo film gallery!📸
Featuring a vanilla #javascript drag and drop functionality for desktop and mobile devices.
@CodePen: https://codepen.io/DeyJordan/pen/ExdpEYV
#photography #HTML #CSS #webdesign #frontend #CodePen #CodeInspiration #WebDevCommunity #CodeFun #CodeDemo https://t.co/fyOUYobjd6

:sys_twitter: https://twitter.com/DeyJordan/status/1658155798189551620

Started cleaning up my tags on #codepen

Came across a completely broken palette generator demo (only ever worked in Chrome anyway). Set out to fix it in a way that it's actually useful and accessible and it isn't just setting a gradient on a div. And why not add the option of allowing to set how many tints/ shades/ tones to set and the option to pick the format to export in?

A day later: WTF did I get myself into? 😭

#CSS #JS #webdev #coding #webDevInRealLife #JavaScript

#codepen Vue button with animated Tailwind background gradient for you to steal for your next project :)
https://codepen.io/michaelsynan/pen/YzJvyxO

#vue #javascript

tonight's code doodle:

https://codepen.io/fractalkitty/full/poxKyLB

#ternaryDiagram #creativeCoding #p5js #mathart #math #barycentric #diagram #wccchallenge #codepen

//click to add (in triangle)
//space to reset
//arrowkeys to play with light and dark
//didn't have time to comment - just doodled before bed tonight

RT Zoë | z-
Just hit 7'500 followers on #CodePen! I've always found perspective art interesting and made one with CSS to celebrate 🥳
https://codepen.io/z-/pen/QWZQPZJ on @CodePen #webdesign #CSS https://t.co/02ujaZDtIR

:sys_twitter: https://twitter.com/zed_dash/status/1656644999050567683

RT Zoë | z-
Getting that shrinking feeling. A drop-down that hides based on the distance the cursor has moved away. https://codepen.io/z-/pen/dygeoyO on @CodePen
This also uses CSS Grid to get the button to smoothly change to max size without setting the size explicitly.
#CodePen #webdesign https://t.co/in3srwA5Mu

:sys_twitter: https://twitter.com/zed_dash/status/1656306312353918977

RT Ceramic Soda
https://codepen.io/ceramicSoda/pen/yLRKoRZ?editors=1100 via @CodePen #CodePen #SVG https://t.co/5paEb4MRMm

:sys_twitter: https://twitter.com/CeramicSoda/status/1655921327633465345

Oh, and now I've seen someone else ❤️ed this 🌈 logarithmic spiral from a couple of years back https://codepen.io/thebabydino/pen/powNvqB

This could also really benefit from getting a pure #CSS exp() remake!

#CodePen #mathematics #maths #cssTricks #cssGrid #coding #frontend #webDev #webDevelopment

Someone ❤️ed a #CodePen ▦ animation https://codepen.io/thebabydino/pen/KJddbK I made half a decade ago and when I saw it, it hit me how having sqrt() in #CSS can help us with creating a triangular grid in CSS without setting row & col indices on each item and without shape-outside/ float tricks. 💡

Really need to code some use cases for the mathematical functions. The MDN examples are so bad at illustrating how useful they are...😭

#mathematics #maths #cssTricks #cssGrid #coding #frontend #webDev #webDevelopment

🆕 quick video: pure CSS invert text on scroll https://www.patreon.com/posts/video-pure-css-82521128 - yes, we can now do this without JS! 🤯

Live demo on #CodePen https://codepen.io/thebabydino/pen/QWVLBqe

Inspiration https://codepen.io/PointC/pen/ZErvbPR

#css #cssTricks #scrollAnimation #scroll #webDev #frontend #coding #webDevelopment #blending

RT kotAndy 🐾
I couldn’t resist taking the opportunity to congratulate everyone on #StarWarsDay ✨ via @CodePen
May the 4th be with you ❤️
https://codepen.io/kotAndy/full/mdzqQKW
#CodePenChallenge #typography #creativecoding #typescript #codepen @PixiJS https://t.co/iTRyZ6asQi

:sys_twitter: https://twitter.com/raccoontend/status/1654184983961952257

May the 4th be with you!

10 years ago I created the #StarWars opening crawl from 1977 in #HTML / #CSS / #JS on #CodePen. It still works, I only had to update some asset-links (from HTTP to HTTPS) at some point.

I love the #web as a platform 💖

🚀 https://codepen.io/TimPietrusky/details/AGrxGb

RT Nick Watton
I just finished a @CodePen of a Star Wars Celebration logo using hand rolled SVGs. It was a fun challenge and I'm really pleased with how it turned out. Next, perhaps to animate it?!
https://codepen.io/2Mogs/full/KKGXPmX
#StarWars #StarWarsCelebration #codepen #svg #illustration

:sys_twitter: https://twitter.com/nickwatton/status/1653432004090667012

RT Ceramic Soda
💫 SVG Starry cube 💫 https://codepen.io/ceramicSoda/pen/ZEqXypP via @CodePen #CodePen #minimalist #SVG #animation

:sys_twitter: https://twitter.com/CeramicSoda/status/1653344008482193408

My data doodle is in codepen’s spark this week:

https://codepen.io/spark/336

#codepen #creativecoding

The effect below happens on scroll and is done with pure #CSS - no JS and no text duplication! 🤯

You can see me code it from scratch https://www.patreon.com/posts/video-pure-css-82348440

or check the live demo on #CodePen https://codepen.io/thebabydino/pen/YzJPRvd

Inspiration https://codepen.io/Hyperplexed/pen/BaYXaOx

#scrollAnimation #frontend #webDev #webDevelopment #coding #cssTricks

Petit kiff de la semaine :
https://codepen.io/twogrey/pen/rNqyoOd 🌅 🌇

#css #front #codepen #synthwave

Cette page utilise plusieurs choses que je voulais expérimenter :

1 - L'animation basée sur le scroll
➡ Voir les moults démos de @bramus https://bram.us/2022/10/27/scroll-linked-animations-with-scrolltimeline-and-viewtimeline/ et l'article de RatonCodeur https://www.swebdev.fr/blog/decouverte-des-scroll-linked-animations

2 - Le masquage par dégradé
➡ Voir l'article de @shadeed9 https://ishadeed.com/article/css-masking/

3 - Les transformations individuelles (translate, rotate, scale)

RT Maciek Fitzner
Again having too much fun with #css & trigonometry. New #codepen for your viewing & tweaking pleasure on @CodePen https://codepen.io/MackFitz/full/QWZpyMa https://t.co/5Up6v0LeiK

:sys_twitter: https://twitter.com/FitzMack/status/1650424508862410752

RT Juxtopposed
daily design + code #3
exploring grainy textures and gaussian blur today.
✨ @CodePen: https://codepen.io/Juxtopposed/pen/BaqLEQY?editors=1100
✨ #dribbble: https://dribbble.com/shots/21248617-Daily-Design-Code-3-Grainy-Gradients-Blurry-Background
#codepen #css #dailydesigncode #dailyUI https://t.co/Kq2RigFf6Z

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

@Luke I just had a look, and that doesn't appear to be in the CSS spec yet outside of experimental Chrome features.

This #CodePen suggests that the JS isn't that complex, though.

https://codepen.io/dudleystorey/pen/mdQEXK

RT Vineeth.TR
Unsubscribe Template 🐰 animation model in pure CSS
The demo link and explanation are below 👇
https://codepen.io/vineethtrv/pen/GRYjGXb?editors=0100
via @CodePen @HotOnCodePen @css #css_only #codepen #dev https://t.co/fZSpkxZuNq

:sys_twitter: https://twitter.com/vineethtrv/status/1648652113520603136

RT Wakana Y.K.
Today's work🏅
Stained glass
Demo: https://codepen.io/wakana-k/pen/YzJqBpM
Stained Glass textures is AI illustration.
@CodePen #codepen #threejs #Stainedglass https://t.co/5xO0ThGWgB

:sys_twitter: https://twitter.com/WakanaYK/status/1647611801004290048

RT simey
set fire to your browser. literally. 🔥
only @ @CodePen
https://codepen.io/simeydotme/pen/PoyzbPM
(☢️do not click if you're on your phone)
#codepen #fire #css #filter #webdev #frontend

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

RT Paul Roger
SOTD Challenge #2 : Awwwards - SOTD Animation in 1h
https://codepen.io/Tiopayo/full/eYPpLVe
Inspired by : https://2authenticators.co/
@CodePen #codepen #gsap #js #css https://t.co/YRdsMJnSVT

:sys_twitter: https://twitter.com/PaulTiopayo/status/1646471420011065344

RT Paul Roger
Challenge : Awwwards - SOTD Animation in 1h
https://codepen.io/Tiopayo/pen/QWZbqZz
Inspired by : https://www.torebentsen.com/ (@ToreBentsen)
@CodePen #codepen #gsap #js #css https://t.co/ePGOUKX2JI

:sys_twitter: https://twitter.com/PaulTiopayo/status/1645491846683168770

💡 CSS Tip!

Do you want to select the first and last element with a specific class? It's possible and you can do it using 2 different methods!

The browser support will soon be good so save them for your next project 👍

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

Online version: https://css-tip.com/first-last-element-with-class

#CSS

Fawn lilies - click to change

https://codepen.io/fractalkitty/full/wvYWRzE

#cpcchallenge #codepen

💡 CSS Tip!

Use @​counter-style to customize your <ol> list with a simple code
✅ No extra markup
✅ No pseudo-element
✅ No need for counter()
✅ Keep the default browser algorithm

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

Online version: https://css-tip.com/custom-numbered-list

#CSS

🎨 CSS Pattern!

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

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

#CSS

🎨 CSS Pattern!

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

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

#CSS

💡CSS Tip!

Use modern CSS tricks to create fancy range sliders with a minimal code

✅ No JavaScript
✅ No extra element (only the <input> tag)
✅ Optimized with CSS variables
✅ Transparent gap around the thumb

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

#CSS

🎨 CSS Pattern!

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

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

#CSS

The other demos they have on their website I'm pretty sure I have seen on #CodePen before. So if you've had demos featured, your work might be there too. Maybe even among the demos for which they are *selling* the source code https://www.buymeacoffee.com/technewsidea/extras

Bonus: it looks like they also have ads on their website (I block that stuff, so I hadn't noticed, it was @css who told me).

@T0xF01AE

I know.
I wish the export feature was like on #codepen or via #curl on #jsfiddle

🎨 CSS Pattern!

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

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

#CSS

So yeah, this was my solution https://twitter.com/ChallengesCss/status/1644051649273516037

You can see it on #CodePen as this *heavily* commented demo https://codepen.io/thebabydino/pen/MWPWXXw?editors=0100

1 div, 13 CSS declarations including layout, under 500 bytes of CSS, almost 15% of which are the cat image URL.

#css #coding #webDev #frontend #webDevelopment #blending #blendMode #cssFilter #cssGradient

Stuff I've been doing lately: support* tests for mathematical functions.

Confused about what browser supports what mathematical functions or constants?

https://codepen.io/thebabydino/pen/yLRBJXP tells you what your browser supports.

*not only support, but more about that/ use cases another time

#css #maths #mathematics #coding #trigonometry #webDev #webDevelopment #frontend #CodePen

RT Juxtopposed
using this real-time UI colorpicking tool, now you can find random trendy color palettes on the design itself.
just press the Spacebar and get started :)
try it out now on @CodePen:
https://codepen.io/Juxtopposed/full/VwGovbY
or check live site: https://realtimecolors.com
#codepen #webdesign https://t.co/AqWmStqLaS

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

#wccchallenge #codepen

Where I live

poetry in code (see comments)

https://codepen.io/fractalkitty/full/dyqxOPm

this one is not interactive

RT Jordan Dey
Five lines of code for a colorful gradient effect 🌈🌈🌈
I made a @CodePen to show what we can do with #SCSS loops🌀
Take a look : https://codepen.io/DeyJordan/pen/BaOXNaE
#webdevelopment #frontend #CSS #codinglife #codepen #codingtips #webdesign #programming #CSS3 #HTML #html5 https://t.co/EQz9fVhcOL
<div class="rsshub-quote">
Jordan Dey: Why use loops with just #JavaScript, when you can use them with #SCSS too? Loops can save you a lot of time 🔄
Check out this demo using a #CSS helper for spacing
#webdevelopment #webdeveloper #webdev #codingtips #programming #frontend #webdesign #HTML #sass #CSS3 #html5 https://t.co/wW4CMq4t8D
</div>
:sys_twitter: https://twitter.com/DeyJordan/status/1642955857364221952

💡 CSS Tip!

Use conic-gradient() and the new color interpolation to create a color wheel 🤩

✅ Tell the browser to take the longer route between red and red
❌ No complex color combination

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

#CSS

🎨 CSS Pattern!

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

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

#CSS

💡 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

✨ 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

Me on #CodePen.

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

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