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

We are working on a new website for a client (will release URL soon) where they wanted a page for customer testimonials. One of the requirements of the project was to add a new div element in between testimonials on the page. We were using the Repeater element in Oxygen, however, this tutorial can easily be applied with the Easy Posts element.

While potential customers are reading testimonials, it presents a unique opportunity for us to slip information between the testimonials as a way to capture their attention and bring the visitor to a page that is important (in this case the donation page & adopt an animal page). If you look at the image below you can see what we mean by this. This is unique because as customers fill out testimonials, the two blocks we added (Donate and Adopt) stay in the same place and the testimonials move around them.

The code for the repeater function is:

jQuery(document).ready(function(){

jQuery('#div_block-253-1605').insertBefore('.repeater-container:nth-child(3)');
});
JavaScript

And the code for the Easy Posts element is:

jQuery(document).ready(function(){

jQuery('#div_block-7-1610').insertBefore('.oxy-post:nth-child(3)');
});
JavaScript

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 sigma1.com WILL BE TERMINATED WITHIN 24 HOURS We have not received your payment for the renewal of your domain sigma1.com

We have made several attempts to reach you by phone, to inform you regarding the TERMINATION of your domain sigma1.com

CLICK HERE FOR SECURE ONLINE PAYMENT: LINK REMOVED FOR YOUR SECURITY

IF WE DO NOT RECEIVE YOUR PAYMENT WITHIN 24 HOURS, YOUR DOMAIN sigma1.com WILL BE TERMINATED

CLICK HERE FOR SECURE ONLINE PAYMENT: LINK REMOVED FOR YOUR SECURITY ACT IMMEDIATELY.

The submission notification sigma1.com will EXPIRE WITHIN 24 HOURS after reception of this email

This type of scam involves scaring the reader into clicking on the link in hopes of resolving the issue before their domain gets deleted. If you get this notification, simply log into your registrar and see the status or just call them and see your status.

We have had a few people ask us how we managed to get our sidebar to "stick" as your scroll down the page. So we decided to write a tutorial about it! If you look at one of our longer blog posts you can see that as you scroll down the page the side bar moves with you. We do this to highlight our important information like signing up for our newsletter and providing a quick way for people to get in contact with us should they happen to like out blog.

We have seen tons of implementations of using a plugin to make items sticky throughout the website. However, this is the best way to do it as it is less than 20 lines of CSS, mobile responsive, and you don't need a plugin!


@media only screen and ( min-width: 1405px ) {
 .sticky-column {
  position: sticky !Important;
  position: -webkit-sticky !Important;
  top: 150px !Important; /* Change the height from the top here */
 }
}
@media only screen and ( min-width: 1100px ) and ( max-width: 1405px) {
 .sticky-column {
  position: sticky !Important;
  position: -webkit-sticky !Important;
  top: 150px !Important; /* Change the height from the top here */
 }
}
CSS

Let's break down this code, shall we?

  1. We are using CSS media queries to ensure that it is compatible with all different devices.
  2. If you look at top: 150px it is how many pixels that the column is spaced from the top. In our case we are using a fixed header so it looks less than 150px but you will most likely need to adjust it to suit your needs

Then to use it, you simply create a two column layout like you see on this blog posting right in front of you. On the column you want sticky, just add the class .sticky-column and you are good to go! Another cool feature is you do not need to make a column sticky per se, but you can also make any element sticky as well. Just assign it .sticky-column and you are good to go. On second thought, if you are going to assign it to elements, change the selector to something more universal to help keep your code organized & clean.

ACF is a great plugin that allows you to make dynamic websites with ease. When we have a client that wants to manage, update and add new content to their website we set up ACF so they can manage it with ease. One field we like to use is the "Page Link" field that allows them to select a page that they want a page or a button to link to. Using this field is slightly different and less straightforward than the others.

Here is the code:

function sigma1_get_button_link($button_id){

$page_id = get_field($button_id, false, false );
if( $page_id ):
    return get_the_permalink( $page_id );
    echo get_the_title( $page_id );
endif;
}
PHP

For this blog post, we will show you how to add even more CSS hover animations for links and/or menu items. If you want to see the first post check out here

We have provided a few more CSS hover animations that have a similar look and feel that will help enhance the style of your website.

The first style is the initial one we wrote about on our previous blog. This underline grows from the right.

Grows From Left

 
a.left-hover
{
    position: relative;
}
a.left-hover:before {
  content: "";
  position: absolute;
  width: 0;
  height: 5px;
  bottom: 0;
  left: 0;
  background-color: #8c61ff;
  visibility: hidden;
  transition: all 0.3s ease-in-out;
}
a.left-hover:hover:before {
 visibility: visible;
  width: 100%;
}
CSS

The next animation is very similar, but this one grows from the right

Grows From Right

a.right-hover
{
    position: relative;
}
a.right-hover:before {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  bottom: 0;
  right: 0;
  background-color: #8c61ff;
  visibility: hidden;
  transition: all 0.3s ease-in-out;
}
a.right-hover:hover:before {
  visibility: visible;
  width: 100%;
}
CSS

For our last animation, we will animate the bottom border to come from the middle outward.

Grows From Middle

a.middle-hover
{
    position: relative;
}

a.middle-hover:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #8c61ff;
  visibility: hidden;
  transform: scaleX(0);
  transition: all 0.3s ease-in-out;
}
CSS

When designing a website for our client Sterling Wealth Management we decided to take a modern approach and utilize underlined words to draw attention and add emphasis. An example of this would be:

