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

The Importance of A Website in Las Vegas Part 1

Why Does Your Business Needs a Website? We encounter many different customers that always ask "Why do I need a website? My business already has customers." Our…
Read More

UI/UX Tips To Improve Your Website Conversions

It is now almost 2022 and you've probably realized that the quality of your website has a significant impact on your business. Most businesses realize they need…
Read More

How to Backup WHM/Cpanel to Amazon S3 Automatically

Keeping backups of your websites (as well as your client’s sites) is a critical part of running a business that is very often overlooked. This, unfortunately, causes…
Read More