Codrops
Codrops is a front-end site with tutorials, demos, and references on CSS, JavaScript, and web animation.
What HN says
HN commenters recommend it for its CSS reference, design-trend demos, and artistic web experiments, and call it a favorite for learning front-end code.
Stats for nerds
251HN people shared it
307linked in comments
2.7Kstory points
Jun 2025last shared
Top posts on HN
- 1Go nuts with CSS3 hover effects1 person · 314 points · first shared 2011 · 68 comments on HN
- 2Progress Button Styles2 people · 291 points · first shared 2013 · 52 comments on HN
- 3How to Create the Apple Fifth Avenue Cube in WebGL1 person · 253 points · first shared 2019 · 23 comments on HN
- 4Off-Canvas Sidebar Transitions with CSS7 people · 218 points · first shared 2013 · 28 comments on HN
- 5Rain and Water Effect Experiments6 people · 161 points · first shared 2015 · 30 comments on HN
- 6Experimental Page Layout Inspired By Flipboard2 people · 151 points · first shared 2012 · 51 comments on HN
- 7Modeling the World in 280 Characters1 person · 118 points · first shared 2025 · 16 comments on HN
- 8Using Snap.svg to animate SVG icons1 person · 109 points · first shared 2013 · 19 comments on HN
- 9Creative Link Effects - Subtle and modern effects for links or menu items2 people · 108 points · first shared 2013 · 28 comments on HN
- 10Experimental 3D page layout inspired by Flipboard2 people · 69 points · first shared 2012 · 28 comments on HN
What HN people wrote when they linked it
- iamphilsharpAug 2012
This isn't available for others to try yet. Before I put a lot of work into the idea I wanted to see if anyone else found it worthwhile.
I read a lot of books these days, but for the most part they're digital. Because of that, they're not staring at me on a bookshelf and I find myself forgetting what I've read. Most importantly, I find myself forgetting the memories attached to those books.
Before e-books, I'd have physical copies that would remind me of specific moments in my life. It was nice to see a few books and think, "Oh yeah, that was when I lived in San Francisco and met my girlfriend," or "oh yeah, that book reminds me of my family back in Southern California."
I wanted to get that feeling back. The feeling of being able to look through my past...but by using books. I put this together as something quick and easy to make me happy.
In fact, all the code can be found here: http://tympanus.net/codrops/2011/12/05/lateral-on-scroll-sliding-with-jquery/. If folks are interested in the idea then please let me know and I'll see about making something that we all can use.
This is just my way of showing the quick idea :).
- pseudosavantApr 2021
This is a great exploration of how to use SVG on the web. It is a very under-utilized technology.
One thing that would add to this post is to point out that you can define an SVG once in a document and then reference it everywhere else. That way you aren't inlining the actual SVG markup over and over and over.
1. Place your SVG inline anywhere in the document. I usually put all of them in a `<div>` I do `display: none` on.
2. Make sure you assigned each SVG an ID: `<svg id="foobar"><!-- SVG markup --></svg>`
3. Reference that SVG anywhere in your document using `<svg><use xlink:href='#foobar'></svg>`
I use it extensively in a Github project (shameless plug) I've been working on lately. https://github.com/pseudosavant/player.html/blob/master/src/player.html#L682
Edit: The author does link to her great post digging into the details of using `<use>`, but it didn't seem prominent enough that people would check it out. https://tympanus.net/codrops/2015/07/16/styling-svg-use-content-css/
- zh3Nov 2024
Related online demo on using mediapipe for flying spaceships and camera/hand interaction to grab VR cubes (2nd link for the demo). There was a discussion on hackaday recently [2].
[0] https://tympanus.net/codrops/2024/10/24/creating-a-3d-hand-controller-using-a-webcam-with-mediapipe-and-three-js/
[1] https://tympanus.net/Tutorials/webcam-3D-handcontrols/
[2] [https://hackaday.com/2024/10/25/diy-3d-hand-controller-using-a-webcam-and-scripting/ DIY 3d hand controller
- dannyp32Apr 2013
Purely design or using css to bring your design to life?
Here is a good website for web design inspiration. Some of the best designers in the world are on http://dribbble.com
You can see design patterns by regularly visiting the site, and some of them provide freebies so that you can see how they created their designs.These sites also has some good tutorials:
http://webdesign.tutsplus.com/
http://tympanus.net/codrops/ - gits1225Mar 2014
http://html5weekly.com/ is one quality newsletter. Then there is http://tinyletter.com/webaudioweekly which I have been subscribed to for around 3 weeks now; some really interesting links there.
From the list in the OP, http://webtoolsweekly.com/ and http://tympanus.net/codrops/ looks very very interesting. Thanks for sharing this.
Edit:
Unfortunately, codrops doesn't seem to have a subscribe by email option. Oh well. - yregSep 2021
It's Daedalus[0], so more of an SGA ship.
This is the one thing OP got right, the demo looks like the VFX seen in Stargate.The original demo that OP copied labeled the effect "Star Wars" although it looks nothing like Star Wars. [1]
[0] - https://stargate.fandom.com/wiki/Daedalus
[1] - https://tympanus.net/Development/InfiniteTubes/index3.html