Came across a short and clear article about loading CSS asynchronously to speed up page rendering.
css
Animated Poems
Some History
Back in the days when it seemed as if one in five websites was built entirely in Flash, I would use Flash to animate poems I wrote. Inge Raadschelders and I did this together and we called ourselves Blindschelders & Raadsman. When Flash died we gradually stopped making them because there wasn’t an immediately obvious successor to Flash.
CSS triangles
What: Making triangles using CSS
How: The basic idea is a box with width and height set to zero.
You set the four borders, three of which you make transparent.
Border-width then decides the size of the triangle and giving the different sides different border-widths changes the shape of the triangle.
@supports makes me happy
Alright, obviously I won’t be changing all the photos on my website whenever I change my color scheme, so giving the photos a little color in CSS would be so much nicer. And in the night I thought: just use ::before and ::after with blend modes, then you won’t need to add any HTML (so no child theme needed) and you can make the photos look however you want with CSS.
Images and ::before & ::after
I learned today that the pseudo-elements ::before and ::after don’t work with the img-element. As I went looking I found out that the CSS spec is very unclear on this. It has to do with the fact that <img> doesn’t have its actual content on the page/in the HTML, it pulls it in from elsewhere. This makes it a replaced element. Form elements are also replaced elements. It is also an empty element, like <br> and <hr>.
Rule of thumb (for now) seems to be that empty elements can’t have ::before and ::after applied with the exception of <hr>.
Other empty elements with which ::before and ::after wont work (may) include form elements and <br>.
Photo by Jack Krasky on Unsplash
Duotone
I wanted a duotone effect on the photos on this site and at first I thought I would like to create it through CSS but what I found seemed to require adding extra HTML, which isn’t something I want to spend my time on for this site (I’m using GeneratePress and I’m not in the mood for a child theme at the moment), and as I was searching for different ways to create the effect, I came upon this little tutorial for Photoshop.
Title: Digging into Duotone: How to Create & Use Colorized Images in Web Design