Look at this underlined word

As you can see your eyes are directly focused on the word that is underlined giving you the ability to draw attention to specific parts of the page. To add this code simply place the following CSS into your stylesheet:

.underline-word {
    display: inline-block;
    position: relative;
    padding: 0 10px;
}
.underline-word::after{
    content: '';
    width: 100%;
    height: 30%;
    position: absolute;
    bottom: 0%;
    left: 0;
    background: #8c61ff;
    z-index: -1;
}
CSS

Once that is added then you simply call it into your HTML markup by using the following:

<h2>Look at this underlined <span class="underline-word">word</span></h2>
HTML, XML, Markup

If you look at the above CSS snippet, you can see several different styles being rendered, however, the one you are probably most interested in is the one regarding the color - background: #8c61ff; simply change that with any other color value and you're ready to go!

Recently we received a fill out through our contact form that was quite concerning to us so we decided to post on our website about it in hopes of helping at least one other person. The submitted information contained the following message:

"Hello, This is Melonie and I am a qualified photographer and illustrator. I was confused, to put it nicely, when I found my images at your website. If you use a copyrighted image without an owner's consent, you need to be aware that you could be sued by the copyright holder. It's illegal to use stolen images and it's so wicked! Take a look at this document with the links to my images you used at sigma1.com and my earlier publications to get the evidence of my copyrights. Download it right now and check this out for yourself: REMOVED LINK FOR YOUR SAFETY If you don't get rid of the images mentioned in the file above during the next few days, I'll file a complaint on you to your hosting provider stating that my copyrights have been severely infringed and I am trying to protect my intellectual property. And if it is not enough, trust me I am going to take legal action against you! And you won't receive the second notice from me."

This type of scam is designed to scare the website owner or reader into clicking the link in hopes of resolving a potential lawsuit. Do not click on it! These types of links typically have malware or other types of malicious software.

When we design websites for not just ourselves but for our clients, we ensure that we either use royalty-free images/videos or we directly purchase the rights.

Adding a call to action button on your menu is a great way to draw attention to a specific page for your website and increase conversion.

As can be seen on our menu, we have a CTA Button that links to our contact page but you can link it to your store, a pricing page, or whatever you want.

To start with, go to your menu sections on the backend (Appearance -> Menus), and create a menu item for your desired page.

 

On the menus section, look to the top right corner of the screen and locate “Screen Options” and then check “CSS Classes”. This will enable you to add CSS to individual menu items.

Go to your desired menu tab and add the CSS class you decide to use. In our case, we use cta-button which is consistent with the code we provide below.

Go to your stylesheet and paste this code into it:

.cta-button {
 border: 1px solid #4380ed;
 border-radius: 30px;
 background: #4380ed;
 /* box-shadow: 0px 0px 12px 3px #4A76A0; */
 transition: all .3s 0s;
 margin-bottom: 15px;
 }

 

.cta-button a {
padding: 18px !important;
color: white !important;
}

.cta-button:hover {
transform: scale(1.1);
transition: all .2s 0s;
background: #4380ed;
color: #ffffff;
border: 1px solid #4380ed;
box-shadow: 0 12px 24px -6px #4380ed;
}

You can customize the above code to suit your needs.

Bringing SEO and SERP optimization into line with a quality interface is the Holy Grail of web design. This means that your website shouldn’t only look fantastic and offer a world-class user experience, but also rank higher in search engine results pages (SERPs). Well, then, how do you ensure that your web-site design is perfectly compatible with SEO?
Of course, the simplest way is to engage SEO Services in Las Vegas and let professionals do all the leg-work for you. With their experience, know-how, and resources, they can help your website SEO and design reach a state of harmony. On the other hand, if you’re planning on taking a D-I-Y approach, here’s what you need to know:

A Site Should Be Complex Enough To Serve Its Purpose, But Also Sparse Enough Not To Confuse It.

One of the easiest ways to make a well-designed website compatible with SEO is to tighten up the website design. With fewer elements in a less complicated layout, your website becomes more accessible for the bots that search engines use to index your website. No doubt, if your site can play nice with Google bots, it’s more likely to rank higher in Google.

Building the Perfect Website

Visually, this results in a more straightforward, less cluttered design. This also has the added benefit of making your website easier for users to scan and comprehend. Try to visualize some of the most successful sites out there. Think of what Google’s homepage looks like or how easy it is to scan down a Twitter feed. This is the type of simple design your website should aspire to achieve.
Selecting the Right Pictures for SEO

High-Quality Graphics And Good SEO Cannot Co-Exist, Right? Ermm, Not Really!

Although many websites still dump their most vivid graphics into JPEGs, this does more harm than good, primarily when sites use JPEGs in the headers of a page. Google likes signals that appear near the top of a page, and to waste that opportunity on florid graphics work is a poor choice.

So, does this mean that you have to wipe all the make-up off your website’s face and make it walk plain out in the light of day? Well, no. With the advent of web fonts, it’s possible to embed gorgeous graphics into SEO-friendly elements, like the H1 tag. There’s no need to compromise: put the H1 tag into the page and then style it using web fonts. This way, you get to keep your gorgeous graphics-intensive design, and you also get all the SEO benefits of well-purposed headers. It’s a win-win.

Keep in mind that designing a website that's SEO-friendly is anything but easy. So, even if you have a wee bit of knowledge about website design, it’s always a smarter decision to engage professional Las Vegas web design services to bring your website SEO and web design into line.