Css on dev notes

How to implement useMediaQuery hook in React

Sun, 13 Mar 2022 00:00:00 +0000

What are Media Queries?

Media Queries are a CSS feature that can be used to conditionally apply selected styles on an HTML element. Some examples of media queries include checking for the width of the browser window, checking for the media type (print, screen), or checking for dark/light mode preference.

The most common use case for media queries is using it to implement responsivity on a website. Checking for the width of the viewport and applying styles based on it allows us to define different styles on different devices (desktop, mobile, tablet).

Creating layouts with CSS grids

Wed, 16 Jun 2021 09:33:01 +0000

Grids are a powerfull feature of CSS but they can be a little overwhelming at first. There are rows, columns, areas, lines, and multiple syntaxes for defining layouts. How do these concepts fit together and how to use them effectively?

In this article, we’ll go through some basic concepts of CSS grids and learn how we can use grids to build layouts. My goal is to shed some light on how to define grid areas grid lines, which I found somewhat confusing when learning CSS grids.

CSS grid by examples

Sat, 15 May 2021 09:33:01 +0000

Three column grid layout

The next example is a three column layout that could be used for example in a blog or a news site. It has a navbar and a grid that uses a automatic layout for it’s child elements.

Here’s the HTML structure we will be using

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Three column layout</title>
  </head>
  <body>
    <nav>
      <div class="title">Nav</div>
    </nav>
    <main>
      <article class="hero">
        <div class="title">
          Article
        </div>
      </article>
      <article>
        <div class="title">
          Article
        </div>
      </article>
      <article>
        <div class="title">
          Article
        </div>
      </article>
      <article>
        <div class="title">
          Article
        </div>
      </article>
      <article>
        <div class="title">
          Article
        </div>
      </article>
    </main>
  </body>
</html>

In this layout we will not be using grid for the whole page. Instead we will use conventional layout method like position and margin for the navbar and positioning the grid container. We will then use a grid for the layout of the content.

Create a retro text effect with CSS

Tue, 13 Apr 2021 09:33:01 +0000

In this article, we’re going to create an 80’s style text effect with CSS. The effect uses multiple text-shadow, background-clip, filter, linear gradients and -webkit-text-stroke to achieve a cool metallic effect.

Before we dive into the actual CSS you probably want to see the end result.

Let’s start by defining our HTML markup that we will be using.

Use box-sizing: border-box for simpler element sizing

Mon, 04 Jan 2021 09:33:01 +0000

The CSS property box-sizing defines how the width and height properties behave on a element with border or padding. Normally, when box-sizing has its defualt value of content-box, width and height affect the size of the content. This means that if you have a element with padding: 10px, border: 8px and width: 100px then full width of the element will be 136px. This also affects elements which have a relative width or height.

A Tailwind CSS plugin for adding gradient masks

Mon, 09 Nov 2020 00:00:00 +0000

Some time ago I added excerpts to my blog. A small sample of the full blog text is now shown on the front page after the post heading, date, and tags. To make the excerpts look a bit nicer, I wanted to add an effect that makes the text fade into the background.

You can do this with the CSS mask-image property by setting its value to a linear-gradient.

.some-class {
  mask-image: linear-gradient(to top, rgba(0, 0, 0, 1.0) 0%, transparent 100%);
}

I use Tailwind CSS to style my blog so I wanted to find a solution which doesn’t require adding CSS classes or files to my project.

Introduction to relative CSS units

Mon, 22 Jun 2020 23:38:00 +0000

With CSS you can use absolute units like the familiar px, pt or relative units like em and rem . Absolute units are quite simple to use and rarely cause confusion. Relative units however can twist your brain if your not familiar with how they work.

We are going to go through some of the most common relative units with simple examples that hopefully help you understand how they work and how to use them.

Dark mode using prefers-color-scheme rule and CSS variables

Thu, 14 May 2020 09:33:01 +0000

In this article I’ll show you how to implement dark mode in your blog or site using CSS variables and how the toggle it automatically based on the users preferred color scheme.

CSS variables are a new way to make CSS more maintainable by defining reusable variables which are defined in one place and can be referenced in multiple other places.

For our dark mode example we’ll be changing the sites background and text colors when the user has set dark mode as preference at system level.