DEV Community: The-architect

# A Learner’s Exploration of pseudo elements 2 - Applications: Custom counters with ::before and ::after

The-architect — Mon, 31 Jan 2022 06:20:34 +0000

Finished result of card with custom counter using pseudo elements

A couple of months ago, I had worked up a pretty decent headache trying to create custom counters for some sections on my page. Recently, on exploring pseudo elements, I discovered a very easy way to achieve custom numbering using the ::before and ::after pseudo element and its been very breezy ever since.

Diving in to how I created the sample above.

The real star in helping us achieve this with pseudo elements is the content property. In my last exploration on this subject, I mentioned that the content property is the ray of sunshine that really helps pseudo elements shine. This particular functionality I’m covering has a heavy dependency on the content property.

Setting up: I have a div container with four H4 elements listing some of the things we can do with ::before and ::after elements. This is not a list but we want to add counters to make it one.

HTML set up

Next we jump into CSS to make the magic happen in a simple couple of steps:

Note that I have skipped the styling of the main div (.tip-card-body) to only focus on the custom list section.

Step 1

First we declare the counter-reset property on the container element and set its value to any custom name of our choice, eg cool-counter.

Being a learner, I only just recently found out about this property and its application in achieving our custom list. It is used to initialize a CSS counter to a given value. It can be used for implicit counters as in ordered lists(ol) and unordered lists (ul), as well as for explicit counters as in author-specified counters (Custom counters like this one we’re making).

As normal counters have a default value of 0, Passing a custom name as the counter-reset value basically tells CSS to set any counter with that name identifier to zero and then count from there. Learn more about the functionality and possibilities of the counter-reset property here

Resetting the count on containing element

Step 2

Next select the pseudo-element of the child elements to be numbered or counted, declare a 'content-increment' property on them and set the value to the name you passed to the counter-reset. Since these elements are contained within our custom defined counter which we specified with the counter-reset, the counter-increment property on them will define how the counter’s value is increased or decreased based on their position within the counter. Also, considering we have a left hand counter, the ::before pseudo-element is ideal for this case.

Setting the counter increment value of the elements to be counted

Since I want to count the H4 headers in this case, I’ve given all the H4 elements a common class of count and targeted the ::before pseudo element of that class. This applies the counter-reset value specified in step 1 to all the spotlighted elements but at the stage, no visible change would’ve happened yet. Fret not. we’ve just got to turn the lights on. That leads us to step 3

Card after adding the counter-reset and counter-increment properties

Step 3

Recall from the last article when I said the content property is the breath of life that brings our pseudo elements to life? this is a classic case in point.

In this step, we declare the content property on the .count::before element, and set its value to a counter function passing the name we specified to the counter-reset property in step one as its parameter. Boom! the magic happens

Now, note that its not necessary to declare these properties in the particular order I have followed for this to work. I’ve only done so to highlight the role of the content property in CSS pseudo shadow magic (Forgive my corny reference but It sounded so cool in my head 😅).

What you should have now:

Numbering becomes visible after the content property is declared

We have our counters visible now but it’s not looking quite awesome is it? Well then, on to step 4.

Step 4

Go crazy!

You can apply other styles to the ::before element to have it looking the exact way you want. For the sample card we’ve been using, these are the rest of the styles I’ve used:

Other visual styles in creating the final result

If you’re following my example, you might have to tweak the positioning values as necessary because other style factors like the size of your card, margins and paddings, font-sizes and family you use might make your overall card bigger or smaller than mine.

To see the exact styles I’ve used, checkout the build on codepen

Thanks for reading!

A Learner’s Exploration of Pseudo Elements (Intro)

The-architect — Mon, 24 Jan 2022 22:48:47 +0000

::before and ::after pseudo elements

I think of the ::before and ::after pseudo elements as the shadows of HTML elements. But unlike human shadows, they get to have a life of their own.

Pseudo elements being so independent while being still totally dependent on their host elements is very interesting. Like the name suggests, these are not actual elements but their application and ability are still very extensive regardless.

