Don’t sleep on CSS

Eric SK. Cheung

9 min readApr 9, 2020

#A display of CSS with plenty of images

Search Headers

/*NavBar*/

/*Linear-Gradient Header*/

/*Customize Scrollbar*/

/*Resources*/

########

There’s a lot of resources out there for anyone trying to get in the fast pass lane for webpage design. There’s Bootstrap which is a CSS framework that utilizes Javascript, Material Design by Google, Material Kit which is a UI kit for Bootstrap, Materialize which is a framework based off of Material Design and-

Actually, never mind the list; it gets redundant. Point is, a lot of people starting out on webpage design skip CSS because they believe all they can make are web pages that look like Windows 95 OS. But fear no more!

I mean, gross, amirite? Get this 90’s whackness outta here.

CSS means cascading style sheets, in other words, the way you organize your HTML is crucial to making CSS work effectively. Everything you apply to the top level will cascade down to the inner elements.

If you’re painting something, first you need to set the tone for the canvas. That’s simply applying CSS to the <body> with fonts, margins, or background. Then you draw the shape of the tree, which is <div id=“tree”>. Imagine inside that <div id=“tree”> are two child elements, the greenery of the tree top that is <ul id=“tree-crown”>, and the tree trunk that is <main id=“tree-trunk”>. The sizes and shapes of both child elements are initially determined by <div id=“tree”>. If you color the entire top section of the tree to green with #tree-crown {color: green}, the branches, or child elements <li class=“branch”>, will also be green. That is, unless you color each branch specifically with .branch {color: brown}.

CSS follows the same structure as painting, and can accomplish great things if you coordinate well with HTML. You will need to use ‘id’ and ‘class’ effectively, you are going to need containers for everything, and you will need to be familiar with CSS selectors.

Let’s get to it.

/NavBar/

For this blog post, I made a shell webpage based on a concept of a website called “The Hub”. Take a look.

This navbar is pure CSS and HTML. No Javascript required, not even browser rendering engine CSS properties. All this navbar requires is clean organization of HTML elements, and an understanding of how to establish CSS properties.

Our HTML is essentially:

<body>
  <nav class="navbar">Navbar container
    <ul class="navbar-ul">Navbar item container
      <li class="nav-item"> <!--One li per icon in navbar-->
        <a class="navtab">
          <span class="tab-text">Navbar item(SVG)
        </a>
      </li>
    </ul>
  </nav>
  <header class="clip">"The Hub"</header>
  <main>
    <p>"Where main text lives"</p>
  </main>
</body>

You can see our HTML is divided into three parts. The navbar, the header where it reads “The Hub”, and main, which is where the text lives.

First, we need to set some ground rules. :root is a pseudo selector that targets the most dominating element in the HTML, the very root of the document itself, as though we painted the entire canvas a base color. Whatever we put in here will apply to everything unless we specify differently later. In this case, I am setting the font-size and font-family.

This font is also a google font, so be sure to add the embed link of the font you like in the head of the HTML, where you link the CSS.

REM

Since our navbar is going to be on the left side with a minimal width of 5rem, we will set the margin-left and padding of our main to 5rem and 1rem, respectively. A rem is a unit based on the font-size set in our root, which is currently16px. So 5rem is essentially 80px. Setting the font-size in root and using rem everywhere else in our CSS allows us to scale all of our CSS according to our base font-size. If we ever needed to resize or rescale our entire page, all we have to do is change the font-size in our root instead of each value in our CSS individually.

Next, we make the width of the navbar to 5rem, set its position: fixed, and set the height to 100vh. position:fixed keeps the navbar in its place even if you scroll, while 100vh always keeps the navbar’s full height within the viewport. vh stands for view height, which corresponds to a percent of what is currently viewable within the browser, and not the element. That way, if you stretch the browser, the navbar will always maintain that percent of height, in this case, 100%.

FLEXBOX

In the .navbar-ul, we create a flexbox, which is one of the most convenient and powerful CSS features available. It allows us to organize the properties of the child elements of whatever display: flex is set on. Right now, since flex is set on ourul, the container for all our individualli icons, flex will space out everyli element evenly. Adding flex-direction: column forces the li to arrange vertically. Some other common properties to set for flexbox are justify-content, align-items, and flex, short for flex-grow.

