CSS photo effects - a Collection by Lynn Fisher on CodePen
These wonderfully realistic photo effects from Lynn are quite lovely!
These wonderfully realistic photo effects from Lynn are quite lovely!
I love this little to-do app! Every time you tick something off your list, something grows in your virtual terrarium. Lovely!
This is not an image format. This is made of empty elements styled with CSS. (See for yourself by changing the colour value of the sun.)
How cool is this!!?
Tom took one of the core ideas from my talk at Beyond Tellerrand and turned it into this animated CodePen!
Woah! This is one smart hack!
Scott has figured out a way to get all the benefits of pointing to an external SVG file …that then gets embedded. This means you can get all the styling and scripting benefits that only apply to embedded SVGs (like using fill
).
The fallback is very graceful indeed: you still get the SVG (just not embedded).
Now imagine using this technique for chunks of HTML too …transclusion, baby!
This is a nifty visualisation by Hui Jing. It’s really handy to have elements categorised like this:
This orrery is really quite wonderful! Not only is it a great demonstration of what CSS can do, it’s a really accurate visualisation of the solar system.
Mandy’s experiments with text effects in CSS are kinda mindblowing—I can’t wait to see her at Ampersand at the end of the month!
This ever-growing curated collection of interface patterns on CodePen is a reliable source of inspiration.
I really like this month’s CodePen challenge, all about HTML elements that go well together. First up: del
and ins
.
I’m not sure why but I genuinely love this Windows 95 style interface for Instagram coded up by Gabrielle Wee.
Suggestions for small interface tweaks.
There’s going to be a CodePen meetup in Brighton as part of the Brighton Digital Festival. Should be fun! See you there.
We don’t want the field to de-democratize and become the province solely of those who can slog through a computer science degree.
So we need new tools that let everyone see, understand, and remix today’s web. We need, in other words, to reboot the culture of View Source.
This is a really great screencast on getting started with React. I think it works well for a few reasons:
There’s a little bit of “here’s one I prepared earlier” but, on the whole, it’s a great step-by-step approach, and one I’ll be returning to if and when I dip my toes into React.
Form validation taken to the extreme. If you want to know more about how it was done, there’s an article explaining the markup and CSS.
Here’s a handy interface if you want to get your head around named areas in CSS Grid, also known as doing layout with ASCII art.
Incredibly impressive work from the CodePen team—you can now edit entire projects in your web browser …and then deploy them to a live site!
This is a clever technique by Dave—use viewport units to make a lightweight lightbox.
Here’s another clever CSS technique. It uses flexbox to add horizontal lines either side of centred content.