DEV Community: crayoncode

Cycling Challenge Dashboard with HTML & CSS

crayoncode — Sat, 07 Jan 2023 15:24:12 +0000

In this video you'll see how to build a cycling challenge dashboard in HTML & CSS. In detail you'll see how to
✔️ implement a heat map
✔️ implement CSS-only tooltips
✔️ use the clip-path property
✔️ use CSS grid layout

Timestamps

00:00 • Basic Layout, Variables & Styles
04:55 • Challenge Profile
06:45 • Stage Statistics & Key Value List
08:55 • Achievements
11:22 • Sidebar & Heat Maps
15:06 • Tooltips
16:58 • Navbar

Building a vertical calendar with HTML, CSS & JS

crayoncode — Mon, 07 Mar 2022 15:25:38 +0000

Today let's build together a small vertical calendar using CSS grid layout, the tag and a little bit of JavaScript...

This article is an extract of a larger project dashboard I coded. For the impatient ones or those who want to see how the entire dashboard is built (starting from 14:13):

Result

Getting started

The general structure is divided into two layers stacked on top of each other:

Hour grid: The lower layer is the hour grid that visually provides the time scale
Event grid: On top of the hour grid we place an event grid that puts the events in the right place on the time scale.

So, let's start with a little bit of markup:

<section class="my-day">
  <header>
    <!-- some header styling,
         see video for entire code -->
  </header>
  <div class="calendar">
    <!-- calendar will come here -->
  </div>
</section>

Therefore the container .calendar needs to have set position: relative; in order to make the absolute position of both children (hour grid and event grid) work correctly.

.calendar {
  /* we'll need that later */
  --left-margin: var(--sp-base);

  position: relative;
}

.calendar > * {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}

The Hour Grid: Basic Setup

First some basic calculations: We need to define from which hour onwards the calendar is starting and at which hour it is ending:

const startHour = 8;
const endHour = 18;

Since we need these values in the JS and the CSS code, it's a good idea to define them in one place (the JS code in this case) and pass it on to the CSS code. Through <elem>.style.setProperty we're easily able to programmatically change values of CSS custom properties:

const calendar = document
  .querySelector('.calendar');

calendar.style.setProperty(
  '--start-hour', startHour);
calendar.style.setProperty(
  '--end-hour', endHour);

So the number of hours can be calculated by subtracting the start hour from the end hour:

.calendar {
  --hours: calc(var(--end-hour)
    - var(--start-hour));
}

Hour Grid: Construction

we'll use the <template> tag here (see the MDN Docs), in order to be able to dynamically construct the hour grid. So instead of having a fixed number of hours, we'll have the hour grid constructed depending on the actual number of hour's we'll need.

<div class="calendar">
  <div class="calendar__hour-grid">

    <template id="template-hour">
      <div class="calendar__hour">
        <p class="label"></p>
      </div>
    </template>

  </div>
</div>

In this article I'm using plain HTML/JS without UI libraries such as React/Vue/Svelte/... Using the <template> tag is slightly similar to using UI components in these frameworks and their respective loop rendering technique (e.g. v-for in Vue). So transferring this code into a UI library of your choice should not be too much trouble.

Now it's time to actually construct the hour grid:

// Retrieve a reference to the <template> tag
const hourTemplate = document.querySelector(
  '#template-hour');
// Retrieve a reference to the 
// calendar hour grid element
const hourGrid = document.querySelector(
  '.calendar__hour-grid');

So for the required number of hours (from start hour to end hour) we'll clone the hour template content and set its label to the hour it represents:

for (let i = startHour; i < endHour; i++) {
  //clone the template and 
  const hourNode = hourTemplate.content
    .firstElementChild.cloneNode(true);
  // ...append it to the hour grid
  hourGrid.appendChild(hourNode);

  // set the hour label
  hourNode.querySelector('.label')
    .innerText = `${i}`.padStart(2, '0');
}

And to make the hour grid appear as a vertical list, we'll configure the .calendar__hour-grid class to

be a grid layout container
generate one row for each element in grid auto flow mode
give each row the same amount of space (1fr)

.calendar__hour-grid {
  display: grid;
  grid-auto-flow: row;
  grid-auto-rows: 1fr;
}

.calendar__hour > .label {
  font-size: var(--fs-sm-1);
  line-height: 2.5;
}

In order to have a nicely visible grid, each hour element is given a dashed top border. Additionally, the last hour (identified through :last-child) is also given a border at the bottom:

.calendar__hour {
  border-top: 1px dashed var(--bg-secondary);
}

.calendar__hour:last-child {
  border-bottom: 1px dashed var(--bg-secondary);
}

Hour Grid: Highlighting current time

Since it's also quite usual in a calendar to display the current time, we'll put the current hour and minute we want to highlight in two variables:

const currentHour = 12;
const currentMinute = 25;

Hour and minute are fixed in this example, you could of course also retrieve them from a freshly created Date object, providing the current time.

Now, when we generate the hour grid, we simply check, if the hour currently being generated is the current hour. If this is the case we simply add the active class to the hour element and update the --current-minute custom CSS property (which is then used a little later):

for (let i = startHour; i < endHour; i++) {
  // ...

  if (currentHour === i) {
    hourNode.classList.add('active');
    hourNode.style.setProperty(
      '--current-minute', currentMinute
    );
  }
}

The current hour is simply highlighted through text color ...

.calendar__hour.active {
  color: var(--hi-primary);
}

...and the current minute is rendered as a ::before pseudo-element with a dashed line at its bottom border:

.calendar__hour.active {
  position: relative;
}

.calendar__hour.active::before {
  content: "";

  position: absolute;

  left: calc(1.5 * var(--left-margin));
  right: 0;
  height: 1px;

  border-bottom: 2px dashed var(--hi-primary);
}

The position of the current minute is then calculated by dividing the current minute by 60 and then converting it to a percentage by multiplying with 100%:

.calendar__hour.active::before {
  /* ... */
  top: calc(100% * var(--current-minute) / 60);
  /* ... */
}

Event Grid: Basic Setup

Since we're now able to display the hour grid Similar to the hour grid, the event grid contains also a <template> tag which is used for each event being rendered:

<div class="calendar">
  <!-- ... -->
  <!-- Put this _after_ the hour grid,
       otherwise the hour grid will appear
       on top of the events -->
  <div class="calendar__events">
    <template id="template-event">
      <div class="calendar__event">
        <p class="label"></p>
      </div>
    </template>
  </div>
</div>

Unlike the hour grid the event grid itself is not operating in auto flow mode, but is given the number of rows it should render. The calculation of the number of rows is shown in the following section.

.calendar__events {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(var(--rows), 1fr);

  left: calc(2 * var(--left-margin));
}

Let's also directly retrieve the necessary element references as we're going to need them later: One for the event template and one for the event grid.

const eventTemplate = document
  .querySelector('#template-event');
const calendarEvents = document
  .querySelector('.calendar__events');

Event Grid: Determine number of rows

In our JS code we define the resolution of the event grid. 2 defines that each hour is subdivided into two parts, i.e. half hours. This value we also pass on to the --resolution custom CSS property:

const resolution = 2;

calendar.style.setProperty(
  '--resolution', resolution);

The number of rows we have in our event grid is can now be easily calculated by multiplying the --resolution with the number of --hours. So, if we have a resolution of 2 and 10 hours (from 8:00 to 18:00) the event grid needs to have 20 rows:

.calendar {
  /* ... */

  --rows: calc(
    var(--resolution) * var(--hours)
  );
}

Event Grid: Display Events

Now it's time to actually add the events to the event grid. This is the array of events that we'll display:

Note that the second event has a fraction at the start and end time.

const events = [
  {
    start: 8,
    end: 10,
    title: 'Focus Time',
    past: true,
  },
  {
    start: 10.5,
    end: 11.5,
    title: '1:1 with Tamika',
    past: true,
  },
  {
    start: 14,
    end: 15,
    title: 'Technical Weekly',
  },
];

Just like in the hour grid, we clone the event template for each event we want to display and set its label. Additionally, the custom CSS properties for --start and --end for being able to correctly display the event at its start and end time.

events.forEach((event) => {
  const eventNode = eventTemplate.content
    .firstElementChild.cloneNode(true);
  calendarEvents.appendChild(eventNode);

  eventNode.querySelector('.label')
    .innerText = event.title;
  eventNode.style.setProperty(
    '--start', event.start);
  eventNode.style.setProperty(
    '--end', event.end);
});

Event Grid: Calculating Event Position

The cool thing now is, that we can calculate the start and end row with the same formula for each event.

Note that the + 1 is required since grid lines start counting at 1 and clock time starts counting at 0 (00:00)

.calendar__event {
  /* ... */

  --start: 0;
  --end: 0;

  grid-row-start: calc(
    (var(--start) - var(--start-hour))
    * var(--resolution)
    + 1
  );
  grid-row-end: calc(
    (var(--end) - var(--start-hour))
    * var(--resolution)
    + 1
  );
}

Event Grid: Past Events

Finally, let's add some necessary styling to each event:

.calendar__event {
  padding: var(--sp-sm-2);
  border-radius: calc(2 / 3 * var(--bd-radius));

  background: var(--bg-hi);
}

.calendar__event > .label {
  font-weight: var(--fw-sm);
}

And each event that's in the past should be displayed muted, so let's add for each past event the past class...

events.forEach((event) => {
  // ...
  if (event.past) {
    eventNode.classList.add('past');
  }
});

... and add some styling for past events:

.calendar__event.past {
  background: var(--bg-primary);
}

How to build 5 clip-path hover effects

crayoncode — Fri, 19 Feb 2021 15:19:32 +0000

Today let's build 5 awesome hover effects with CSS clip-path!

Read the full article or watch me code this on Youtube:

Result

Basic Setup

Let's first setup a few basic things like:

A custom font via google fonts
A fiew css Variables for easy color customization in :root
Basic font configuration on the html tag
A CSS grid that will put all the links we're going to style in a nicely aligned fashion.

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap');

