Adactio: Links—Tagged with codepen

Popover API Sliding Nav

Here’s a nifty demo of popover but it’s not for what we’d traditionally consider a modal dialog.

Revealing ‘back to top’ button

Such a clever minimalist use of CSS!

CSS photo effects - a Collection by Lynn Fisher on CodePen

These wonderfully realistic photo effects from Lynn are quite lovely!

To-Do Terrarium

I love this little to-do app! Every time you tick something off your list, something grows in your virtual terrarium. Lovely!

Pure CSS Landscape - An Evening in Southwold

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.)

Web Layers Of Pace

How cool is this!!?

Tom took one of the core ideas from my talk at Beyond Tellerrand and turned it into this animated CodePen!

Inline an SVG file in HTML, declaratively & asynchronously!

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!

HTML periodical table (built with CSS grid)

This is a nifty visualisation by Hui Jing. It’s really handy to have elements categorised like this:

Root elements
Scripting
Interactive elements
Document metadata
Edits
Tabular data
Grouping content
Embedded content
Forms
Sections
Text-level semantics

CodePen - Solar System 3D Animation (Pure CSS)

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.

Text Effects - a Collection by Mandy Michael on CodePen

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!

Design Patterns on CodePen

This ever-growing curated collection of interface patterns on CodePen is a reliable source of inspiration.

CodePen Challenge - May 2018 - HTML Buddies

I really like this month’s CodePen challenge, all about HTML elements that go well together. First up: del and ins.

CodePen - Instagram.exe

I’m not sure why but I genuinely love this Windows 95 style interface for Instagram coded up by Gabrielle Wee.

Little UI details from @steveschoger, in HTML and CSS

Suggestions for small interface tweaks.

Brighton CodePen Meetup / Wednesday, October 4 6:00 PM - 9:00 PM

There’s going to be a CodePen meetup in Brighton as part of the Brighton Digital Festival. Should be fun! See you there.

It’s Time to Make Code More Tinker-Friendly | WIRED

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.

Starting a React-Powered Comment Form | CSS-Tricks

This is a really great screencast on getting started with React. I think it works well for a few reasons:

Sarah and Chris aren’t necessarily experts yet in React—that’s good; it means they know from experience what “gotchas” people will encounter.
They use a practical use-case (a comment form) that’s suited to the technology.
By doing it all in CodePen, they avoid the disheartening slog of installation and build tools—compare it to this introduction to React.
They make mistakes. There’s so much to be learned from people sharing “Oh, I thought it would work like that, but it actually works like this.”

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.

Link tags: codepen

27