This is a curious exploration about what they can do, why they are used and perhaps most of all, how to know when to use them.

The ::before and ::after elements are used to insert some content before and after the content of an element. Note that this insertion does not happen before/after the element but before/after the content it contains

A paragraph element showing its ::before and ::after pseudo-elements

These two elements can be used

To add anonymous content** to elements,
For decorative design without adding extra markup to the document,
To custom style some default HTML elements like certain input fields, and
To create custom shapes

This means that these shadow elements can be used almost anywhere save for a couple exceptions like with replaced elements.

If ::before and ::after are living shadows, their ‘content’ property is the breath of life that gives them essence. Without setting the content property to a value, none of the styles applied to the pseudo elements will be rendered on screen.

Setting up your Pseudo elements for success

Once the content property has been set, your pseudo elements can be styled to do many things pretty much like any other HTML element. Although the content property is just fine being set to an empty string, there are some other values that can be passed to the property to achieve interesting results. I will explore some of those cases in subsequent articles in this series.

Most of the time, setting the position property of the elements to absolute and making the main element a relatively positioned container will be absolutely necessary. This makes it easier to control exactly how our pseudo elements are positioned.

Once this is set, we can use the inset positioning properties (top, bottom, left and right) to explicitly define the exact position of our pseudo elements.

Further articles in my Learner’s exploration series will cover some of the various interesting things we can do with ::before and ::after pseudo elements and the amazing ways we can begin to apply them in making our little corner of the web just a little bit more awesome!

** I understand anonymous content as content that is visually rendered in the browser but does not have a corresponding markup element.

A Learner's Exploration of CSS Grid (01)

The-architect — Mon, 17 Jan 2022 12:29:51 +0000

Work with CSS grids a couple of times and you’ll get the impression that it is a relatively easy concept to grasp - at least for simple to moderately complex layouts. And for the most part, it kind of is.

An understanding of the basic structural rules makes it easy to jump right into defining interesting layouts and arrangements. But even after using grids for a couple of layouts, I still have that tangible nagging that there is still so much to grids below the hood. So here’s going to be a series of explorations to find out.

While this is an article about grid, it is not intended to serve as an exhaustive coverage of the concept, or even as a tutorial for that matter. It is simply a documentation of observations I’ve made in the little while since I started working with CSS grids. That said, lets get into it.

An advice from the noble CSS master Kevin Powell, which has and still proves to be useful so far, is to always start with a simple set up. On a grid container, all you will usually ad necessarily need is:

declare the display as a grid
Define the column specifics - Number of tracks, sizes of tracks and flexibility
Define the gutter spacing (If your layout requires that).

This example snippet initializes a simple grid with two columns that responsively sizes and redistributes to fill the available space within the container. The fr unit was probably the last unit I got comfortable with for no real reason other than fear of the unknown. But I’ve now found it to be the most comfortable unit to default to, especially when the grid to be created has no particular explicit constraints.

The fr unit basically directs CSS to take the available free (unassigned) space in the container and proportionately divide it across the number of declared tracks. In my example, the available space within the container is divided into two equal tracks. The equality here is only because all the values preceding the fr units are equal; to 1.

The proportion of an fr sized cell track is weighted by the number value preceding the fr unit. It’s observed size variation is relative to the available space, and the value of any other fr sized cell track in the container’s grid declaration. Basically, unless there is another fr sized cell track in the grid cell track declaration, as well as a difference between the fr values prefix, no proportional variation in size is observed.

Just one cell track sized with the fr unit used along side other tracks sized with relative or absolute units will not display the proportional flexibility you might expect it to.

This:

will be visually identical to this:

and this:

is the same as this:

To understand why it is mostly possible to have a fun grid rodeo without ever declaring the template rows, we have to appreciate the functionality of grids to have implicit and explicit cell tracks. In simple talk, there are grid cells you create and control (Explicit cells) and then there are cells the grid module automatically creates for you on the fly. Those automatically created cells are implicit grid cells.

