Discoveries #2
New month, new discoveries. We will deal with key bindings, downloads on the fly, a lot of animations and contrasting images. Have fun, trying out these stunning solutions.
- tinykeys - Modern library for keybindings
- Creating files in JavaScript in your browser
- CSS Animated Google Fonts
- Skeleton Screen CSS
- More Control Over CSS Borders With background-image
- A CSS-only, animated, wrapping underline
- Nailing the Perfect Contrast Between Light Text and a Background Image
- Contrast.js
tinykeys - Modern library for keybindings
by Jamie Kylehttps://jamiebuilds.github.io/tinykeys
Very easy to use key binding library for JavaScript. Supports key sequences and modifier keys.
Creating files in JavaScript in your browser
by Kilian Valkhofhttps://kilianvalkhof.com/2020/javascript/creating-files-in-javascript-in-your-browser
Kilian shows how to prepare data in JavaScript and offer them to download on the fly, without the use of storing a file.
CSS Animated Google Fonts
by Jhey Tompkinshttps://dev.to/jh3y/animated-google-fonts-193d
As Google Fonts now supports variable fonts, Jhey shows a solution how to create neat font animations with them.
Skeleton Screen CSS
by Dmitriy Kuznetsovhttps://github.com/nullilac/skeleton-screen-css
When loading data on demand, it is sometimes advisable to show placeholders, where the data will be filled in. Dimitriy has founded a CSS framework for these skeletons.
More Control Over CSS Borders With background-image
by Chris Coyierhttps://css-tricks.com/more-control-over-css-borders-with-background-image
Borders are used to seperate things in a layout, but the build-in possibilities of CSS are restricted. Chris found a way by pimping borders up, using background images.
A CSS-only, animated, wrapping underline
by Nicky Meulemanhttps://nickymeuleman.netlify.app/blog/css-animated-wrapping-underline
As Chris did for the borders, Nick’s doing on underlined links. An end to boring rigid unterlines, let’s animate them.
Nailing the Perfect Contrast Between Light Text and a Background Image
by Yaphi Berhanuhttps://css-tricks.com/nailing-the-perfect-contrast-between-light-text-and-a-background-image
Showing text on background images can be challenging due to contrast and readability. Yaphi has developed a solution to find always the right transparent overlay to show the most of the picture, but keep the text readable. Stunning…
Contrast.js
by Misha Petrovhttps://github.com/MishaPetrov/Contrast.js
Misha addresses the same problem as Yaphi, showing text on background images, but goes a different way with his library, which is trying to find the best constrasting text color, even if the page is responsive.
You can interact with this article (applause, criticism, whatever) by mention it in one of your posts, which will be shown here as a Webmention ... or you leave a good old comment with your GitHub account.
In case your blog software can't send Webmentions, you can use this form:
Webmentions
No Webmentions yet...
There are many Mastodon instances out there.
Tell me yours and I will redirect you to the share dialog of your server:
Comments