Sigma 1 Logo
_OXY_OPENING_BRACKET_oxy-mega-menu ct_sign_sha256='1a09ff2b294aea92ec2403432c89e4a731b087902cc0c0cc5d5d2bcb5388e14f' ct_options='{"original":{"oxy-mega-menu_type":"individual","oxy-mega-menu_maybe_mouseover":"true","oxy-mega-menu_container_width":"a_none","oxy-mega-menu_slug_oxymegadropdowninner___global_dropdown_width":"360","oxy-mega-menu_slug_oxymegadropdowncontaineroxymegadropdownflyoutsubmenu_background_color":"#f7f7f7","oxy-mega-menu_-oxy-mega-dropdown-container- -oxy-mega-dropdown-flyout -sub-menu_box_shadow_box-shadow-color":"rgba(0,0,0,0.13)","oxy-mega-menu_-oxy-mega-dropdown-container- -oxy-mega-dropdown-flyout -sub-menu_box_shadow_box-shadow-horizontal-offset":"0","oxy-mega-menu_-oxy-mega-dropdown-container- -oxy-mega-dropdown-flyout -sub-menu_box_shadow_box-shadow-vertical-offset":"0","oxy-mega-menu_-oxy-mega-dropdown-container- -oxy-mega-dropdown-flyout -sub-menu_box_shadow_box-shadow-blur":"10","oxy-mega-menu_content_animation_reveal":"transform","oxy-mega-menu_slug_oxymegadropdowninneropenoxymegadropdowncontent_transition_duration":"600","oxy-mega-menu_slug_oxymegadropdowncontent___dropdown_content_translatex":"10","oxy-mega-menu_slug_oxymegadropdowncontent___dropdown_content_scale":"1","oxy-mega-menu_slug_oxymegadropdowncontent_transition_duration":"400","oxy-mega-menu_mobile_menu_below":"tablet","font-family":{"0":"global","1":"Display"},"oxy-mega-menu_force_column_collapse":"false"},"media":{"phone-landscape":{"original":{"oxy-mega-menu_slug____megamenu_responsive_background":"color(18)","oxy-mega-menu_slug_oxymegadropdownlinkoxymegamenuinnerctlinktext_padding_left":"20","oxy-mega-menu_slug_oxymegadropdownlinkoxymegamenuinnerctlinktext_padding_right":"20","oxy-mega-menu_slug_oxymegadropdownlinkoxymegamenuinnerctlinktext_padding_top":"20","oxy-mega-menu_slug_oxymegadropdownlinkoxymegamenuinnerctlinktext_padding_bottom":"20","box-shadow-color":"rgba(0,0,0,0.05)","box-shadow-horizontal-offset":"0","box-shadow-vertical-offset":"23","box-shadow-blur":"50"}},"tablet":{"original":{"oxy-mega-menu_slug____megamenu_responsive_background":"color(3)","oxy-mega-menu_slug_oxymegadropdownlinkoxymegamenuinnerctlinktext_padding_left":"20","oxy-mega-menu_slug_oxymegadropdownlinkoxymegamenuinnerctlinktext_padding_right":"20","oxy-mega-menu_slug_oxymegadropdownlinkoxymegamenuinnerctlinktext_padding_top":"20","oxy-mega-menu_slug_oxymegadropdownlinkoxymegamenuinnerctlinktext_padding_bottom":"20"}}},"classes":{},"ct_id":375,"ct_parent":374,"selector":"-mega-menu-375-13","activeselector":false}'_OXY_CLOSING_BRACKET__OXY_OPENING_BRACKET_oxy-mega-dropdown ct_sign_sha256='dd0e1ed7d7bfe73869a3599bcd3b766735d4d2b20a2ce2d313c3cbf7d0295515' ct_options='{"ct_id":376,"ct_parent":375,"selector":"-mega-dropdown-376-13","original":{"oxy-mega-dropdown_dropdown_elements":"none","oxy-mega-dropdown_link_text":"oxy_base64_encoded::SG9tZQ==","oxy-mega-dropdown_hashlink":"oxy_base64_encoded::Lw=="},"classes":{"0":"mega-header-item"}}'_OXY_CLOSING_BRACKET__OXY_OPENING_BRACKET_/oxy-mega-dropdown_OXY_CLOSING_BRACKET__OXY_OPENING_BRACKET_oxy-mega-dropdown ct_sign_sha256='0c2d09f73246efb38d783c6780f4841958a36de84967af495e849e0a7e268369' ct_options='{"ct_id":377,"ct_parent":375,"selector":"-mega-dropdown-377-13","original":{"oxy-mega-dropdown_dropdown_elements":"none","oxy-mega-dropdown_dropdown_align":"b_center","oxy-mega-dropdown_dropdown_padding_padding-top":"20","oxy-mega-dropdown_dropdown_padding_padding-left":"20","oxy-mega-dropdown_dropdown_padding_padding-right":"20","oxy-mega-dropdown_dropdown_padding_padding-bottom":"20","padding-left":"0","padding-right":"0","padding-bottom":"0","padding-top":"0","oxy-mega-dropdown_link_text":"oxy_base64_encoded::V2ViIERlc2lnbg==","oxy-mega-dropdown_dropdown_width":"b_none","oxy-mega-dropdown_slug_oxymegadropdowninner___custom_dropdown_width":"360","oxy-mega-dropdown_dropdown_relative_positioning":"link","oxy-mega-dropdown_-oxy-mega-dropdown-content_flex_flex-direction":"column","aos-enable":"false","aos-type":"flip-down","oxy-mega-dropdown_hashlink":"oxy_base64_encoded::L3dlYi1kZXNpZ24tYW5kLWRldmVsb3BtZW50LXNlcnZpY2VzLWluLWxhcy12ZWdhcw==","oxy-mega-dropdown_slug_oxymegadropdownicon_font_size":"0"},"media":{"phone-landscape":{"original":{"oxy-mega-dropdown_slug_oxymegadropdowniconsvg_transform:rotate":"270","oxy-mega-dropdown_slug_oxymegadropdownlinkoxymegadropdowninneropenoxymegadropdowniconsvg_transform:rotate":"0","oxy-mega-dropdown_slug_oxymegadropdowniconsvg_transition_duration":"400"}}},"classes":{"0":"mega-header-item"}}'_OXY_CLOSING_BRACKET__OXY_OPENING_BRACKET_/oxy-mega-dropdown_OXY_CLOSING_BRACKET__OXY_OPENING_BRACKET_oxy-mega-dropdown ct_sign_sha256='40ec6527c11c7395d394ba3da1bcbc78064ac8bb40be8b4bb18987c3581a2e85' ct_options='{"ct_id":396,"ct_parent":375,"selector":"-mega-dropdown-396-13","original":{"oxy-mega-dropdown_dropdown_elements":"none","oxy-mega-dropdown_dropdown_align":"b_center","oxy-mega-dropdown_dropdown_padding_padding-top":"20","oxy-mega-dropdown_dropdown_padding_padding-left":"20","oxy-mega-dropdown_dropdown_padding_padding-right":"20","oxy-mega-dropdown_dropdown_padding_padding-bottom":"20","padding-left":"0","padding-right":"0","padding-bottom":"0","padding-top":"0","oxy-mega-dropdown_link_text":"oxy_base64_encoded::TWFya2V0aW5n","oxy-mega-dropdown_dropdown_width":"b_none","oxy-mega-dropdown_slug_oxymegadropdowninner___custom_dropdown_width":"360","oxy-mega-dropdown_dropdown_relative_positioning":"link","oxy-mega-dropdown_-oxy-mega-dropdown-content_flex_flex-direction":"column","aos-enable":"false","aos-type":"flip-down","oxy-mega-dropdown_hashlink":"oxy_base64_encoded::L3NlYXJjaC1lbmdpbmUtb3B0aW1pemF0aW9uLWFuZC1tYXJrZXRpbmctbGFzLXZlZ2FzLw==","oxy-mega-dropdown_slug_oxymegadropdownicon_font_size":"0"},"media":{"phone-landscape":{"original":{"oxy-mega-dropdown_slug_oxymegadropdowniconsvg_transform:rotate":"270","oxy-mega-dropdown_slug_oxymegadropdownlinkoxymegadropdowninneropenoxymegadropdowniconsvg_transform:rotate":"0","oxy-mega-dropdown_slug_oxymegadropdowniconsvg_transition_duration":"400"}}},"classes":{"0":"mega-header-item"}}'_OXY_CLOSING_BRACKET__OXY_OPENING_BRACKET_/oxy-mega-dropdown_OXY_CLOSING_BRACKET__OXY_OPENING_BRACKET_oxy-mega-dropdown ct_sign_sha256='f7ef418f448ac3d1684c16d9e696484597ebbb46f0a9c170fe974525fbda3d72' ct_options='{"ct_id":502,"ct_parent":375,"selector":"-mega-dropdown-502-13","original":{"oxy-mega-dropdown_link_text":"oxy_base64_encoded::UG9ydGZvbGlv","oxy-mega-dropdown_hashlink":"oxy_base64_encoded::L3BvcnRmb2xpbw==","oxy-mega-dropdown_slug_oxymegadropdownicon_font_size":"0"},"activeselector":false}'_OXY_CLOSING_BRACKET__OXY_OPENING_BRACKET_/oxy-mega-dropdown_OXY_CLOSING_BRACKET__OXY_OPENING_BRACKET_oxy-mega-dropdown ct_sign_sha256='1f873dd577dc97265fc1393a312bd112f1e4d68b4d26da056f2de57cf37c9644' ct_options='{"ct_id":506,"ct_parent":375,"selector":"-mega-dropdown-506-13","original":{"oxy-mega-dropdown_link_text":"oxy_base64_encoded::QmxvZw==","oxy-mega-dropdown_hashlink":"oxy_base64_encoded::L2Jsb2c=","oxy-mega-dropdown_slug_oxymegadropdownicon_font_size":"0"},"activeselector":false}'_OXY_CLOSING_BRACKET__OXY_OPENING_BRACKET_/oxy-mega-dropdown_OXY_CLOSING_BRACKET__OXY_OPENING_BRACKET_oxy-mega-dropdown ct_sign_sha256='5a5d8ee9e8f4ea98ce6634f379d92a0bf84958f892b065444d1f4c13330ef088' ct_options='{"ct_id":508,"ct_parent":375,"selector":"-mega-dropdown-508-13","original":{"oxy-mega-dropdown_link_text":"oxy_base64_encoded::QWJvdXQ=","oxy-mega-dropdown_hashlink":"oxy_base64_encoded::L2Fib3V0LW91ci13ZWItZGVzaWduLW1hcmtldGluZy1maXJtLWFuZC10ZWFt","oxy-mega-dropdown_slug_oxymegadropdownicon_font_size":"0"},"activeselector":false}'_OXY_CLOSING_BRACKET__OXY_OPENING_BRACKET_/oxy-mega-dropdown_OXY_CLOSING_BRACKET__OXY_OPENING_BRACKET_oxy-mega-dropdown ct_sign_sha256='f3d33c15ea4e290c195a079ffc92a69c0d2593ca09542200f7f1ab4446304c54' ct_options='{"ct_id":511,"ct_parent":375,"selector":"-mega-dropdown-511-13","original":{"oxy-mega-dropdown_dropdown_elements":"none","oxy-mega-dropdown_link_text":"oxy_base64_encoded::QXBwb2ludG1lbnQ=","oxy-mega-dropdown_hashlink":"oxy_base64_encoded::L2NvbnRhY3Q="},"activeselector":false}'_OXY_CLOSING_BRACKET__OXY_OPENING_BRACKET_/oxy-mega-dropdown_OXY_CLOSING_BRACKET__OXY_OPENING_BRACKET_/oxy-mega-menu_OXY_CLOSING_BRACKET_