:root {
  --bg-color: #2b2b2b;
  --fg-color: rgba(255, 255, 255, 0.9);
  --bd-color: rgba(255, 255, 255, 0.2);

    --default-bg: 
    linear-gradient(322deg, #ba4aff, rgba(186, 74, 255, 0) 70%),
    linear-gradient(178deg, #008aff, rgba(0, 138, 255, 0) 70%), 
    linear-gradient(24deg, #00ffc6, rgba(0, 255, 198, 0) 35%),
    linear-gradient(0deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1));
}

html {
  font-size: 34px;
  font-weight: 200;
}

body {
  min-height: 100vh;

  display: grid;
  place-content: center;
  grid-template-columns: repeat(3, max-content);
  gap: 1rem;

  background: var(--bg-color);

  font-family: "Montserrat", sans-serif;
}

Basic Link Styles

Each link is going to have the same basic style, that means: No text decoration, a little border & padding as well as a small flex-box setup that makes the text centered horizontally and vertically.

The position: relative; setting on the link tag itself is important as it makes the position: absolute; on the ::before pseudo-element work.

a {
  position: relative;

  padding: 0.25rem 1rem;

  text-decoration: none;
  color: var(--fg-color);

  border: 1px solid var(--bd-color);

  display: flex;
  justify-content: center;
  align-items: center;
}

The ::before pseudo-element is going to be spanned across the entire link (top, left, bottom & right all set to 0) and is put behind the link's text through setting -1 as its z-index. To make the clip-path effect well visible, the pseudo-element gets a few gradients as background.

a::before {
  content: '';

  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;

  background: var(--default-bg);

  z-index: -1;

  transition: clip-path 400ms ease-out;
}

In order to have all clip path configurations smoothly transition from one state to another, the clip-path property is made transitionable by putting it into the transition CSS property.

Style: Next

<a href="#"
   class="next">next</a>

Now for the first style the clip path gets an arrowy shape on the left and right side.
So in the initial state both edges are positioned completely to the left.

a.next::before {
  clip-path: polygon(
    0% 0%,
    -0.5rem 0%,
    0% 50%,
    -0.5rem 100%,
    0% 100%,
    -0.5rem 50%
  );
}

On hover the right edge of the arrow moves from left to right and upon mouse down the left edge of the arrow also moves from the left to right.

a.next:hover::before {
  clip-path: polygon(
    -0.5rem 0%,
    100% 0%,
    calc(100% + 0.5rem) 50%,
    100% 100%,
    -0.5rem 100%,
    0% 50%
  );
}

Note the number of points in each clip path. In order make transition: clip-path work, the number of points in each polygon must be the same. If the number of points deviates from one state to another the browser will simply jump from one state to another without any smooth transition.

a.next:active::before {
  clip-path: polygon(
    100% 0%,
    100% 0%,
    calc(100% + 0.5rem) 50%,
    100% 100%,
    100% 100%,
    calc(100% + 0.5rem) 50%
  );
}

Style: Dot

<a href="#"
   class="dot">dot</a>

In this simple style, the ::before pseudo element is clipped down to a circle which is at the center of the link. Upon hover it smoothly expands and on mouse down spans the entire link.

The circle function takes the radius as the first argument before the at keyword and after that the position of the circle's center as x and y coordinate.

a.dot::before {
   clip-path: circle(
     0%
     at
     50% 50%
   );
}

a.dot:hover::before {
  clip-path: circle(
    50%
    at
    50% 50%
  );
}

a.dot:active::before {
  clip-path: circle(
    100%
    at
    50% 50%
  );
}

Style: Sunrise

<a href="#"
   class="sunrise">sunrise</a>

Let the sun rise 😎 The initial state is a large circle at the center of the link but shifted down outside the viewport.

a.sunrise::before {
  clip-path: circle(
    40%
    at
    50% 200%
  );
}

In order to produce the effect of a rising sun it is shifted upwards upon hover.

a.sunrise:hover::before {
  clip-path: circle(
    50%
    at
    50% 100%
  );
}

On mouse down the circle is moved to the center of the link and expanded completely.

a.sunrise:active::before {
  clip-path: circle(
    100%
    at
    50% 50%
  );
}

Style: Slant

<a href="#"
   class="slant">slant</a>

This time again both the left and the right edge are positioned to the very left. The lower point of each edge is shifted to the left by 1rem.

a.slant::before {
  clip-path: polygon(
    0% 0%,
    0% 0%,
    -1rem 100%,
    -1rem 100%
  );
}

So upon hover, first the right edge is moved to the right, ...

a.slant:hover::before {
  clip-path: polygon(
    0% 0%,
    calc(100% + 1rem) 0%,
    100% 100%,
    -1rem 100%
  );
}

... and on mouse down the left edge will also move to the right.

a.slant:active::before {
  clip-path: polygon(
    calc(100% + 1rem) 0%,
    calc(100% + 1rem) 0%,
    100% 100%,
    100% 100%
  );
}

Style: Liquid

<a href="#"
   class="liquid">liquid</a>

For the last style let's create a slight impression of a liquid rising/flowing. For that a larger ellipse is created. The ellipse function is similar to the circle except that it takes the horizontal and the vertical radius as the first two arguments before the at keyword.

a.liquid::before {
  clip-path: ellipse(
    100% 50%
    at
    50% 200%
  );
}

On hover the ellipse is moved upwards and changes its vertical radius to produce a soft curve.

a.liquid:hover::before {
  clip-path: ellipse(
    100% 250%
    at
    50% 200%
  );
}

And on mouse down the ellipse is vertically scaled down to zero as well as moved upwards to the upper edge.

a.liquid:active::before {
  clip-path: ellipse(
    100% 0%
    at
    50% 0%
  );
}

Let's build a responsive navbar from scratch

crayoncode — Fri, 12 Feb 2021 15:15:30 +0000

Today let's build a responsive navbar, an animated burger icon and a beautiful uncovering effect from scratch using HTML, CSS, clip-path, flexbox, grid layout and so much more...

Read the full article or watch me code this on Youtube:

Result

Blank HTML5 Document

Let's start with a blank HTML5 Document. This is our starting point which we're going to extend bit by bit throughout the following chapters.

Did you know that typing an exclamation mark (!) and hitting tab in VS CODE generates a blank HTML5 Document?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Navbar</title>
  </head>
  <body>
    <!-- content will go here -->
  </body>
</html>

Using Styles and External Fonts

There are three (more or less) external resources we have to include in the documents <head>:

Our own stylesheet in styles.css.
We'll be using the font Nunito as the page's default font. Therefore it is loaded via Google Fonts. The font weights 200 and 400 will be used.
Font Awesome via cdnjs.com. Watch out for the integrity attribute as it is a nice security feature. If the SHA checksum of the file downloaded by the user agent differs from the SHA checksum given in the integrity attribute, the browser knows that the downloaded content was tampered with and is therefore rejected. See this MDN Article for more about subresource integrity.

<head>
  ....

  <!-- or own styles -->
  <link rel="stylesheet" 
    href="styles.css"
    type="text/css" />

  <!-- "Nunito" font via google fonts -->
  <link rel="preconnect" 
    href="https://fonts.gstatic.com" />
  <link rel="stylesheet"
    href="https://fonts.googleapis.com/css2?family=Nunito:wght@200;400&display=swap" >

  <!-- Font Awesome via CDNJS  -->
  <link rel="stylesheet" 
    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" 
    integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" 
    crossorigin="anonymous" />
  </head>

Variables and Basic Styles

Now, in our styles.css file, let's start with a few basic things. For instance, variables. It's extremely useful for customization to have the colors we'll be using in variables and common, repetitive things like the transition setup also.

Note the nav-height variable as it will allow us to control the navigation bar's height and many other elements' position and size are going to depend on that variable.

:root {
  --fg-color: rgba(255, 255, 255, 0.9);
  --bg-color: #2b2b2b;
  --highlight-primary: #008aff;
  --gradient: 
    linear-gradient(300deg, #ba4aff, rgba(186, 74, 255, 0) 70%), 
    linear-gradient(227deg, #008aff, rgba(0, 138, 255, 0) 70%),
    linear-gradient(104deg, #00ffc6, rgba(0, 255, 198, 0) 74%);

  --nav-height: 3rem;

  --transition: 250ms ease-out;  
  --transition-long: 500ms ease-out; 
}

This block resets padding, margin and box-sizing for each element, so it brings us a great deal of consistency across browsers and elements.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

On the root <html> element we're defining the basic text color as well as the basic font, including the font size. This is quite important, as we're going to use a lot of rem values and they are always relative to the font size being set on the root <html> element.


html {
  font-family: "Nunito", sans-serif;
  font-size: 18px;
  font-weight: 200;
}

The <body> is simply going to be a flex container that centers content horizontally and puts content to the very top. min-height: 100vh ensures that the body always takes at least the full viewport height, which spans the background color across the entire page.


body {
  padding-top: var(--nav-height);
  min-height: 100vh;

  background: var(--bg-color);
  color: var(--fg-color);
}

Header Markup & CSS Setup

Let's start with a simple <header> tag...

<header>
</header>

... which is going to be positioned fixed, i.e. independently of the scrolling position in the document, it is always going to have the position provided through top, left and right.

header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-height);
  font-size: 1.5rem;

  background: var(--bg-color);
  color: var(--fg-color);

  box-shadow: -2px 2px 8px 0px rgb(0 0 0 / 80%);

  border-bottom: 1px solid var(--highlight-primary);

  z-index: 1;
}

For managing the flow of content inside the header, we'll use a CSS grid that automatically generates a new column for each element through grid-auto-flow: column. Setting grid-auto-columns to max-content tells the CSS grid to fit each cell nicely around the content of each element without enforcing line breaks.

header {
  ...

  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
}

The Logo

On the left there's going to be a logo which is simply a feather icon from font awesome:

<header>
  <div class="logo">
    <i class="fas fa-feather-alt"></i>
  </div>
</header>

The feature will be styled such that:

It is placed in the center of the containing div.logo
Has a background accorindg to the variable --highlight-primary
Has its top left and bottom right corner rounded off to make it fit the shape of the feather.

.logo {
  display: grid;
  place-content: center;

  padding: 0rem 1rem;

  color: var(--highlight-primary);
}

.logo > i {
  border-top-left-radius: 50%;
  border-bottom-right-radius: 50%;
  padding: 0.25rem;

  background: var(--highlight-primary);
  color: var(--bg-color);
}

The navigation bar itself

Let's put a few items into our navigation bar. Which means that we're going to use the contextual HTML5 <nav> tag as a container for the navigation bar. Inside it, an unordered list is used and visually tailred to our needs. The basic structure of each navigation item is a link with an icon and a label.

<header>
  ...
  <nav>
    <ul>
      <li>
        <a href="#"><i class="far fa-chart-bar"></i>Dashboard</a>
      </li>
      <li>
        <a href="#"><i class="far fa-edit"></i>Projects</a>
      </li>
      <li>
        <a href="#"><i class="far fa-envelope-open"></i>Posts</a>
      </li>
    </ul>
  </nav>
</header>

In order to align all navigation items next to each other, the unordered list ul is also setup to be a grid container just like we already did on the header tag. There are two slight differences:

The grid-template-rows property is set to 1fr, stating that there is only one row and this row should consume all the space that is available.
There is a gap between each cell of 0.5rem

header ul {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  grid-template-rows: 1fr;
  gap: 0.5rem;

  padding: 0rem 1.5rem;

  list-style-type: none;
}

The li list item is again set up to be a grid container and by default the only child element (<a>) is nicely stretched to the items dimensions.

header ul > li {
  display: grid;

  padding: 0.5rem;
}

Link Styling

Since we want to center the content of each link vertically, it is a flex container with align-items set to center. The rest of the styling is there for

putting some padding and slightly rounded of corners
setting the text and background color
removing the unnecessary underline styling of the link
making the background color transitionable, which is useful for the hover style.

The icon in each link has a slightly decreased font size in order to achieve a good proportion with respect to the actual text's size.

header a {
  display: flex;
  align-items: center;

  padding: 0rem 1.5rem;
  border-radius: 0.25rem;

  color: var(--fg-color);
  background-color: rgba(0, 0, 0, 0.1);

  text-decoration: none;

  transition: background-color var(--transition);
}

header a > i {
  margin-right: 0.5rem;

  color: var(--highlight-primary);

  font-size: 1rem;

  transition: color var(--transition);
}

So for the hover styling the links background color is changed to the highlight color and the icon's color is is also changed to the darker background color:

header a:hover {
  background-color: var(--highlight-primary);
}

header a:hover > i {
  color: var(--bg-color);
}

The burger menu button

The menu items will be put into a separate navigation bar attached to the right corner, once the screen gets too small to contain all navigation items. However, then we're going to need some sort of trigger or button that will make the menu visible or invisible if clicked again. For this reason we're going to use a checkbox as we can react to the state of it through the :checked pseudo-class. And since styling a checkbox can be really messy, we'll be using a <label> that is referencing the checkbox via the for attribute. This allows us to put all the styling that we need on the label and since the for attribute contains the same id as the one given on the checkbox, clicking the label will also toggle the checkbox itself. So we can safely hide the checkbox without losing functionality (Not talking about accessibility at this point - which I want to cover in a seperate post).

<header>
  <div class="logo">...</div>

  <input type="checkbox" class="toggle" id="nav-toggle">
  <label for="nav-toggle" id="nav-toggle-label">
    ...
  </label>

  <nav>...</nav>
</header>

So, as indicated above, the label and the checkbox are hidden by default, since we assume by default that there is enough space for the navigation items.

#nav-toggle-label {
  display: none;

  cursor: pointer;
}

#nav-toggle {
  display: none;
}

By using @media queries we can now determine the state of the viewport which we define as too small to display the navigation items. In our case, if the screen/viewport size is less than 768px wide, certain styles are applied that change the appearance and behaviour of the navigation bar.

@media screen and (max-width: 768px) {
  /* 
    styles which are applied only if the page is
    rendered on a screen (e.g. not printed) and
    the viewport's width is less thant 768px wide
  */
}

The first thing we're going to do is to position the nav element similar to the header in fixed mode, but not attached to the top edge of the viewport, but to the right:

@media screen and (max-width: 768px) {
  header nav {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 24rem;
    right: 0rem;

    padding-top: var(--nav-height);

    background: var(--gradient);
    box-shadow: -2px 2px 8px 0px rgb(0 0 0 / 80%);

    transition: clip-path var(--transition-long), 
      background-color var(--transition-long);

  }
}

Now we also have to change the flow of the grid inside the unordered list ul via grid-auto-flow from column to row. That way the navigation items become arranged vertically.

@media screen and (max-width: 768px) {
header ul {
    grid-auto-flow: row;
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-rows: max-content;
    gap: 0.5rem;

    padding: 0;
  }
}

The rest of the styling slightly changes the alignment of the links to left (place-content) and changes the colors in default and hover state.

@media screen and (max-width: 768px) {

  header a {
    place-content: flex-start;

    padding: 0.5rem 1.5rem;
  }

  header a > i {
    color: var(--bg-color);
  }

  header a:hover {
    background-color: var(--bg-color);
  }

  header a:hover > i {
    color: var(--highlight-primary);
  }
}

Menu button

Finally it's time to style the menu button. First, let's configure the header tag to keep the logo on the left and push the menu button to the right, which is achieved by setting justify-content to space-between:

@media screen and (max-width: 768px) {
  header {
    justify-content: space-between;
    align-items: center;
  }
}

To create a menu button that is able to transition from being a button with a menu icon (three bars stacked on top of each other) to a button with a close icon, we simply put three div.bars inside the label.

<header>
  ...
  <label for="nav-toggle" id="nav-toggle-label">
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
  </label>
  ...
</header>

So, let's setup a few things:

The --size variable controls the size of the menu button and is proportionally to the nav bar's height
The --bar-height variable tells each bar how high it should to be.
The bars are arranged in a stacked way by using flex-box in column direction with space-between such that all bears are distributed evenly through the containing element's height.

@media screen and (max-width: 768px) {
  #nav-toggle-label {
    --size: calc(var(--nav-height) / 3);
    --bar-height: 2px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-basis: auto;

    width: var(--size);
    height: var(--size);
    margin-right: calc(var(--nav-height) / 3);

    z-index: 2;
  }

Each bar itself is simply setup to have the --bg-color variable as background color and to use the --bar-height variable from above. With width: 100%; is is stretched to consume the entire horizontal space being available.

  #nav-toggle-label .bar {
    display: inline-block;

    height: var(--bar-height);
    width: 100%;

    background-color: var(--bg-color);

    transition: transform 250ms ease-out;
  }
}