Unless an explicit rule is declared to modify it’s behavior, CSS grid by default is designed to automatically create new cells to layout content that does not fit into the explicitly created grid, or content that may not yet have been added to the container at the moment of declaration.

Using our simple grid example, our container only has two column tracks. When those tracks are declared, all the child elements contained within our container will be automatically arranged to fill those created cells. the default arrangement order follows the normal document flow from the html.

So say we have 6 div children within our grid container, each of them automatically get placed on the grid we’ve created. Now since we’ve only defined our template columns, CSS grid intuitively creates a row with a default size of auto and because we have only two columns defined, the first two children get placed into the cells . Just as the first row was automatically or implicitly generated, a second row is generated to accommodate the next two children, then a third row for the next two and now all six child divs have cells over their heads.

This behavior to wrap the outstanding children into auto generated rows is simply because grids default design is to wrap elements to rows.

if our original grid structure only declared the template rows instead of columns as we have done, the outstanding children will still get wrapped onto new rows.

Depending on your layout objectives, This default wrap behavior can be modified by using the grid-auto-flow property and setting it to column.

The code above will define a grid where the child elements are arranged from top to bottom first before they’re wrapped to the next column. Numbering our child divs demonstrates this.

Now say we change the default wrap direction of a grid declared with only template columns, the implicit layout created with look like this:

Because implicitly created cells are sized to auto by default, the auto columns are all sized to accommodate the default div size. The lorem ipsum content inside the child divs wrap on to newlines simply because my available viewport didn’t let them stretch. Naturally, the Grid module first assigns the available container space to the tracks with units other than fr, then divvies what is left to the fr-sized tracks - even though they were the explicitly declared tracks.

That snip also helps us on to another observation to reinforce a point we made earlier: since our grid structure declaration only defined the template columns, even the single row in which our child elements are placed was implicitly created by CSS grid. This mean its default height value is also auto.

That is why it stretches to accommodate the content of the divs on the 1fr columns which have been squished into multiple lines. Say we decide to define an explicit row with our own height value, if that height is less than enough to contain the squished content, we will end up with a situation where the children overflow the grid on the column axis.

For example, this:

will result in this:

This begins to clarify why it is advisable to only define the column tracks on the grid, and let CSS implicitly make our lives easier with its default grid-template-rows and grid-auto-flow property values. Unless otherwise demanded, this Just a way to easy grid living.

This article has only covered limited case scenarios involving grid container properties with basically none or only very cursory touches on grid child properties. Subsequent articles will explore child properties and behaviors as well as other container scenarios.

A Learner's Exploration of CSS Translate

The-architect — Mon, 17 Jan 2022 11:57:18 +0000

case study: Agba Akin’s CSS clock.

Link to reference:

A Beautiful wall clock made with only Neumorphism CSS - Akinola Abdulakeem

I came across this project on Twitter and had made a note to replicate it but when I came around to it, I realized just reading the code and replicating it won’t satisfy me. I wanted to understand the engine beneath the hood - and that led to this article.

In this article and the others that will follow, I will try to understand the thought and build of this nice project by shedding particular focus on the CSS concepts it applies to achieve its make and functionality. The goal is not just to be able to build one clock, but to understand the concepts and their applications so as to be able to build several other clocks, as well as other interesting things.

Being a learner, the animation was mighty cool but The first challenge that really got my attention was the arrangement of the numbers - especially after seeing the HTML. So here’s to understanding the translate() function of the CSS transform property.

The translate() function can be passed as a value to the CSS transform property. The function repositions an element in the horizontal and vertical direction.

MDN docs describes it as being defined by a two dimensional vector. This simply means it is defined along two directions. It uses the graph X and Y axis to compute the movement direction of the element it is applied on.

The two values the function takes as parameters act as coordinates to determine how the element will move and be located on the horizontal (x) and vertical (y) axis.

For example, The div with class “inside” will be translated 20px on the horizontal axis and 10px on the vertical axis. Without any prior positioning, the default origins as you may have assumed is 0,0 but unlike in our graphs from math class, here, we start from the top right corner of the container.

