Came across a short and clear article about loading CSS asynchronously to speed up page rendering.
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.
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.
What: Refine edges > Apply > Done!
Where: in Affinity Photo
A client wanted his name as his logo in a handwritten style. He was thinking of a handwritten font; I asked him to actually write his name for me because if you want personal, it’s often good to be personal. He wrote his name for me on paper, took a photo of it and emailed it to me.
I did all the obvious things: increase contrast, select the light background with the Flood Select Tool, Invert Pixel Selection, copy and paste it to a new layer. So far, so good. It looked smooth.
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.
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>.
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
Short article with links and brief descriptions of places where you can learn how to code.
Title: 7 ways to start learning how to code right now for free
Of note: Free. Old article so not very up to date. Not all of them are actual online places to learn to code
At the end of this article there was suddenly a mention of a free online crash course for anyone curious about frontend development.
Title: Frontend Development Crash Course
Where: @ Skill Pathway
Of note: Free
Also, I like a video here and there but prefer a text, code examples and the occasional well-placed GIF.