Now it get's interesting as we're going to define how the three bars are reshaped to a close icon. Each selector is bound to the :checked pseudo-class of the checkbox, so this styles are not applied if the checkbox is not checked.

The topmost bar is rotated by 225 degrees and shifted down to the center of the containing element.
The lowest bar is rotated by 135 degrees (225 degrees minus 90 degrees) and shifted upwards to the center of the containing element.
The middle element is simply made invisible by scaling it to zero on the x-axis.

@media screen and (max-width: 768px) {
  #nav-toggle:checked + #nav-toggle-label > .bar:nth-child(1) {
    transform: 
      translate(0, calc(var(--size) / 2 - var(--bar-height) / 2)) 
      rotate(225deg);
  }

  #nav-toggle:checked + #nav-toggle-label > .bar:nth-child(2) {
    transform: scaleX(0);
  }

  #nav-toggle:checked + #nav-toggle-label > .bar:nth-child(3) {
    transform: 
      translate(0, calc(-1 * var(--size) / 2 + var(--bar-height) / 2)) 
      rotate(135deg);
  }
}

Expanding and collapsing the nav menu

We're almost done! Now we need to cut down the navigation bar to a small circle positioned right behind the menu icon if the checkbox is not checked. That's why we use a clip-path with radius of 1rem (one third of the navbar's height) and a center point in the top right corner of the viewport but shifted slightly left and down to match the navigation bar's height.

@media screen and (max-width: 768px) {
  header nav {
    ...

    clip-path: circle(
        calc(var(--nav-height) / 3)
        at 
        calc(100% - var(--nav-height) / 2) 
        calc(0% + var(--nav-height) / 2)
    );
  }
}

This circle is then expanded to 125% of the larger edge of the viewport (125vmax). The vmax unit is really convenient as it dynamically changes its base measure to either the viewport's width or height - depending on which one of the both is the larger one. So 125% of the larger edge gives us enough space to cover the height of the viewport.

@media screen and (max-width: 768px) {
  #nav-toggle:checked + * + nav {
    clip-path: circle(125vmax at 100% 0%);

    background-color: var(--bg-color);
  }
}

As a final touch, the clip-path property is made transitionable to make expanding and collapsing the menu quite smooth. And that's already it!

@media screen and (max-width: 768px) {
  header nav {
    ...    
    transition: clip-path var(--transition-long), 
      background-color var(--transition-long);

  }
}

Let's build a layout from scratch

crayoncode — Fri, 05 Feb 2021 15:21:18 +0000

Today let's build the layout for an entire website from scratch using HTML, CSS, flexbox, grid layout and so much more...

Read the full article or watch me code this on Youtube:

Result

https://github.com/crayon-code/website-cloud-service

Blank HTML5 Document

Let's start with a blank HTML5 Document. This is our starting point which we're going to extend bit by bit throughout the following chapters.

Did you know that typing an exclamation mark (!) and hitting tab in VS CODE generates a blank HTML5 Document?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BEAMCLOUD</title>
  </head>
  <body>
    <!-- content will go here -->
  </body>
</html>

Using Styles and External Fonts

There are three (more or less) external resources we have to include in the documents <head>:

Our own stylesheet in styles.css.
We'll be using the font Nunito as the page's default font. Therefore it is loaded via Google Fonts. The font weights 200, 400 and 700 will be used. Especially 200 looks quite elegant with larger text (as in headings).
Font Awesome via cdnjs.com. Watch out for the integrity attribute as it is a nice security feature. If the SHA checksum of the file downloaded by the user agent differs from the SHA checksum given in the integrity attribute, the browser knows that the downloaded content was tampered with and is therefore rejected. See this MDN Article for more about subresource integrity.

<head>
  ....

  <!-- or own styles -->
  <link rel="stylesheet" 
    href="styles.css"
    type="text/css" />

  <!-- "Nunito" font via google fonts -->
  <link rel="preconnect" 
    href="https://fonts.gstatic.com" />
  <link rel="stylesheet"
    href="https://fonts.googleapis.com/css2?family=Nunito:wght@200;400;700&display=swap" >

  <!-- Font Awesome via CDNJS  -->
  <link rel="stylesheet" 
    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" 
    integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" 
    crossorigin="anonymous" />
  </head>

Variables and Basic Styles

