4 Helpful CSS Snippets For Your Next Company Website

written by: Dimitri
Last Updated: November 6, 2021

Today we are going to give you some CSS snippets that we use on our websites. CSS snippets are very useful because they save you time and energy while coding. When you are working on a project, you might find yourself using the same code over and over again. If you are working with a team, you will also need to share these snippets with your fellow developers. As a front-end developer, you spend a lot of time doing repetitive work. Whether it's a button, a navigation bar, or a gallery, the code is frequently the same. That's where snippets come in handy. In this post, we'll go over 5 CSS snippets that can help you save time and streamline your workflow. All of these CSS snippets are free to use, and you can adapt them to fit your needs. Just remember to link back to us!

1. CSS Snippet For Vertically Align in Center

Vertically aligning is quite controversial in which method works best. We know there are many implementations out there, however, this CSS snippet works the best for us.

.v-align {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
CSS

2. CSS Snippet For Inset or Offset Outlines

While creating a website for Explore More USA we decided to make use of outline offsets/insets to give a unique and vintage look & feel to the website. You can see an example of both below:

CSS Snippet for inner outline
Inner Outline
CSS Snippet for outer outline
.inner-outline {
    outline: 1px solid #ffffff5c;
    outline-offset: -10px;
}

.outer-outline {
    outline: 1px solid #6868683d;
    outline-offset: 10px;
}
CSS

Now lets get a little crazy and add some hover effects to move the outline on hover

CSS Snippet for inner outline with hover effect
CSS Snippet for outer outline with hover effect
.inner-outline {
    outline: 1px solid #ffffff5c;
    outline-offset: -10px;
    transition: .3s ease-in-out;
}
.outer-outline {
    outline: 1px solid #6868683d;
    outline-offset: 10px;
    transition: .3s ease-in-out;
}
.inner-outline:hover {
    outline: 1px solid #6868683d;
    outline-offset: 10px;
}
.outer-outline:hover {
    outline: 1px solid #ffffff5c;
    outline-offset: -10px;
}
CSS

Now you can see that when using :hover you can adjust many other things such as the outline-offset, the color and the duration of the transition.

3. CSS Snippet For Setting Global Variables

When designing a website it is of the utmost importance that all elements have the same font-sizing, spacing, and most importantly colors. We have seen some people that have to keep typing in the hex or RGB color every time they need to style something simple like a border, font color or whatever else they may need. Let's use the previous example to show how to create global variables.

:root {
    --transition: .3s ease-out all;
    --main-light-color: #ffffff5c;
    --main-dark-color: #6868683d;
}

.inner-outline {
    outline: 1px solid var(--main-light-color);
    outline-offset: -10px;
    transition: var(--transition);
}

.outer-outline {
    outline: 1px solid var(--main-dark-color);
    outline-offset: 10px;
    transition: var(--transition);;
}

.inner-outline:hover {
    outline: 1px solid var(--main-dark-color);
    outline-offset: 10px;
}

.outer-outline:hover {
    outline: 1px solid var(--main-light-color);
    outline-offset: -10px;
}
CSS

After looking at the code you can see at the top we have :root under this is where we declare our global styles in our case we created

--transition: .3s ease-out all;
--main-light-color: #ffffff5c;
--main-dark-color: #6868683d;

Now when working on our website, we can easily change our colors and our transition time instead of digging through the entire website trying to find all the different colors we used or all elements that have a transition.

4. CSS Snippet For Using Clamp() For Fluid Fonts

When designing a website another key aspect is fluid typography. Fluid typography is when your fonts dynamically change their size based on the viewport width. Here is a good website for a clamp generator. When you fill out the form you'll be presented with something like this

:root {
  --step--2: clamp(0.9113rem, 0.8922rem + 0.0951vw, 0.96rem);
  --step--1: clamp(1.0938rem, 1.0523rem + 0.2073vw, 1.2rem);
  --step-0: clamp(1.3125rem, 1.2393rem + 0.3659vw, 1.5rem);
  --step-1: clamp(1.575rem, 1.4579rem + 0.5854vw, 1.875rem);
  --step-2: clamp(1.89rem, 1.7129rem + 0.8854vw, 2.3438rem);
  --step-3: clamp(2.2681rem, 2.0098rem + 1.2915vw, 2.93rem);
  --step-4: clamp(2.7219rem, 2.355rem + 1.8341vw, 3.6619rem);
  --step-5: clamp(3.2656rem, 2.7537rem + 2.5598vw, 4.5775rem);
}
CSS

Then you take these global variables (as we discussed in the last section) and plug them into your stylesheet. It should look something like this:

h1 {
font-size: var(--step-5);
line-height: var(--step-5);
}

h2 {
font-size: var(--step-4);
line-height: var(--step-4);
}

h3 {
font-size: var(--step-3);
line-height: var(--step-3);
}

h4 {
font-size: var(--step-2);
line-height: var(--step-2);
}

h5 {
font-size: var(--step-1);
line-height: var(--step-1);
}

p {
font-size: var(--step-0);
line-height: var(--step-0);
}
CSS

Leave a Reply

Your email address will not be published. Required fields are marked *

our blog.

Related Blogs You May Enjoy

Sigma 1's Local Las Vegas Web Design Services Help Brands Stand Out

The power of a well-designed website cannot be underestimated. With our affordable web design services in Las Vegas, you can improve your company's online presence and attract…
Read More

How To Properly Create Image Cards in Bricks Builder

In this tutorial, we are going to show you how you properly create image cards in Bricks Builder. This concept applies far beyond the scope of just…
Read More

Expired Domain Scam

Today we received a contact form fill out with the following message: Notice#: 491343 Date: 2021-01-21 YOUR IMMEDIATE ATTENTION TO THIS MESSAGE IS ABSOLUTELY NECESSARY! YOUR DOMAIN…
Read More