Yesterday I explored a potential solution to replace text with CSS. One of the drawbacks is that it only works if the text to be replaced is at the end of the line. I set out to remove this limitation, and the fix is relatively obvious: use another pair of classes, with the first class to be used with the ::after pseudoelement.

HTML content:

<h2 class="text-replace">
    <span class="before-text-data">Some </span>
    <span class="text-data">data</span> and more</span>
</h2>

CSS content:

.text-replace span.text-data {
    display: none;
}

.text-replace span.before-text-data::after {
    content: "d|2a|1t|3a|2";
}

#CSS #tricks

Since I discovered the Datalegreya font, I've started doing experiments to include it on a webpage. The main issue I have been thinking about is: if for any reason the font cannot be loaded (network issues, webfonts blocked, and so on, leading to a FOUT), is there a way to show the original, unstyled text instead of an unreadable version with ligatures? Can I show data instead of d|2a|1t|3a|2?

Although a Javascript solution wouldn't be difficult to write, I wanted a CSS-only solution – if at all possible. I've settled on something similar to this, where in a nutshell I enclose in a <span> element the original text I want to replace, then I use a pseudoelement to replace the <span> with the styled text.

With this solution, the HTML looks like this:

<h2 class="data-replace">Some <span>data</span></h2>

The CSS instead looks like this:

.data-replace span {
    display: none;
}

.data-replace::after {
    content: "d|2a|1t|3a|2";
}

There are two minor drawbacks to this:

• It only works if the text to be replaced is at the end of the line.
• The replaced text cannot be selected.

This approach does not prevent a FOUT, because the replacement will still happen as soon as the CSS is loaded. It is still useful anyway for “text mode” (for example with screen readers, or via the browser option) as it will show the original HTML content.

#CSS #tricks

Today I discovered that it's possible to use cubic Bézier curves to specify the speed curve of an animation. I was not entirely satisfied with the result I was getting with the various ease functions and I was looking for something more flexible; that's when I discovered cubic-bezier.

This is an example of how to use this type of curve with animation:

animation-timing-function: cubic-bezier(0.9, 0, 0.1, 1);

Although I am not new to Bézier curves, I found the tool on https://cubic-bezier.com to be pretty useful as it's very intuitive and CSS-specific. It has a nice “Preview & compare” feature to compare the configured curve with any of the other available animation functions.

I am more and more impressed with the amount of features that modern CSS has to offer.

#TIL #CSS #animation

In the previous post I've mentioned Simple.css. I have successfully used it to quickly style two Web projects (which I'll show at some point) built on basic HTML. I've donated to the project because I found it perfectly suited for what I needed:

• Very lightweight drop-in
• Good defaults
• Easily customizable
• Dark theme included
• Use of HTML semantic elements
• No Javascript

After some time, though, I felt that I needed a bit more power and flexibility, and I took a look at Bulma. I can't say I have spent a lot of time with it, but I found it easy to use and aesthetically pleasing although it requires classes again. I'm planning to look at Bulma again and more extensively in the short term.

In the meantime, thinking about what I'm missing the most with a minimalistic framework such as Simple.css, I've found Pico.css. This framework is again mostly based on semantic elements, with just a handful of classes to deal with layout (at least with the usual container and grid). Since it seems to cover just what I miss from Simple.css without leaving the “comfort” of pure HTML, I really want to try it out.

#CSS #frameworks

As I have recently been revamping my knowledge of CSS, I have once again rediscovered the HTML semantic elements. Besides the common <header>, <footer>, <main>, and <nav>, I had basically forgotten about <section>, <article>, <aside>, and a few more.

Since for my (few) early Web design tasks I've mostly used frameworks like Bootstrap, I've become accustomed to using plenty of <div>s for styling. The nice thing about semantic elements is that they immediately make it clear what the function of a specific block of HTML is. A Web page that makes use of semantic elements can readily be styled with a basic CSS framework such as Simple.css, which I have successfully used for a couple more recent projects.

I've explored some combinations of sections and articles, and also <blockquote>s and <code>s. And I love how the omnipresent “accordion” is now an HMTL element as well: <details>.

Content cards without classes

A cool trick I have learned from the MVP.css mini-framework: how to create content cards using semantic elements only. The key is to use a number of <aside> elements within a <section>, for example like this:

<section>
    <aside>
      <h3>Card 1</h3>
      <p>Content 1</p>
    </aside>
    <aside>
      <h3>Card 2</h3>
      <p>Content 2</p>
    </aside>
    <aside>
      <h3>Card 3</h3>
      <p>Content 3</p>
    </aside>
  </section>

It may not work with every CSS framework, but it certainly does with Simple.css.

#CSS #HTML

I am a big fan of animations. I became interested in Web animation when Flash was a thing, then continued with 3D animation, and recently I got interested in CSS animation too. I think I already know most of the animation concepts (for example what keyframes are, and how to combine them), so I am eager to try some with CSS.

As for color gradients, it is easy to overdo animation and get a kitsch result. What I am after, anyway, is not an entire application or game entirely made in CSS, nor a website where a lot of things are going on at the same time, as I personally dislike those. I don't have a specific idea yet, but I am keen to learn what is possible, especially after seeing how easy it is to get a nice scroll behavior with just a CSS property.

At the moment, I am going through the explanations and examples on the Mozilla developer docs and the W3Schools reference docs. There is a nice collection of ready-to-use CSS animations on Animate.css, but for some reason I have been attracted by the “Growing/Shrinking Bars” idea on a Hubspot blog post I've come across (with code on CodePen).

Hopefully a nice example will come up soon.

#CSS #animation

A quick thing I have learned today, which I thought was more difficult and it would take more time to get right than it actually does.

Do you know that effect when you click on a link to a section in a page (say from the nav) and the page smoothly scrolls until said section? Well, it is just a CSS property called... scroll-behavior with value... smooth. Duh.

Example:

html {
  scroll-behavior: smooth;
}

There are many other scroll-related properties related to snap points and margins, but this one alone goes a long way already.

#TIL #CSS #design

I love colors. Whenever I have a chance to use colors, I do. At the risk of it looking kitsch, I like quite much color gradients because of the many colors they include.

Although nowadays the preference goes towards minimalism and color “exhuberance” is mostly frowned upon, it seems there has been a resurgence of gradients in Web pages. There are nice tools that help both with the choice of colors and with translating that into CSS properties, for example:

background-image: linear-gradient(to right top, #051937, #004d7a, #008793, #00bf72, #a8eb12);

When it comes to Web design, though, choosing the right colors is not just a matter of taste but also of usability. Is using many colors too distracting? Does it make it difficult to read the text? Is it annoying?

A tool I find useful for this is the Contrast Checker, which returns a score on the contrast between a background color and a foreground color. With a gradient, this check is more complex because of the “changing” nature of the background.

I am still on a quest to figure out the best way to make gradient, font, and text color to work beautifully together.

#tech #CSS #design

I am not new to the font-feature-settings CSS property. In fact, while looking at the Raleway font some time ago, I wanted to change the appearance of the letter w, so I had to figure out both how to make use of font features and why the feature I wanted seemed not to be working.

Find the features

First of all, not all fonts have features. In the case of Raleway, I was sure because they are listed on the font page. Apparently they have the wrong stylistic set number (this was my issue), but they are there.

If the features are not known, you can use a tool to drag-and-drop the font file, than see and try all the font features (if there are any). I used FontDrop, then I learned about two more from the Mozilla developer docs:

• https://wakamaifondue.com/
• https://www.axis-praxis.org/

Use the features

Once you know what features are available for your font, you can include them in your CSS file.

I did use the font-feature-setting for Raleway, with a configuration like this:

@font-face {
    font-display: swap;
    font-family: "Raleway";
    font-style: normal;
    font-weight: normal;
    src: url("/path/to/Raleway-Regular.woff2");
}

body {
    font-family: "Raleway", sans-serif;
    font-style: normal;
    font-weight: normal;
    font-feature-settings: "lnum", "salt", "ss09", "liga" 0;
}

Here, the font-feature-settings enables the “lining figures”, “stylistic alternates”, and the “stylistic set 9” features; it also disables ligatures.

CSS offers more specialized properties like font-variant and its related longhand properties but, according to the Mozilla docs, font-feature-settings is the only one that is fully implemented across browsers. I will stick to it for the time being.

#tech #CSS