:root {
  --bg-start: #2c35a2;
  --bg-end: #0f133b;

  --highlight-fg: #161c49;
  --highlight-primary: #73fff5;
  --highlight-secondary: #cf0389;

  --fg-color: rgba(255, 255, 255, 0.9);

  --transition: 250ms ease-out;
}

This block resets padding, margin and box-sizing for each element, so it brings us a great deal of consistency across browsers and elements.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  color: var(--fg-color);

  font-family: "Nunito", sans-serif;
  font-weight: 400;
  font-size: 18px;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;

  padding: 2rem;
  min-height: 100vh;


  background: linear-gradient(
    45deg,
    var(--bg-start), 
    var(--bg-end)
  );
}

Logo

The first actual content element is the logo. It's embedded in a header tag and is simply a div with an img tag referencing an SVG image and a logo text.

<body>
  <header>
    <div class="logo">
      <img src="logo.svg">
      beamcloud
    </div>
  </header>
</body>

Styling on this one is quite simple, as it is also a flex container that puts the image and the logo text next to each other and centers them vertically. Additionally the height of the image is set to match the font size.

.logo {
  display: flex;
  align-items: center;

  text-transform: uppercase;
  font-size: 2rem;
}

.logo > img {
  height: 2rem;
  margin-right: 1rem;
}

Navigation Bar

The navigation bar is the second element inside the header and uses an unordered list ul for the navigation items embedded in a nav providing semantics already on the markup level.

<body>
  <header>
    ...
    <nav>
      <ul>
        <li class="active">
          <a href="#">About Us</a>
        </li>
        <li>
          <a href="#">Reviews</a>
        </li>
        <li>
          <a href="#">Pricing</a>
        </li>
        <li class="highlight">
          <a href="#">Sign In</a>
        </li>
      </ul>
    </nav>
  </header>
</body>

In order to arrange logo and navigation items next to each other, the header element is also set to be a flex-container and pushing both items to the very left/right by using justify-content: space-between.

header {
  display: flex;

  justify-content: space-between;
}

Since (almost?) every browser renders links in a highlighted color and underlined, let's undo that kind of styling by setting the color to the respective variable and unsetting all kinds of text decoration.

a {
  color: var(--fg-color);

  text-decoration: none;
}

Finally, for the navigation items themselves we're using a grid layout being configured for automatically flowing all items each into their own column. By using grid-auto-columns: max-content each cell is wrapped nicely around a navigation item without making the contained text wrap.

nav > ul {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  gap: 0.5rem;

  list-style-type: none;
}

nav > ul a {
  padding: 0.25rem 1.25rem;

  text-transform: uppercase;

  transition: color var(--transition),
    background-color var(--transition);
}

Main Content

For the main content of the page we're also using the main semantic HTML tag. Inside it is a section tag containing a heading and a paragraph and a nice little artwork which we're going to put next to it.

<body>
  ...
  <main>
    <section>
      <div class="content">
        <h1>Scale well, sleep well.</h1>
        <p>
          Get the most out of your apps and websites with our highly available and scalable cloud infrastructure. All you need, directly at your fingertips.
        </p>
        <a href="#" class="button">
          Learn More
        </a>
      </div>
      <div class="artwork">
        <img src="artwork.svg" >
      </div>
    </section>
  </main>
</body>

The section itself is also going to be a grid layout, but this time it is explicitly configured to have exactly two columns, whereas the left column is given one fraction (1fr) of the available space and the right column two fractions (2fr).

main {
  max-width: 50rem;
  padding: 2rem;
}

section {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: 1fr;
  grid-template-areas: "content artwork";
  place-content: center;
}

section > .content {
  grid-area: content;
  place-self: center stretch;
}

section > .artwork {
  grid-area: artwork;
  place-self: stretch;
}

h1 {
  margin-bottom: 1rem;

  color: var(--highlight-primary);

  font-size: 2.5rem;
  font-weight: 200;
}

p {
  margin-bottom: 1rem;

  font-size: 1.25rem;
  font-weight: 200;
}

Footer

At last, we have reached the bottom of the page being a footer. We'll be using it to put a bunch of social media icons which is why we have included font awesome at the very beginning.

<body>
  ...
  <footer>
    <a href="#"><i class="fab fa-twitter"></i></a>
    <a href="#"><i class="fab fa-facebook-f"></i></a>
    <a href="#"><i class="fab fa-instagram"></i></a>
    <a href="#"><i class="fab fa-youtube"></i></a>
    <a href="#"><i class="fab fa-github"></i></a>
    <a href="#"><i class="fab fa-linkedin-in"></i></a>
  </footer>
</body>

The footer is again a grid layout configured to automatically flow each element into its own column with a gap of 1rem between each of them.

footer {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min-content;
  gap: 1rem;
  justify-content: center;

  margin-top: 4rem;
  padding-top: 1rem;
  width: 80%;
}

To spice the header slightly up we're not going to use a "normal" border, but a gradient. Therefore the footer::before pseudo-class allows us to put an element at the top of the footer having a gradient as background. And that's already it!

footer {
  position: relative;
  ...
}

footer::before {
  content: '';

  position: absolute;
  top: 0%;
  left: 0%;
  right: 0%;
  height: 2px;

  background: linear-gradient(
    90deg,
    transparent,
    var(--highlight-secondary),
    transparent
  );
}

3 Ways to create a Navbar (CSS Grid Layout)

crayoncode — Fri, 29 Jan 2021 10:54:55 +0000

Today let's build three different navbar layouts using the CSS grid layout and I'll show you, how easy it is to change the arrangement of the items without actually touching the markup.

Read the full article or watch me code this on Youtube (TL;DW):

Result

Markup

The markup is basically a <header> element with

a logo (the feather)
three navigation items and
a highlighted item for the user menu.

Since we're going to produce three different layout versions, the for loop is there to prevent us from copy-pasting ourselves.

main
  // generates the navbar three times
  // each with different version classes
  // version-1, version-2 & version-3
  - for (let i=0; i<3; i++)
    header(class="version-" + (i+1))
      .logo
        i.fas.fa-feather-alt
      nav
        ul.nav
          li 
            a(href="#") 
              i.far.fa-chart-bar
              | Dashboard
          li 
            a(href="#") 
              i.far.fa-edit
              | Projects
          li 
            a(href="#") 
              i.far.fa-envelope-open
              | Posts
      a.user(href="#") 
        i.far.fa-user
        | Jane Doe

Basics, Background & Variables

Let's first setup a few basic variables that define the background and foreground color, as well as some transition paramters which are used in multiple spots:

:root {  
  --background-color: #2b2b2b;
  --foreground-color: rgba(255, 255, 255, 0.7);
  --transition: 250ms ease-out;
}

Each navbar is also having its own highlight colors, which is why the --color variable is defined within the scope of each version's own CSS class:

header {
  &.version-1 {
    --color: #ba4aff;
  }

  &.version-2 {
    --color: #008aff;
  }

  &.version-3 {
    --color: #22d1d3;
  }
}

Let's also reset padding, margin and box-sizing on each element. Alternatively you can include a pre-made normalization/reset CSS file like normalize.css or sanitize.css.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

As a fancy bonus, here's the code for the background which is just three different gradients stacked on top of each other in different angles:

main {  
  background:
    linear-gradient(322deg, 
      #ba4aff, rgba(#ba4aff, 0) 70%),
    linear-gradient(178deg,
      #008aff, rgba(#008aff, 0) 70%),
    linear-gradient(24deg,
      #00ffc6, rgba(#00ffc6, 0) 35%);
}

Header Grid Configuration (Outer Grid)

We're going to use two nested grid layouts. The outer one on the <header> element is simply there for providing the general layout of the navbar, so in order to tell where the logo, the navbar and the user menu is located:

header {
  display: grid;
  gap: 0.5rem;

  padding: 0.5rem;
  width: 100%;
  min-width: 750px;
  border-radius: 0.5rem;

  background: var(--background-color);
  box-shadow: 2px 2px 8px 0px var(--background-color);

  font-family: "Lato", sans-serif; 
}

The basic principle is to provide for each version of a navbar a different configuration for the columns and areas of the grid layout. A template area is a named section of the grid layout and an element can be assigned to it by providing the name of the area to it. And that's why it works, to change position of elements purely based on the CSS code, because only by switching or changing the values in grid-template-areas the browser adapts the places of the element and the order inside the markup becomes irrelevant:

header {
  // logo (left), nav items (left), user menu (right)
  &.version-1 {    
    grid-template-columns: min-content auto max-content;
    grid-template-areas: "logo nav user";

    > * {
      place-self: start;
    }
  }

  // logo (left), nav items (centered), user menu (right)
  &.version-2 {    
    grid-template-columns: min-content auto max-content;
    grid-template-areas: "logo nav user";

    > * {
      align-self: center;
    }

    .user {
      justify-self: end;
    }

    .nav {
      justify-content: center;
    }
  }

  // user menu, nav items (centered), logo (right)
  &.version-3 {    
    grid-template-columns: max-content min-content auto min-content;
    grid-template-areas: "user nav . logo";

    > * {
      justify-self: end;
      align-self: center;
    }
  }
}

Pay close attention to the values in grid-template-columns.

min-content is used mostly for the logo because it should always consume as less space as possible / needed.
max-content is used mostly for the user menu, since there are two words, min-content word produce a word wrap, because in that case the column with is minimized. max-content behaves that way that it maximizes the space for the content, but uses only as much space, as required.
auto in our case means that it takes the remaining space, which is just what we want for the navigation items.

So in the end, all we need to do is to assign those identifiers mentioned in the grid-template-areas to the parts of the navbar and that's all being needed to setup the basic layout of the navbar.

header {
  .logo {
    grid-area: logo;
  }

  .nav {
    grid-area: nav;
  }

  .user {
    grid-area: user;
  }
}

Navigation Grid Configuration (Inner Grid)

The grid for the navigation items (.nav) is a nested grid layout inside the outer grid that defines the general arrangement (logo, navigation items, user menu) in the <header> element. It uses the CSS grid's auto flow mechanics. This means that no explicit order of columns is defined, but each direct descendant element of the grid container (.nav) is given its own column. We can tell the grid layout how to deal with elements that are not assigned to a certain cell or group of cells in the grid. grid-auto-flow: column tells it to create a new column for each unassigned element. Setting it to row would cause it to create a new row.
grid-auto-columns is there to tell the grid which size auto-generated columns have, which is pretty awesome in our case, since we can simply tell it, to fit the content without wrapping it.

header {
  .nav {
    grid-area: nav;

    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    gap: 0.5rem;
    place-self: center;

    height: 100%;

    list-style: none;

    > li {
      display: inline-block;
    }
  }
}

Link & Icon Styling

Now, let's get into the finer details of the styling. Each link in the header navbar is a flex-box that centers its content vertically and also having a little bit of padding and rounded corners.

The markup makes use of a few font-awesome icons, so each <i> tag is given the highlight color and rendered slightly smaller, such that it doesn't "overpower" the text.

header {
  a {    
    // align content vertically
    display: flex;
    align-items: center; 

    padding: 0.5rem 1rem;
    border-radius: 0.5rem;

    text-decoration: none;
    color: var(--foreground-color);

    > i {
      margin-right: 0.5em;

      color: var(--color);

      font-size: 0.7em;

      transition: all var(--transition);
    }
  }
}

Link Hover Effect

For the hover effect we're going to use a nice clip-path effect. Each link is given an ::after pseudo-element having the highlight color as background color and a clip-path that slightly cuts of the bottom right corner. If the link is not hovered, its positioned to the left (invisible) and on hover it's shifted to the right such that it covers the link's area. The z-index setup makes sure that the hightlight does not cover the text.

header {
  a {
    transition: all var(--transition);

    position: relative;
    overflow: hidden;
    z-index: 1;
    --slantness: 4rem;
    &::after {
      content: '';
      position: absolute;
      z-index: -1;

      width: calc(100% + var(--slantness));
      top: 0%;
      bottom: 0%;
      left: calc((100% + var(--slantness)) * -1);
      clip-path: polygon(
        0% 0%, 100% 0%,
        calc(100% - var(--slantness)) 100%, 0% 100%
      );

      background: var(--color);
      opacity: 0;

      transition: all var(--transition);
    }

    &:hover {
      color: white;

      > i {
        color: var(--background-color);
      }

      &::after {
        opacity: 1;
        left: 0%;
      }
    }
  }

Logo & User Menu

The logo is simply a feather icon from font awesome and is colored on hover. To give it a little bit of a prettier shape, the top left and right bottom corner is strongly rounded off, which fits the shape of the feather and provides a nice effect on hover.

header {
  .logo {
    grid-area: logo;
    place-self: center;

    margin-right: 1rem;
    padding: 0.25rem;
    border-radius: 0.25rem;
    border-top-left-radius: 50%;
    border-bottom-right-radius: 50%;

    color: var(--color);

    font-size: 2rem;

    transition: all var(--transition);

    &:hover {
      background: var(--color);
      color: var(--background-color);
    }
  }
}

To make the user menu stand out a little, is given a slight box shadow to the inside using the highlight color. The same effect could have been achieved using a border, but the advantage of a box shadow is, that it does not affect the box-model and therefore keeps the size of the element consistent with the others.

header {
  .user {
    box-shadow: inset 0px 0px 0px 1px var(--color);
  }
}

Shiny Glass Hover Effect (Glassmorphism)

crayoncode — Sun, 24 Jan 2021 20:40:17 +0000

Today let's work with the backdrop-filter property and a skewed ::before element, to create a nice shiny glass hover effect.

Read the full article or watch me code this on Youtube (TL;DW):

Result

First Things First - Background

Let's start with the background by overlaying three different gradients. Each gradient is running from one color to transparent and by varying the angles they blend nicely into each other.

main {
  background:
    linear-gradient(322deg, 
      #ba4aff, rgba(#ba4aff, 0) 70%),
    linear-gradient(178deg,
      #008aff, rgba(#008aff, 0) 70%),
    linear-gradient(24deg,
      #00ffc6, rgba(#00ffc6, 0) 35%);
}

Markup

The markup consists of a container having a ruler producing the line in the middle and a container hosting the five icon buttons whereas each button contains an icon.

<main>
  <div class="ruler"></div>

  <div class="container">
    <a class="icon" href="#">
      <i class="fas fa-phone"></i>
    </a>
    <a class="icon" href="#">
      <i class="fas fa-images"></i>
    </a>
    <a class="icon" href="#">
      <i class="fas fa-envelope-open"></i>
    </a>
    <a class="icon" href="#">
      <i class="fas fa-comment"></i>
    </a>
    <a class="icon" href="#">
      <i class="fas fa-music"></i>
    </a>
  </div>
</main>

Basics & Ruler

Let's put a few variables, resets and center the whole thing in the viewport:

:root {
  --foreground-color: white;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

main {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

The ruler is going to be put in the lower half of the viewport. By setting the top border to slight white the actual ruler is produced:

.ruler {
  border-top: 1px solid rgba(white, 0.3);
  background-color: rgba(white, 0.05);

  position: absolute;
  top: 50%;
  height: 50%;
  left: 0%;
  right: 0%;
}

Setting up the container

The most important thing about the container is the grid layout configuration, which consist implicitly of one single row - as no row config is given. The columns are configured such that each of them takes the same amount of space (1fr) after the gap of 1.25rem has been taken into account.

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.25rem;
}

Button Setup

Let's first setup some variables allowing easy customization:

The --size variable controls how large each button appears. Since it's set to 6rem by default, it will also respond to the documents font size.
--transition-duration and --transition-easing allow us to synchronously modify both hover transitions which we'll add later.

.container {
  ...
  .icon {
    --size: 6rem;
    --transition-duration: 500ms;
    --transition-easing: ease-out;
  }
}

The icon buttons configuration itself is quite straight forward. It has a quadratic shape whereas the content is centered horizontally as well as vertically. Additionally a slight border, a strongly blurred box shadow and a translucent white for background color are added. Note that the box shadow is calculated relatively to the size of the button. So whenever the button size changed, the box-shadow is scaled along with it.

.container {
  ...
  .icon {
    // quadratic shape
    width: var(--size);
    height: var(--size);

    // center content horizontally
    // and vertically
    display: flex;
    align-items: center;
    justify-content: center;

    // apply text/font styling
    text-decoration: none;
    color: var(--foreground-color);
    font-size: 2rem;

    // Add a slight border and a 
    // strongly blurred box shadow
    border: 1px solid rgba(white, 0.6);
    background-color: rgba(white, 0.1);
    border-radius: 0.5rem;
    box-shadow: 
      0px 
      calc(var(--size) / 6) 
      calc(var(--size) / 3) 
      rgba(black, 0.1);
  }
}

Glassmorphism

Now, if you came for this, this one-liner is all you need for the "classic" glassmorphism effect. This effect works best if there is a clear structure in the background which is why the ruler was added.

.container {
  ...
  .icon {
    backdrop-filter: blur(2px);
  }
}

Be aware that the backdrop-filter property currently only works in webkit based browsers, so in Firefox you'll just see the translucent background, but not the blurred line of the ruler.

Shinyness

To emphasize the glassy character of each button, let's add a shiny stripe which runs from bottom left to top right every time the button is hovered. So first we ensure that the button is optically lifted up a little bit. Therefore the transform property is made transitionable and the button is lifted up by 25% of its size through the translateY transformation.

.container {
  ...
  .icon {
    transition: transform 
      var(--transition-duration) 
      var(--transition-easing);

    overflow: hidden;

    &:hover {
        transform: translateY(-25%);
    }
  }
}

The shiny stripe is simply created by adding a ::before pseudo-element which has a slightly stronger white as background color and is skewed by 45 degrees. Especially the skewing makes a strong contribution to the effect.

.container {
  ...
  .icon {
    overflow: hidden;

    &::before {
      content: '';
      background: rgba(white, 0.4);
      width: 60%;
      height: 100%;
      top: 0%;

      transform: skew(45deg);

      position: absolute;

      transition: left 
        var(--transition-duration)
        var(--transition-easing);
    }
  }
}

Initially the shiny stripe is positioned left outside the button and shifted to the very right each time the button is hovered. And that's already it. 😎

.container {
  ...
  .icon {
    ...
    &::before {
      left: -125%;
    }

    &:hover {      
      &::before {
        left: 150%;
      }
    }
  }
}

How to use CSS pseudo-classes for styling typographic elements

crayoncode — Fri, 22 Jan 2021 15:39:08 +0000

Today let's work with CSS pseudo-selectors like :first-letter, :last-of-type & :after to build nice little typpgraphic elements in four different color themese that will spice up your text.

Read the full article or watch me code this on Youtube (TL;DW Speedrun):

Result

First Things First - Colors

To have all the colors at hand, each one is defined as a CSS custom property (aka variable) inside the :root scope. For a slight taste of theming the variables background-color and foreground-color are defined and used later on.

:root {
  --cc-p-1: #d4aee0;
  --cc-p-2: #8975b4;
  --cc-p-3: #64518a;
  --cc-p-4: #565190;
  --cc-b-1: #44abac;
  --cc-b-2: #2ca7d8;
  --cc-b-3: #1482ce;
  --cc-b-4: #05597c;
  --cc-g-1: #b2dd57;
  --cc-g-2: #57c443;
  --cc-g-3: #05b853;
  --cc-g-4: #19962e;
  --cc-y-1: #fdc82e;
  --cc-y-2: #fd9c2e;
  --cc-y-3: #d5385a;
  --cc-y-4: #911750;
  --cc-s-1: #d9d9d9;
  --cc-s-2: #9e9e9e;
  --cc-s-3: #666666;
  --cc-s-4: #2b2b2b;

  --foreground-color: white;
  --background-color: var(--cc-s-4);
}

Color Themes

There will be four different color themes for the typographic elements: Amethyst (purple), sapphire (blue), emerald (green) and amber (yellow/orange/red). To make these themes easily usable, a <section> element must have one of the four classes given below, whereas each class simply defines a set of CSS variables which are later used for the gradients.

section {
  &.amethyst {
    --c-1: var(--cc-p-1);
    --c-2: var(--cc-p-2);
    --c-3: var(--cc-p-3);
    --c-4: var(--cc-p-4);
  }

  &.sapphire {
    --c-1: var(--cc-b-1);
    --c-2: var(--cc-b-2);
    --c-3: var(--cc-b-3);
    --c-4: var(--cc-b-4);
  }

  &.emerald {
    --c-1: var(--cc-g-1);
    --c-2: var(--cc-g-2);
    --c-3: var(--cc-g-3);
    --c-4: var(--cc-g-4);
  }

  &.amber {
    --c-1: var(--cc-y-1);
    --c-2: var(--cc-y-2);
    --c-3: var(--cc-y-3);
    --c-4: var(--cc-y-4);
  }
}

Basic Principle

CSS allows us to specify multiple linear-gradients which are then nicely blended into each other. Luckily also background-size & background-position accept multiple, comma separated values, so each gradient can be sized and positioned inidividually. However, this time we're not intersted in creating actual gradients, but tiny mosaic squares each having a unique, so the gradients are created with two times the same color. So in order to create a background containing four squares, the background property is setup to have four linear gradients with two times the same color. Also note that setting background-origin to border-box is essential for this to work.

<selector> {
  background:
    linear-gradient(
      var(--c-1),
      var(--c-1)
    ),
    linear-gradient(
      var(--c-2),
      var(--c-2)
    ),
    linear-gradient(
      var(--c-3),
      var(--c-3)
    ),
    linear-gradient(
      var(--c-4),
      var(--c-4)
    );
  background-origin: border-box;
  background-repeat: no-repeat;
}

Now each gradient is positioned in the top left, top right, bottom left and bottom right corner which is achived by providing four x/y pairs tothe background-position property:

<selector> {
  ... 

  background-position:
    0% 0%,
    100% 0%,
    0% 100%,
    100% 100%;
  background-size: 50% 50%;
}

SASS Mixins for Reusability

Since we'll be using the gradient setup from above multiple times, we'll group it into two mixins for easy reusing:

@mixin mosaic-base() {
  background:
    linear-gradient(
      var(--c-1),
      var(--c-1)
    ),
    linear-gradient(
      var(--c-2),
      var(--c-2)
    ),
    linear-gradient(
      var(--c-3),
      var(--c-3)
    ),
    linear-gradient(
      var(--c-4),
      var(--c-4)
    );
  background-origin: border-box;
  background-repeat: no-repeat;
}

@mixin mosaic() {
  @include mosaic-base;

  background-position:
    0% 0%,
    100% 0%,
    0% 100%,
    100% 100%;
  background-size: 50% 50%;
}

Headline

The headline is going to have a bar below itself having four partial lines positioned one after another:

<section>
  <h2>Mosaic Typographic Elements</h2>
</section>

The mosaic gradients are simply applied to an ::after pseudo-class so there is no additional markup needed. Since the h2 styles are nested within the section selector, the variables for the color theme defined there can be used perfectly well.

section {
  h2 {
    display: block;
    font-weight: 300;
    text-align: center;
    font-size: 2rem;

    position: relative;

    &::after {
      --width: 8rem;
      --height: 2px;

      content: "";

      display: inline-block;
      width: var(--width);
      height: var(--height);

      position: absolute;
      left: 50%;
      bottom: -1rem;
      transform: translate(-50%, -50%);

      @include mosaic-base;
      background-position:
        0% 0%,
        33% 0%,
        67% 0%,
        100% 0%;
      background-size:
        25% 100%,
        26% 100%,
        25% 100%,
        25% 100%;
    }
  }
}

First Letter Styling

In order to style each first letter that appears after a heading let's use the so called adjacent sibling selector to identity each paragraph of text <p> coming directly after a heading <h2>. The :first-letter pseudo-class allows us to apply styles very selectively to - as the name strongly indicates - the very first letter of the paragraph. In order to have text flowing nicely around the letter setting float: right; is necessary. The rest is simply adjusting font size and spacings to make it look nice.

section {
  h2 + p:first-letter {
    font-weight: 900;
    font-size: 1.6em;
    float: left;
    margin-right: 0.1em;
    margin-top: 0.2em;
    padding: 0em 0.1em;

    color:
      var(--background-color);


    @include mosaic;
  }
}

Ruler Styling

The HTML <hr> element alows us to put a horizontal ruler for dividing e.g. paragraphs or any other elements from each other.

<hr>

So, here we'll be overriding the styling of the <hr> element to have a mosaic in its center tilted by 45 degrees. Again, we're using the ::after pseudo-class to create the necessary element for the mosaic without requiring additional markup.

section {
  hr {
    --size: 1rem;

    width: 60%;
    height: 1px;
    border: none;
    background: var(--cc-s-2);

    &::after {
      content: '';
      display: inline-block;
      width: var(--size);
      height: var(--size);

      position: absolute;
      left: 50%;
      transform:
        translate(-50%, -50%)
        rotate(45deg);

      border: 4px solid var(--background-color);

      @include mosaic;
    }
  }
}

Tombstone (you read that right)

A so called tombstone appears at the end of e.g. an article letting the reader know, that the end was reached. The :last-of-type pseudo-class helps us to identify the last element of a given type, so e.g. the last paragraph of text in a section, which is exactly what we need. Now, all we have to do is to simply add another ::after pseudo-class containing the mosaic gradients and being floated to the right. And done! 😎

section {
  p:last-of-type::after {
    --size: 0.5em;
    content: '';

    float: right;
    width: var(--size);
    height: var(--size);
    position: relative;
    top: 0.5em;

    @include mosaic;
  }
}

CSS Day Night Switch (CSS/HTML only) [PART 2]

crayoncode — Sun, 17 Jan 2021 17:52:01 +0000

Now let's get this finished by implementing the night state of our nice day-night-switch by implementing a moon, day-night transitions and a few sparkling stars as a bonus.

Read the full article or watch me code this on Youtube:

Result

Turning off the lights

So, let's start by turning off the lights, which means that as soon as the switch is unchecked, the background color as well as the border color fade to a darker tone of blue.

input.day-night-switch {
  // unchecked styles
  + label.day-night-switch {
    border-color: #2a4569;
    background-color: #223349;
  }
}

Since also everything appears darker at night (who would have thought...), the mountains also fade from a lighter gray to a darker one, as soon as the checkbox is unchecked.

input.day-night-switch {
  // unchecked styles
  + label.day-night-switch {
    > .mountains {
      > * {
        background-color: #878787;
        border-color: #5c5c5c;
      }
    }
  }
}

Sunset

First let's define a position to which sun and moon are shifted as soon as they need to set. In this case sun and moon are going to shifted 25% of the height below the lower edge, i.e. 1.25 x the height of the entire switch.

input.day-night-switch {
  --shift: calc(var(--height) * 1.25);
}

Now, to make the sun set, we simply update its value for the top property as soon as the checkbox is unchecked. Additionally it is scaled down to 0 to create a little bit of a stronger sunset effect.

input.day-night-switch {
  // unchecked styles
  + label.day-night-switch {
    > .celestial {
      &.sun {
        transition-delay: 0ms;
        top: var(--shift);
        left: var(--pos-right);
        transform: scale(0);
      }
    }
  }
}

Let the moon come out!

Now that the sun is able to come and go, there's space for the moon. Therefore let's put a div with the celestial class for the shared styling of sun and moon and the moon class for the moon-specific styling...

label(for="day-night").day-night-switch
  ...
  div.celestial.moon

... which is most importantly the moon's color:

label.day-night-switch {
  > .celestial {
    &.moon {
      background-color: #d2cec4;
      border-color: #a9a18f;
    }
  }
}

Analogously to the sun, the moon gets also set its coordinates to where it should be during daytime (checked) and nighttime (unchecked):

input.day-night-switch {
  // checked styles
  &:checked {
    + label.day-night-switch {
      > .celestial {
        &.moon {
          transition-delay: 0ms;
          left: var(--pos-left);
          top: var(--shift);
          transform: scale(0);
        }
      }
    }
  }
}

input.day-night-switch {
  // unchecked styles
  + label.day-night-switch {
    > .celestial {
      &.moon {
        transition-delay: var(--transition-duration);
        top: var(--padding);
        left: var(--pos-left);
        overflow: hidden;
        transform: scale(1);
      }
    }
  }
}

Craters!

However, the moon looks still a little but dull and boring and actually not really like a moon. To fix this, let's add a few craters:

label(for="day-night").day-night-switch
  ...
  div.celestial.moon
    div.craters
      div.crater
      div.crater
      div.crater
      div.crater
      div.crater

Very similar to the clouds the craters are positioned relatively to the --switch-size inside the moon. Each crater is in the end just a div which is made a circle through border-radius: 50%.

The border width of each crater is set to to slightly smaller value than the border width of the moon. But it should never be smaller than 1px, which is achieved by using the max(...) function, returning always the largest value of the ones which are passed to it. So should 65% of the --border-width be ever the smaller one, 1px is returned.

label.day-night-switch {
  > .celestial {
    &.moon {
      > .craters {
        > .crater {
          background-color: #d2cec4;
          border-color: #a9a18f;
          border-width: calc(max(var(--border-width) * 0.65, 1px));
          border-style: solid;
          position: absolute;

          &:nth-child(1) {
            border-radius: 50%;
            width: calc(var(--switch-size) * 0.15);
            height: calc(var(--switch-size) * 0.15);
            top: calc(var(--switch-size) * 0.7);
            left: calc(var(--switch-size) * 0.4);
          }

          &:nth-child(2) {
            border-radius: 50%;
            width: calc(var(--switch-size) * 0.3);
            height: calc(var(--switch-size) * 0.3);
            top: calc(var(--switch-size) * 0.1);
            left: calc(var(--switch-size) * -0.05);
          }

          &:nth-child(3) {
            border-radius: 50%;
            width: calc(var(--switch-size) * 0.1);
            height: calc(var(--switch-size) * 0.1);
            top: calc(var(--switch-size) * 0.2);
            left: calc(var(--switch-size) * 0.6);
          }

          &:nth-child(4) {
            border-radius: 50%;
            width: calc(var(--switch-size) * 0.1);
            height: calc(var(--switch-size) * 0.1);
            top: calc(var(--switch-size) * 0.3);
            left: calc(var(--switch-size) * 0.25);
          }

          &:nth-child(5) {
            border-radius: 50%;
            width: calc(var(--switch-size) * 0.2);
            height: calc(var(--switch-size) * 0.2);
            top: calc(var(--switch-size) * 0.5);
            left: calc(var(--switch-size) * 0.8);
          }
        }
      }
    }
  }
}

Sparkling stars

Now finally, let's make this night sky perfectly clear by adding a few sparking stars. The good thing is that we already have a few .decoration elements for the clouds in the DOM that we don't need at night time. So let's simply reuse them for the stars and by that creat

input.day-night-switch {
  // unchecked styles
  + label.day-night-switch {
    > .decorations {
      > .decoration {
        position: absolute;
        background-color: white;
        border-radius: 50%;
        width: calc(max(var(--border-width) * 0.75, 2px));
        height: calc(max(var(--border-width) * 0.75, 2px));
        animation: 2s sparkle ease-in-out infinite;
        animation-direction: alternate;

        &:nth-child(1) {
          top: calc(var(--switch-size) * 0.7);
          left: calc(var(--switch-size) * 1.7);
        }
        &:nth-child(2) {
          animation-delay: 300ms;
          animation-duration: 3s;
          top: calc(var(--switch-size) * 0.4);
          left: calc(var(--switch-size) * 1.4);
        }
        &:nth-child(3) {
          animation-delay: 800ms;
          animation-duration: 3.5s;
          top: calc(var(--switch-size) * 0.9);
          left: calc(var(--switch-size) * 2.2);
        }
        &:nth-child(4) {
          animation-delay: 1400ms;
          animation-duration: 2.5s;
          top: calc(var(--switch-size) * 0.3);
          left: calc(var(--switch-size) * 2);
        }
      }
    }
  }
}

The sparkling animation itself is just going to alternate between 100% and 25% of opacity for each star:

@keyframes sparkle {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0.25;
  }
}

input.day-night-switch {
  // unchecked styles
  + label.day-night-switch {
    > .decorations {
      > .decoration {
        transition: all var(--transition-duration) ease-in-out;
        animation: 2s sparkle ease-in-out infinite;
        animation-direction: alternate;
      }
    }
  }
}

To make the sparkling a little bit more exciting, different delays and duration are applied to each star...aaaand it's done!

// unchecked styles
  + label.day-night-switch {
    > .decorations {
      > .decoration {

        &:nth-child(2) {
          animation-delay: 300ms;
          animation-duration: 3s;
        }
        &:nth-child(3) {
          animation-delay: 800ms;
          animation-duration: 3.5s;
        }
        &:nth-child(4) {
          animation-delay: 1400ms;
          animation-duration: 2.5s;
        }
      }
    }

That's all you need to create such a nice little day night swith. I hope you enjoyed creating it.

CSS Day Night Switch (CSS/HTML only) [PART 1]

crayoncode — Sun, 17 Jan 2021 17:15:22 +0000

Today let's build a nice little day night switch with sunset and sunrise and a lot of CSS transitions. In this first part we're going to take care of the day phase of the switch, so we start with a checkbox in checked state.

Read the full article or watch me code this on Youtube:

Result

Basic Markup

The first thing we need is a checkbox and a label. The most important part here is that the ID of the input matches the value of the for attribute of the label, because the checkbox will not be visible and all of the styled content is going to be inside the label. So when the label is clicked, the checkbox needs to be triggered, which is why the for value needs to match the ID of the checkbox.

input(type="checkbox",checked).day-night-switch#day-night
label(for="day-night").day-night-switch

input.day-night-switch {
  display: none;
}

Basic Styling

Let's define a few variables which make resizing much easier. The --size CSS variable is what every other dimension is derived from, so the switch can be resized to whatever size you want it to be.

To create the shape of the switch it's going to have half of the width as the height and the border-radius is set to be the same as the height to give it the typical switchy shape.

Since we're going to use the transition duration a lot, it's wrapped up in variable called --transition-duration.

The actual size of the moving part of the switch is calculated to fit nicely into the shape of the container. Because a few calculations are done relatively to the switch size (scalability), it's put into a variable called --switch-size.

label.day-night-switch {
  --size: 400px;
  --height: calc(var(--size) / 2);
  --padding: calc(var(--size) * 0.04); //8px;
  --border-width: calc(var(--size) * 0.02); //4px;
  --transition-duration: 250ms;
  --switch-size: calc(
    var(--height) - 2 * var(--padding) - 2 * var(--border-width)
  );

  width: var(--size);
  height: var(--height);
  //background: rgba(white, 0.2);
  border-radius: var(--height);
  border: var(--border-width) solid white;
  position: relative;
  transition: all var(--transition-duration) ease-in-out;
  cursor: pointer;
}

Let the sun come out!

The sun is just a plain div.celestial.sun:

label(for="day-night").day-night-switch
  ...
  div.celestial.sun

Since the sun will be put on the right, let's calculate its position relative to the --switch-size and use it for later reference. Both moon and sun share the same basic styling, so the class .celestial sets up the dimensions, border radius positioning mode. To make the sun actually look like a sun, it's getting a nice yellow color with a slightly darker border.

label.day-night-switch {
  --pos-right: calc(
    var(--size) - var(--switch-size) - var(--padding) - 2 * var(--border-width)
  );

  > .celestial {
    transition: all var(--transition-duration) ease-in-out;
    width: var(--switch-size);
    height: var(--switch-size);
    border: var(--border-width) solid green;
    position: absolute;
    border-radius: var(--switch-size);
    background: white;

    &.sun {
      background-color: #fdc82e;
      border-color: #e3ad0d;
    }
  }
}

The day state is given through the checked state and therefore let's group all styles that are important for it together. So, the position on the top right of the switch is given and during day the sky is bright, which is why the switch also has a bright blue color.

input.day-night-switch {
  // checked styles
  &:checked {
    + label.day-night-switch {
      border-color: #3190bf;
      background-color: #6cbde5;

      > .celestial {
        &.sun {
          transition-delay: var(--transition-duration);
          left: var(--pos-right);
          top: var(--padding);
          transform: scale(1);
        }
    }
  }
}

A beautiful day in the mountains

Let's not just have a switch, but also a beautiful scenery, so we're adding two divs for the mountains.

markup: mountains

label(for="day-night").day-night-switch
  ...
  div.mountains
    div
    div

The mountains are basically just rotated by 45 degrees and positioned in a way such that only around one half of them is visible. Additionally the cap is slightly rounded off to make it look less edgy.

In order to maintain scalability all dimensions are calculated relatively to the switch size.

label.day-night-switch {
 > .mountains {
    display: inline-block;
    position: absolute;
    top: calc(var(--switch-size) * 0.85);
    left: calc(var(--switch-size) * 0.7);

    > * {
      position: absolute;
      display: inline-block;
      border-width: var(--border-width);
      border-style: solid;
      transform: rotate(45deg);
      transition: var(--transition-duration) all ease-in-out;
      border-top-left-radius: calc(var(--switch-size) * 0.1);
      background-color: white;
      border-color: black;

      &:nth-child(1) {
        width: calc(var(--switch-size) * 0.9);
        height: calc(var(--switch-size) * 0.9);
        top: calc(var(--switch-size) * 0.1);
        left: 0;
      }

      &:nth-child(2) {
        width: calc(var(--switch-size) * 0.45);
        height: calc(var(--switch-size) * 0.45);
        top: calc(var(--switch-size) * 0.2);
        left: calc(var(--switch-size) * 0.6);
      }
    }
  }
}

input.day-night-switch {
  // checked styles
  &:checked {
    + label.day-night-switch {
      > .mountains {
        > * {
          background-color: #d4d4d4;
          border-color: #a8a8a8;
        }
      }
    }
  }
}

A vibing cloud

To make the left side of the switch look less empty, let's add a cloud. It consists of four divs, simply being rounded off and positioned together to create a nice little "good weather cloud".

label(for="day-night").day-night-switch
  ...
  div.decorations
    div.decoration
    div.decoration
    div.decoration
    div.decoration

Just like the mountains they are dimensionsed and positioned absolutely relative (pun intended) to the --switch-size. If you may wonder why they also need transitions, continue reading part 2 😄.

label.day-night-switch {
  > .decorations {
    > .decoration {
      transition: all var(--transition-duration) ease-in-out;
      position: absolute;
    }
  }
}

input.day-night-switch {
  // checked styles
  &:checked {
    + label.day-night-switch {
      > .decorations {
        > .decoration {
          position: absolute;
          background-color: white;
          border-radius: 50%;
          width: calc(max(var(--border-width) * 0.75, 2px));
          height: calc(max(var(--border-width) * 0.75, 2px));

          &:nth-child(1) {
            border-radius: calc(var(--switch-size) * 0.3);
            width: calc(var(--switch-size) * 0.85);
            height: calc(var(--switch-size) * 0.3);
            top: calc(var(--switch-size) * 0.6);
            left: calc(var(--switch-size) * 0.45);
          }
          &:nth-child(2) {
            border-radius: 50%;
            width: calc(var(--switch-size) * 0.35);
            height: calc(var(--switch-size) * 0.35);
            top: calc(var(--switch-size) * 0.5);
            left: calc(var(--switch-size) * 0.35);
          }
          &:nth-child(3) {
            border-radius: 50%;
            width: calc(var(--switch-size) * 0.3);
            height: calc(var(--switch-size) * 0.3);
            top: calc(var(--switch-size) * 0.5);
            left: calc(var(--switch-size) * 0.85);
          }
          &:nth-child(4) {
            border-radius: 50%;
            width: calc(var(--switch-size) * 0.4);
            height: calc(var(--switch-size) * 0.4);
            top: calc(var(--switch-size) * 0.4);
            left: calc(var(--switch-size) * 0.55);
          }
        }
      }
    }
  }
}

Now, let's make the clouds extra playful, by adding a slightly pulsating/vibing animation to each part of it. Therefore the animation is setup to scale between 1.0 and 1.2.

@keyframes vibe {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(1.2);
  }
}

The animation is set for each individual part of the cloud and by adding some animation delays and variation in duration, it looks like proper cozy vibing cloud. Most importantly animation-direction: alternate; will make the animation first play in one direction and then again backwards, so it constanlty alternates slowly between a scale of 1.0 and 1.2.

input.day-night-switch {
  // checked styles
  &:checked {
    + label.day-night-switch {
      > .decorations {
        > .decoration {
          animation: 4s vibe ease-in-out infinite;
          animation-direction: alternate;

          &:nth-child(2) {
            animation-delay: 300ms;
            animation-duration: 2.5s;
          }
          &:nth-child(3) {
            animation-delay: 800ms;
            animation-duration: 3.5s;
          }
          &:nth-child(4) {
            animation-delay: 1400ms;
            animation-duration: 3s;
          }
        }
      }
    }
  }
}

So, that's what's needed for the day phase. Now let's head right over to the night phase and read on in Part 2.

CSS Download Loading Animation (@keyframes, clip-path)

crayoncode — Fri, 15 Jan 2021 15:01:43 +0000

Today let's work with CSS animations & clip-path to create a nice little download animation with an indefinite and a definite mode.

Read the full article or watch me code this on Youtube:

Result

Markup

The markup of this loader is quite simple as it consists of one div.downloader for each loading animation and either the additional .indefinite class or the .definite class with a variable set to the percentage the loader should display.

.downloader.indefinite
  .arrow
  .bar

.downloader.definite(style="--percentage: 60%;")
  .arrow
  .bar

Variable Setup

The size of the loader is controller through the --size CSS custom property - give it any value you want. The height of the bar and the space between the arrow and the bar is specified in percent whereas the size of the arrow is then derived through the remaining space.

The background color of the loader is given through --inactive-color and the actual animation color is defined through --active-color.

.downloader {
  --size: 5rem;
  --bar-height: 6%;
  --bar-arrow-spacing: 10%;
  --arrow-height: calc(100% - var(--bar-height) - var(--bar-arrow-spacing));

  --inactive-color: rgba(255, 255, 255, 0.2);
  --active-color: white;

  width: var(--size);
}

The basic layout for the downloader is defined as a flex box operating in column mode:

.downloader {
  ...

  display: flex;
  flex-direction: column;
}

Creating the Arrow Shape

The arrow shape is created by using a clip-path that crops the .arrow element to have it's arrowy shape. So it's also easy to customize and you can give it almost every shape you want.

.downloader {
  ...

  .arrow {
    background-color: var(--inactive-color);
    padding-top: var(--arrow-height);
    position: relative;

    clip-path: polygon(
      47% 0%, 
      53% 0%, 
      53% 85%, 
      80% 56%, 
      80% 67%, 
      50% 100%, 
      20% 67%, 
      20% 56%, 
      47% 85%
    );
  }
}

In order to create the animation an :after pseudo element is created inside the arrow, so it's also affected by the clip-path and it will be running from top to bottom, which is why it's fixed to the top (see bottom: 100%;) at the beginning.

.downloader {
  ...

  .arrow {
    ...

    &:after {
      content: "";
      position: absolute;
      background-color: var(--active-color);
      left: 0;
      right: 0;
      bottom: 100%;
      top: 0;
    }
  }
}

Configuring the Indefinite Mode

So, for the indefinite mode the arrow's :after element is given an animation, that makes it run from top to bottom:

.downloader {
  ...

  &.indefinite {
    .arrow:after {
      animation: 2s loading-vertical ease-in-out infinite;
    }
  }
}

@keyframes loading-vertical {
  0% {
    top: 0%;
    bottom: 100%;
  }
  30% {
    top: 0%;
    bottom: 100%;
  }
  50% {
    top: 0%;
    bottom: 0%;
  }
  70% {
    top: 0%;
    bottom: 0%;
  }
  100% {
    top: 100%;
    bottom: 0%;
  }
}

And same goes for the bar

Now, for the bar we're going to do the same, except that its size and animation direction differs:

.downloader {
  ...

  .bar {
    position: relative;
    width: 100%;
    padding-top: var(--bar-height);
    margin-top: var(--bar-arrow-spacing);
    background-color: var(--inactive-color);

    &:after {
      content: "";
      position: absolute;
      background: var(--active-color);
      left: 0;
      right: 100%;
      bottom: 0;
      top: 0;
    }
  }

  &.indefinite {
    ...

    .bar:after {
      animation: 2s loading-horizontal ease-in-out infinite;
    }
  }
}

...

@keyframes loading-horizontal {
  0% {
    left: 0%;
    right: 100%;
  }
  30% {
    left: 0%;
    right: 100%;
  }
  50% {
    left: 0%;
    right: 0%;
  }
  70% {
    left: 0%;
    right: 0%;
  }
  100% {
    left: 100%;
    right: 0%;
  }
}

Making the Definite Mode Work

Now, all that's required for the definite mode to work is the configuration of the .definite class. The arrow will keep its animation and the .bar:after's right property is calculated through the --percentage custom property.

.downloader {
  ...


  &.definite {
    .arrow:after {
      animation: 2s loading-vertical ease-in-out infinite;
    }

    .bar:after {
      transition: 250ms right ease-in-out;
      right: calc(100% - var(--percentage));
    }
  }
}

CSS Grid Layout Template Areas (Secrets of Painless Layout)

crayoncode — Sun, 10 Jan 2021 10:01:36 +0000

Today let's start getting to know CSS grid layout and bring some ease to handling grid positions through named areas, so let's build a nice little credit card layout.

Read the full article or watch me code this on Youtube:

Result

Getting started with CSS grid layout

If you take a look at your credit card or search for images of it, you'll notice that there is certain information being placed in specific spots. So the layout does not follow a specific flow of text, but is rather explicitly / absolutely positioned. Finally, with CSS Grid Layout we have something at hand which makes tasks like this so much easier.

Remember those times where tables were used to setup the layout of a web page? If you're lucky you don't as it was anything else but fun. CSS Grid Layout is here to make up for it. It works kind of similar, as it divides a container into a grid of rows and columns. The child elements of the container then can be assigned to specific cells of that grid and can also span multiple adjacent cells.

Markup

So for the basic markup, there's a wrapping div.credit-card which is going to be the grid layout container. The nested children contain the information like credit card number, card holder, date of validity, etc.

<div class="credit-card">
  <div class="provider"><i class="fab fa-cc-visa"></i></div>
  <div class="number">xxxx xxxx xxxx xx80</div>
  <div class="good-through-label">good<br/>through</div>
  <div class="good-through-value">09/24</div>
  <div class="holder">Jane Doe</div>
  <a class="select" href="#">Select</a>
  <div class="validity">valid</div>
</div>

Basic Styling

Let's first apply some styling to the container by e.g.

Putting a font that looks similar to the embossed letters on a credit card
Rounding the corners
Adding glassmorphism via the backdrop-filter property (Webkit-based browsers only at the moment)

.credit-card {
  font-family: 'Share Tech Mono', monospace;
  color: white;
  border: 1px solid rgba(white, 0.2);
  border-radius: 0.5rem;

  box-shadow: 0px 0px 8px 2px rgba(black, 0.2);
  padding: 1rem;

  // glassmorphism FTW
  backdrop-filter: blur(4px);
  background: rgba(white, 0.2);

}

Grid Layout Setup

So let's get into the basic setup of the grid layout. Most importantly display: grid; enables the grid layout itself.

Via grid-template-rows|columns the number and proportions of the rows and columns can be defined. In our case we want 4 equally sized columns that add up to the entire vertical/horizontal space available. And instead of writing 1fr 1fr 1fr 1fr we simply use the repeat(count, dimension) function.

Through grid-column|row-gap we can define the spacing between all rows and columns. And this is also where the fr unit comes into play. We could have also used 25% when sizing the rows and columns. But as soon as you do so, the gaps make the entire container grow as it is put on top of the 25%. fr is a so called fraction of the available space and takes the gaps correctly into account. So each row / column takes an equal fraction of the available space after the gaps have been deducted from it.

.credit-card {
  ...

  display: grid;
  grid-template-rows: repeat(4, 1fr);
  grid-row-gap: 0.5rem;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 0.35rem;
}

Defining named areas

In order to position items in the grid, it is necessary to assign them to cells. Each cell has a row and a column number identifying its position in the grid. However, this can become quite tedious and not very robust towards changes in the layout. This is where grid-template-areas help a great deal. grid-template-areas allows us to assign cells an area name. It is also possible to assign multiple adjacents cells the same area name.

So in the first line of the grid only the provider is given, the rest of the cells do not belong any named area which is indicated by the dots.

In the second line the number takes all four cells, which is why that identifier is repeated multiple times each separated by a space.

.credit-card {
  ...

  grid-template-areas: "provider . . ."
    "number number number number"
    "good-through-label good-through-value . validity"
    "holder holder holder select";
}

Using the named areas

Now each child simply gets its area name assigned and is automatically spanned across the cells that belong to that area. As simple as that.

Heads up: There are no quotes around the grid area names.

.credit-card {
  ...

  > .provider {
    grid-area: provider;
  }

  > .number {
    grid-area: number;
  }

  > .good-through-label {
    grid-area: good-through-label;

    font-family: 'Lato', sans-serif;
    text-transform: uppercase;
    font-size: 0.65rem;
  }

  > .good-through-value {
    grid-area: good-through-value;
  }

  > .holder {
    grid-area: holder;
  }

  > .select {
    grid-area: select;
  }

  > .validity {
    grid-area: validity;
  }
}

Making it pretty

Now let's also make it pretty by giving the validity indicator a happy green color and a slight shine with a gradient running from transparent black to a 20% white. An additional box-shadow makes it also stand out a little more. The text is centered both horiztonally and vertically using flexbox in conjunction with justify-content: center; and align-items: center;

.credit-card {
  ...

  > .validity {
    color: white;
    border: 1px solid #44a333;
    font-size: 1rem;
    font-weight: 400;
    background: #57c443 linear-gradient(45deg, rgba(black, 0) 0%, rgba(white, 0.25) 100%);

    display: flex;
    justify-content: center;
    align-items: center;

    box-shadow: 2px 3px 6px 0px rgba(black, 0.5);
  }

Almost the same goes for the select button, except for the color (it's going to be blue) and the font (no serifs):

.credit-card {
  ...

  > .select {
    background: #2ca7d8 linear-gradient(45deg, rgba(black, 0) 0%, rgba(white, 0.25) 100%);
    border: 1px solid #1482ce;
    color: white;
    font-family: 'Lato';
    font-size: 1rem;
    text-decoration: none;

    display: flex;
    justify-content: center;
    align-items: center;

    box-shadow: 2px 3px 6px 0px rgba(black, 0.5);
  }
}

Making it playful

And finally let's add a playful vibe to the select button, by making the box-shadow and transform properties transitionable. So each time the user clicks the button, the box shadow is lowered and the button shifted 1px each left and upwards in order to provide a push effect:

.credit-card {
  ...

  > .select {    
    transition: box-shadow 250ms, transform 250ms;

    &:active {
      box-shadow: 0px 0px 4px 0px rgba(black, 0.2);
      transform: translate(-1px, -1px);
    }
  }