Before any transformation is applied on the element

And after the code snippet above is applied

While the code snippet above uses two parameters, the translate() function can also take only a single value. The value parameters have to be a length or percentage value.

When a single value is passed to the translate() function, it uses it to compute only the movement on the horizontal axis while the vertical (Y) axis is defaulted to 0.

transform: translate(50px) and

transform: translate(50px, 0px) will yield the same result:

When the translate function is passed a percentage value, the percentage will relate to the width of the element being transformed. Say we pass a value of 50% to our translate function, the positioned element will be translated a distance equal to 50% of its own width.

To demonstrate this;

this code snippet will result in this:

If we add another Div of the exact same size but without any transformation applied to it as a reference, and set the translate parameter of our first div to 100%, we see our translated div moves by exactly the width of the second div

So whenever a percentage parameter value is passed to the translate() function on an element, the distance it computes is the percentage of its own total width.

When double parameter values are passed to the translate() function, they define the horizontal and vertical vector in that particular order - The first value translates the element on the horizontal (x) axis, while the second value moves the element on the vertical (Y) axis.

The values passed can both be length values, percentage values or a mixture of length and percentage values. When both values are percentage values, the first value relates to the width of the referenced element, while the second value refers to the height of the referenced element.

The code snippet will move the div by a distance equal to 50% its own width on the horizontal axis, and a distance equal to 30% its own height on the vertical axis.

The width and height of our sample div is 15em (240px) and so its translated by 50% * 15em on the X-axis, and 30% * 15em on the Y-axis.

Note that the translate() function positions elements without altering their position in the normal document flow.

Now to the actual arrangement of the numbers.

Knowing how the translate function works, all that’s left is determining the values to define our position coordinates. The case study example first brings all the numbers to the center of the clock and then uses translate() to position them around the invisible round edge. The declarations of the code block that brings the numbers to the center is shown below:

The (...) represents all the other code contained within this block. for the purpose of clarity and simplicity, I’m only sticking to what’s necessary four our current focus.

If the elements are not exactly centered by the code snippet above, make sure to check that the elements margins are reset to zero. The offset defined by default margins from the element styles can throw the elements off.

Next is positioning the numbers around the center point to appear like they radiate from the point. The translate() function comes in here but to get the parameter values that will serve as coordinates, we have to do a little geometry first.

The numbers are arranged around a circular path and their positions are points that can be mapped relative to the origin of the circle, its radius, and angle of each segment as represented below.

These points are used to determine the vertical and horizontal distances each number needs to be translated to.

As is probably obvious from the above figure, the height and widths of the colored rectangles results in the X and Y values for each number’s position. 12 and 3 have 100% movement on the Y-axis and 0 movement on the X-axis and 100% movement on the X-axis and 0 movement on the Y-axis respectively.

the transform declaration becomes:

where

n = the occurring order of the child element within its container,

x = distance translated on the x-axis

y = distance translated on the y-axis

The ‘:nth-child(n) syntax’ is a pseudo selector that points to the number n child of a parent element

I used a circle of 345px in diameter and the coordinate values are as follows:

All that is needed now is to substitute these values with the translate() parameters accordingly. Note that I’ve only done one quadrant of the circle. This is because these values will be same for all the other quadrants although there is a catch - that draws attention to the next point to note.

You may have noticed the counter intuitive use of the negative symbol, especially if you are the math-y type. This is because by default, the movement of the translate() function is top-bottom on the Y-axis and left-right on the X-axis. Since the movement of the numbers starts from the center of the circle, the default movement of the positive- y will be down and the positive- x will move left. This default movement is easily modified by using negative values where necessary just as has been done for the Y value of 12.

Positioning of the other numbers in the other quadrants is simply achieved by switching the negative values appropriately between x and y. For example, to position the number 6, my transform declaration will look like this:

NB: The y-value may differ depending on the radius of the circle you use.

Further Explorations will try to understand some of the other CSS concepts that give the clock its functionality.