CodePen.IOVerified account

@CodePen

Build, test, and discover front-end code Support:

All remote team!
codepen.io
Joined March 2012
1,342 Photos and videos Photos and videos

Tweets

You blocked @CodePen

Are you sure you want to view these Tweets? Viewing Tweets won't unblock @CodePen

  1. Retweeted
    Jul 23

    A exploration, Nav Bar meets Bottom Sheet on Trying out a different kind of navbar, where each nav option is a bottom sheet. Built with , react-spring and react-use-gesture

    4 replies 28 retweets 189 likes
    Undo
  2. Retweeted
    Jul 23

    How many divs to make this pure CSS truck? 🤔 Zero!!! 🤯🔥 It uses body:after 🤫(And no external images 😅) It's responsive too! 😎 Will you take the "No div" challenge? 🤓 💻 via

    71 replies 197 retweets 1,321 likes
    Show this thread
    Show this thread
    Undo
  3. Retweeted
    Jul 23

    Did you know CodePen has (almost) 1,000 Font Awesome icons built in? Give that "Assets" button in the bottom left a click on your next Pen and you can get a lot of great free resources!

    1 reply 8 retweets 32 likes
    Undo
  4. Retweeted
    Jul 22

    Today I recreated a like button micro interaction designed by Take a look at my link ⬇️ Learning: @gsap timelines, reset Design via -

    8 replies 8 retweets 55 likes
    Show this thread
    Show this thread
    Undo
  5. Jul 22

    "XS, S, M, L, XL" by Mikael Ainalem

    16 retweets 144 likes
    Undo
  6. Retweeted
    Jul 22

    As I've got some new followers lately, many of whom are new coders, I thought I'd share some of the strange things I've made on . Here's my "Fun Stuff" collection via CodePen TV. Feel free to fork, play, improve and share.

    3 replies 8 retweets 33 likes
    Undo
  7. Retweeted
    Jul 22

    I just discovered that you can use CSS calc() in a cubic-bezier function. In this I'm using an index value set in a CSS variable as a multiplier to create dynamic easing on these animations. It generates a pretty interesting effect! Check it out:

    14 replies 157 retweets 1,047 likes
    Undo
  8. Jul 22

    "tsParticles noise, emitters and colors" by Matteo Bruni

    1 reply 11 retweets 66 likes
    Undo
  9. Retweeted
    Jul 21

    I think I pulled a muscle with all the stretching I did in this tutorial. 😜 Using only the core gsap files from (free to use BTW), you can make this easy little nav. Read the tutorial. Check out the demo.

    2 replies 19 retweets 98 likes
    Undo
  10. Retweeted
    Jul 20

    Don't mind me... just dropping some droplets in your feed 🥁

    8 replies 33 retweets 239 likes
    Show this thread
    Show this thread
    Undo
  11. Jul 20

    "Scroll for pipes" by Andy Barefoot

    1 reply 16 retweets 166 likes
    Undo
  12. Jul 20

    "Spinning 3D Yin Yang" by Andrew Moglione

    3 replies 13 retweets 79 likes
    Undo
  13. Retweeted
    Jul 18

    Practising making grid layouts with CSS grid by recreating a wonderful typography poster in Credit to

    Side by side comparison of a blue and yellow french typography poster coded in CSS.
    Original poster by Jessica Fecteau, the poster from Etapes.com
    Recreated poster built-in CSS relying on CSS grid.
    2 replies 5 retweets 37 likes
    Show this thread
    Show this thread
    Undo
  14. Retweeted
    Jul 20

    This is an old project that I have been planning to re-code for a long time, and today I finally got to it. A mandala maker Full code : * not adapted for mobile (yet...)

    7 replies 17 retweets 129 likes
    Undo
  15. Retweeted
    Jul 16

    Geez, sticking to a single div is a real test to my patience!

    11 replies 23 retweets 210 likes
    Undo
  16. Retweeted
    Jul 19

    SVG polygon scaling animation for the first animation exercise in SVG Essentials and Animation course. A lot of experimentation with transform-origin and animation-delay, but turned out pretty well!

    5 replies 17 retweets 77 likes
    Undo
  17. Jul 20

    It's week three of the July ! This week, let's get animated with Flutter's implicit animations 💙 Thanks for sponsoring!

    1 retweet 15 likes
    Undo
  18. Retweeted
    Jul 17

    Fun with psychedelic CSS gradients. Would make great wallpaper.

    3 replies 9 retweets 86 likes
    Show this thread
    Show this thread
    Undo
  19. Retweeted
    Jul 17

    Had a pretty mundane rainy day off. I attempted to recreate one of the apartment windows with CSS on . The color used for the wall in this project is called vivid tangerine. It is not the actual color of the wall here. Yet. See it live:

    2 replies 5 retweets 46 likes
    Undo
  20. Jul 17

    "foam" by ycw

    4 retweets 40 likes
    Undo

@CodePen hasn't Tweeted yet.

Loading seems to be taking a while.

Twitter may be over capacity or experiencing a momentary hiccup. Try again or visit Twitter Status for more information.

    You may also like

    ·