4 Helpful CSS Snippets For Your Next Company Website

Published On:
Reading Time:

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

_OXY_OPENING_BRACKET_oxy-table-of-contents ct_sign_sha256='df0ed18cd3a61e22618d95da83db86b8d997ad5c0f39f039c6603d7eb00ff1f2' ct_options='{"ct_id":205,"ct_parent":208,"selector":"-table-of-contents-205-104","original":{"oxy-table-of-contents_heading_selectors":"h2,h3,h4","oxy-table-of-contents_content_selector":".blog-text","oxy-table-of-contents_title_tag":"p","oxy-table-of-contents_-oxy-table-of-contents-title_typography_font-weight":"600","oxy-table-of-contents_-oxy-table-of-contents-title_typography_font-size":"24","oxy-table-of-contents_slug_oxytableofcontentslinkisactivelink_color":"color(16)","oxy-table-of-contents_maybe_autoid":"true","oxy-table-of-contents_smooth_scroll_offset":"150","oxy-table-of-contents_maybe_auto_link":"false","oxy-table-of-contents_heading_link_icon":"FontAwesomeicon-question-circle-o","oxy-table-of-contents_main_title_margin_margin-bottom":"0","oxy-table-of-contents_main_title_margin_margin-top":"0","globalconditions":{"0":{"name":"Post Tag","operator":0,"value":"dG9j","searchValue":"dG9j"}},"oxy-table-of-contents_list_item_padding_padding-bottom":"10","oxy-table-of-contents_collapse_depth":"0","oxy-table-of-contents_context_type":"border","background-color":"color(7)","z-index":"99999","oxy-table-of-contents_slug_oxytableofcontentstitle_color":"color(16)","oxy-table-of-contents_slug_oxytableofcontentslink_color":"color(6)","oxy-table-of-contents_collapsed_below":"page-width"},"activeselector":false,"classes":{"0":"c-margin-bottom-m"},"media":{"tablet":{"original":{"display":"none"}}}}'_OXY_CLOSING_BRACKET__OXY_OPENING_BRACKET_/oxy-table-of-contents_OXY_CLOSING_BRACKET_
Sigma 1 Logo

Signup For Our Newsletter

Stay up to date with the newest trends in technology, exclusive offers & discounts from our company, and new products and services that we are offering.

Want to Hire Us For Your Next Project?

We work with all different types of companies from around the world with one goal in mind - to help them grow their brand and acquire new customers.
Contact Us

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

Sigma 1 Logo

Signup For Our Newsletter

Stay up to date with the newest trends in technology, exclusive offers & discounts from our company, and new products and services that we are offering.

Want to Hire Us For Your Next Project?

We work with all different types of companies from around the world with one goal in mind - to help them grow their brand and acquire new customers.
Contact Us
Dimitri is is a full-stack developer and the founder of Sigma 1. He spends the majority of his time designing websites for customers. However, when he has a bit of free time, you can catch him on a hike or exploring the nature around Las Vegas.

Leave a Reply

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

Leave a Reply

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