SVG

From the opening svg tag to the closing svg tag is everything needed to render an icon

Now, we can start adding SVG icons to all of ourli. SVG is a vector graphic format, which uses code to describe lines, curves, shapes, and colors to draw a picture. This code can be created by people, and its value lies in its ability to be compatible with nearly all web based languages and technologies.

Each of these SVG icons is from https://fontawesome.com/.

All you have to do is download the SVG, and the single piece of code that exists in the file with <svg> tags is what the browser needs to draw the icon.

Since each of these icons is supposed to represent a link to another page, like chat or calendar, we include the SVG within the <a class="nav-tab"> anchor tags, which is within the li. Then we apply colors to the anchor tags, and create .nav-tab:hover which will change the color of the icon when we hover over the tab. The transition: 600ms sets the speed of the color change.

The tab-text display will be set to none, so it remains invisible until we hover over it. So what’s next? We set a hover to the navbar itself, which will change the width to 16rem, and the display of the tab-text to block, or inline-block which also works.

And there you have it, a fully functioning navbar and header with just HTML and CSS.

/Linear-Gradient Header/

To apply a linear-gradient to the text, we can’t just apply #header {color: linear-gradient(#some color, #some other color)}. This requires a bit of finessing, and the help of the browser’s rendering engine features.

Not to get too much into it, different browsers use different engines which have their own specific prefixes to access CSS pseudo elements to customize certain things. Chrome and Safari use Webkit engine which uses -webkit CSS prefix, and Firefox uses Gecko engine, which uses -moz.

-webkit-background-clip: text; is crucial here, and will only render in Chrome and Safari

Since we can’t apply a linear-gradient directly to the text, what we have to do is apply the linear-gradient as the background color of the text characters, and then apply color: transparent to the text itself.

First, we set the background of the header text, in this case has a class of .clip, to the linear-gradient. You can use a linear-gradient generator like https://cssgradient.io/, to really customize your colors.

Then, we set background-size: cover; which will cover the width of the element’s content, which is “The Hub”.

Then we apply -webkit-background-clip: text, which makes our linear-gradient only take up the space of our text. I repeat, this will make the linear-gradient colors take up the exact space of the text, so it will be nearly invisible because the color of the text itself stands in front of it.

Then, we apply color:transparent to the text, which will allow our background linear-gradient to be visible.

Then I top it off with an animation that applies afilter: hue-rotate(180deg) infinitely on a loop when the cursor hovers over the header, with the selector .clip:hover.

Easy!

**/Customize Scrollbar/**

The scrollbar width, background color, and scrollbar color itself can be customized by adding selector for the pseudo element of scrollbar onto the element with the scrollbar. Since -webkit is specifically for Safari and Chrome, you may have to duplicate your code using respective prefixes to ensure compatibility.

Notes on CSS and React

For anyone who knows React, you’ll know that the common technique of conditionally rendering JSX elements and components conflicts heavily with CSS. Not only is React’s Reconciliation algorithm unpredictable at times, which unmounts and remounts components based on its belief that something in the element has changed (even though nothing may have changed), but this and the the act of conditionally rendering an element removes all CSS transition properties and animations. Because if the element suddenly comes into existence, the animation does not know it was supposed to begin, and the element has no knowledge of what has changed to even qualify a transition.

A common library to use is React CSS Transition Group, which allows you to get around this annoyingly unprecedented issue of animating with React, but it’s functionality is limited, and in my opinion, a huge hassle.

Another way to get around this is by using good ol’ styling logic with CSS. For example, if you were to create a dropdown menu, instead of conditionally rendering the dropdown in React with {openDropdown && <Dropdown/>}, you can simply set the visibility property of the dropdown class to visibility: hidden, then conditionally change the dropdown class to another class with visibility: visible . You could also do opacity: 0 and then opacity: 1 to create a fade in effect. This will allow your dropdown class to keep all transitions and animations, and smoothly render a dropdown menu.

Oftentimes you will be conflicted of whether to render something through React means or CSS means, and it all depends on how badly you want the specific component to have an animation.

And we’re done!