Tree views in CSS
https://iamkate.com/code/tree-views/, posted Nov '22 by peter in css development howto html webdesign
Gradient Magic - Fantastic and Unique CSS Gradients
https://www.gradientmagic.com/, posted 2020 by peter in css design graphics html webdesign
Gradient Magic is the largest gallery of CSS Gradients on the web, with new and exciting gradients added every day.
CSS Gradients are fancy patterns created via CSS, primarily used to add color or patterns to a website. They have many benefits over images, including being easier to work with and much smaller in size.
https://wiredjs.com, posted 2020 by peter in css development free opensource webdesign
A set of common UI elements with a hand-drawn, sketchy look. These can be used for wireframes, mockups, or just the fun hand-drawn look.
Self-Hosting Google Web Fonts | Mario Ranftl
https://google-webfonts-helper.herokuapp.com/fonts, posted 2020 by peter in css google online typography webdesign
From author's notes:
Let’s get this straight: The effort to host Google web fonts on your own server is immense! First of all you need to download all
.svgfiles, then copy them onto your server and finally paste a CSS snippet.
Sounds easy? Well it could be, if Google would actually provide any direct links to download these files and a customized CSS for self-hosting them. To fix this problem without using font generation services like Font Squirrel, I decided to publish a little service called google-webfonts-helper.
Creating Your Own CSS Grid System | Jan Drewniak
j4n.co/blog/Creating-your-own-css-grid-system, posted 2018 by peter in css html reference webdesign
CSS Grids have been around a long time. Often they come bundled in frameworks such as Bootstrap. I'm not a Bootstrap hater, but sometimes using a framework is overkill if all you really need is a grid. Here's how to make your own CSS Grids from scratch.
How to Center in CSS
howtocenterincss.com/, posted 2017 by peter in css howto html reference webdesign
Centering in CSS is a pain in the ass. There seems to be a gazillion ways to do it, depending on a variety of factors. This consolidates them and gives you the code you need for each situation.
Perfect responsive images: HTML5 and Bootstrap 4
inspire.blufra.me/html5-element-and-bootstrap-4-media-queries/, posted 2016 by peter in css howto html reference webdesign
Let’s harness the power of these new media queries to serve an image of the right size based on the device a user views our site on. We’re going to save a lot of bandwidth for the small devices, and serve a beautiful large image for larger ones.
We’ll do that by using the HTML5 picture element and its powerful source tag and media and srcset attributes.
https://github.com/postcss/postcss, posted 2015 by peter in conversion css development free software webdesign
PostCSS is a tool for transforming CSS with JS plugins. The growing ecosystem of PostCSS plugins can add vendor prefixes, support variables and mixins, transpile future CSS syntax, inline images, and more.
PostCSS is used by Google, Twitter, Alibaba, and Shopify. Its most popular plugin, Autoprefixer, is one of the most universally praised CSS processors available.
PostCSS can do the same work as preprocessors like Sass, Less, and Stylus. But PostCSS is modular, 4-40x faster, and much more powerful.
Responsive Images in Practice Â· An A List Apart Article
alistapart.com/article/responsive-images-in-practice, posted 2014 by peter in css graphics howto html webdesign
For years, we’ve known what’s been weighing down our responsive pages: images. Huge ones, specially catered to huge screens, which we’ve been sending to everyone. We’ve known how to fix this problem for a while too: let us send different sources to different clients. New markup allows us to do exactly that. srcset lets us offer multiple versions of an image to browsers, which, with a little help from sizes, pick the most appropriate source to load out of the bunch. picture and source let us step in and exert a bit more control, ensuring that certain sources will be picked based on either media queries or file type support.
Can Email Be Responsive? Â· An A List Apart Article
alistapart.com/article/can-email-be-responsive, posted 2014 by peter in css email howto html toread
Love it or hate it, there’s no denying the popularity of HTML emails. And, like the web before it, the inbox has officially gone mobile—with over 50 percent of email opens occurring on mobile devices.
Building on the principles of responsive web design first codified by Ethan Marcotte, a revolution in email design is giving birth to an experience fast approaching that of the modern web. Subscribers need no longer be subjected to terrible reading experiences, frustrating touch targets, and tiny text.