RT Lewis Lane 🐷
Couldn't resist a cheeky codepen of this:
Kissing in the Rain: You also have to say what you are. Älegna. And I’m a trestle table.
RT T. Afif @ CSS Challenges
💡 CSS Tip!
Create a colorful bar loader using a few lines of code
✅ 1 element
✅ No pseudo-element
✅ 2 declared gradients
✅ Less than 15 declarations
✅ 1 value to control the size
Demo:
#CSS
http://codepen.io/t_afif/full/BaYqggw
https://twitter.com/ChallengesCss/status/1539934312887377921
RT jake albaugh
over 7 years ago now! so grateful to the @CodePen community and team.
jake albaugh: 5y ago i was fairly isolated. i had a weird idea, made this self-coding pen and the @CodePen community was there for it. it meant everything.
you absolutely do not need to build silly things to succeed in tech, but if you want to, please go for it.
https://codepen.io/jakealbaugh/pen/PwLXXP
RT Hyperplexed
Recreating @Twitch gradient hover effect on @CodePen
Link:
Tutorial:
#codepen
https://cdpn.io/QWQRGdO
https://youtu.be/joDhIH6Xumw
RT Kit Jenson
Catch Of The Day. A simple #game where you catch as many #fish as possible. Good luck.
#codepen #HTML #CSS #javascript #webdev #indiegame #indiedev #indie #hooked #lake #boat
https://codepen.io/kitjenson/full/eYzovNv
RT Adam Kuhn
design team handed me a solid opportunity for some generative work for the upcoming #KongSummit2022 so I cobbled this together in vanilla JS & CSS grid w/ a whole lot of custom properties and some fun box-reflect & backdrop-filter tricks
thnx for lookin'
https://codepen.io/cobra_winfrey/full/poaYpGV
https://twitter.com/cobra_winfrey/status/1539612659364118531
RT Jhey ✈️🐻✨ {transform:translate(@smashingconf);}
Honestly. I kinda love playing with it 😅
Use it on a device and send us your screenshots! 👀
And if you're at @smashingconf, pick up the zine and make your own! 🙌
👉
zeroheight: Inspired by our loopy pencil sticker, @jh3yy has created a squiggly pencil codepen that is super cool and addicting to use 🖊 Pick up a copy of our zhine at our stall at @smashingconf and check out his tutorial!
RT Jon Kantner
Bouncy Block Clock
https://codepen.io/jkantner/pen/GRQaPPV
RT masahito art
Coded a dystopian robot simulation - an ecosystem of robots hunting each other and multiplying.
@CodePen
#javascript #robots
https://codepen.io/Ma5a/full/LYQoLNR
RT Ana Tudor 🐯🖤🌻
Another pure CSS card backgrounds demo I made on @CodePen:
Each card is just 1 div. No SVG, no JS.
Only CSS. And can get some pretty damn cool effects too.
https://codepen.io/thebabydino/pen/NWxBzRv
RT Toshiya Marukubo
漫画線みたいな
Code and Demo👇
Video alt : On radial lines is displayed when hover to elements.
https://codepen.io/toshiya-marukubo/pen/LYQvrMN
https://twitter.com/toshiyamarukubo/status/1538483112623058944
The Numbers #CodePenChallenge continues 🔢
This week, let's play with even & odd numbers!
Thanks @taradotai for sponsoring!
https://codepen.io/challenges/2022/June/3
RT Kit Jenson
In browser #Magnet fun. Play with it here:
#codepen #magnets #positive #negative #HTML #CSS #javascript #kindofagame #webdev #indiegame #indiedev
https://codepen.io/kitjenson/full/rNJPezV
RT Adrian Roselli 🗯
Re In honor of the first Friday since the end of some support for IE11, add a novelty “Best viewed with Internet Explorer” badge to your site!
Perfect for your Reangvuelarct-powered project!
https://codepen.io/aardrian/pen/QWQGBed
RT Stephanie Eckles
🟣 CSS Quick Tip
The `mask` property allows so much creativity, and the essential functionality has great support when -webkit prefixed.
Create an SVG with black shapes, then apply it to an img:
➡️ mask: url(your-mask.svg) no-repeat center;
https://codepen.io/5t3ph/pen/GRQebrX
RT Sulamita Ivanov
Re Built the same exact portfolio website using Flexbox then CSS Grid. It looks like less code in Grid but there's more in the Grid Media Query to make it responsive 😅
Check out the details in my Codepen:
https://codepen.io/collection/aMWKqW
https://twitter.com/sulamitaivanov/status/1537193406710943745
RT Kit Jenson
Jellyfish Mayhem! Play it now.
#codepen #indiedev #indie #indiegame #indiegaming #submarine #jellyfish #HTML #CSS #Javascript
https://codepen.io/kitjenson/full/mdXqXJL
RT Amber 💻✨ JavaScript + React Dev
This week's #CodePenChallenge prompt is "Positive and Negative", which made me think of temperatures, so I made a little interactive thermometer! I wish I could turn down the Florida heat this easily 🔥🥲
Check it out here:
https://codepen.io/aharmon413/full/ExQGpoL
RT carl schooff
Boxy SVG + CodePen + GreenSock is the ULTIMATE tech stack for #svgSummer!
Watch me design, build, and animate an SVG banner in under 10 minutes. Beginners Welcome!
Design: @BoxySVG
Build: @CodePen
Animate: @GreenSock
Full Video:
#svg #100DaysOfCode
https://www.youtube.com/watch?v=0W4BO7rpMr0
Build, test, and discover front-end code 👩🏽💻