DEV Community: Gaurav

Long time no see.

Gaurav — Mon, 12 Dec 2022 05:02:45 +0000

Hello everyone! How are you? Hope everyone is doing great. Nice to see you guys after a looooooooooooooooong time. I will be actively writing stuff from now. ❤❤

6 amazing free tools that will save you some time when u are building websites. (Especially for 'non-designer' developers)

Gaurav — Fri, 19 Mar 2021 15:00:07 +0000

Hello everyone, hope you are doing great! In this short article, I am writing about 6 free tools that save me a lot of time when I am building websites. I hope you will also find these tools helpful. let's get into the article.

1. Type Scale

Do you often struggle to define the perfect font sizes for your elements? If yes then this is the perfect tool for you.

All you have to do is add your base font size once you do that this tool will generate different font sizes for different elements.(H1,H2,H3 etc.)
Also, you can select different fonts from google fonts and try different scales for your font size.

The best feature of this tool is you can literally copy the CSS generated according to your choices and paste it into your CSS file. It also imports the font you selected and sets the font-family for yourhtml`. Then you don't have to define font sizes everywhere!

2. Happy Hues

If you don't understand how to apply color palettes to your web designs then this is a great place to start.

This tool not only shows amazing color palettes but also acts as a real-world example of how the colors could be used in your design projects.

It shows, which colors to use for which elements and also how to use colors in your illustrations so that the illustrations match your design.

3. Fontjoy

This tool simply generates font pairs that you can use in your designs. You can choose the contrast you want and hit generate to get font pairs that go together well.

4. CSS Peeper

CSS Peeper is a chrome extension that you can use to inspect styles from different websites in a well-organized and beautiful way. It organizes the colors, fonts used in the website. Also, if you like a certain element on a webpage you can get all the CSS used for creating that element.

5. avataaars generator

With this tool, you can generate amazing avatars to use in your designs. There are multiple styles to choose from and you can export the avatar in different formats like png, SVG, and also you can get react code or image link directly. All for free!

6. brumm.af

With this tool, you can create amazing box shadows. You can add multiple layers to your shadows and adjust every part of it to create awesome-looking smooth shadows.!

Hope you find this article useful. If you did then please share it and also you can follow me on Twitter @devggaurav

Thank u so much for reading! 😀

Learning about CSS pseudo-elements by building simple things - Part 1: Button and link hover effects.

Gaurav — Tue, 16 Mar 2021 07:44:15 +0000

Hello everyone! Hope u r doing great. So the thing is I still struggle with understanding CSS pseudo-elements. I don't understand how they work and where and how we can use them. So I decided to learn them one by one and write about my learnings. In this series of articles, I will be building simple things with CSS pseudo-elements to understand them better. This is part 1 of this series and in this article we will be building button and link hover effects using ::before and ::after pseudo-elements.

1. Button hover effect.

Lets start with the HTML.

<button class="cta-1">
   <span>Button Hover</span>
</button>

Here we have a button with the class of cta-1. Inside the button we have a span with the button text.

Now let's add the CSS reset.

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html{
    font-size: 62.5%;
    font-family: 'Roboto', sans-serif;
}

This is the basic CSS we will need to remove some of the default styles from the elements.

After this, let's add the basic styles for our button.


.cta-1 {
    position: relative;
    padding: 12px 24px;
    border: none;
    font-size: 1.6rem;
    background-color: #E0E7FF;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
}

.cta-1:active, .cta-1:focus{
    outline: none;
}

.cta-1 span{
    position: relative;
    color: #4F46E5;
    transition: all 0.6s ease;
}

Here we are setting the position: relative on both the button and the span so that later, we can set position: absolute on the ::before pseudo-element. And the transition is for the hover effect. All other styles are for basic styling.

After these styles, our button will look like this

The pseudo-element.

For the hover effect we will basically add the ::before pseudo-element for our button
Then we will add height, width and position: absolute top: 0 left: 0 to the pseudo-element so it sits in between the span and the button .
And after this we will add transform: scaleX(0) transform-origin: 100% (More on this in next step)

So, let's add this CSS

.cta-1::before {
    content: '';
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background: #4F46E5;
    transform: scaleX(0);
    transform-origin: 100%;
    transition: transform 0.6s ease;
}

The Hover effect

For the hover effect to happen, we are just going to scale our ::before pseudo-element on hover effect and change the color of our span (which is our button text).

.cta-1:hover::before  {
    transform-origin: 0;
    transform: scaleX(1);
}

.cta-1:hover span{
    color: #E0E7FF;
}

Final result:

Tip!: You can play with the transform-origin property to try and get different hover effects.

2. Link hover effect.

For the link, it's pretty much the same. Let's start with the basic HTML and CSS.

<a href="#" class="link-1">Link Hover</a>

.link-1 {
    position: relative;
    color: #475569;
    font-size: 1.8rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

Now we will add the ::after pseudo-element for the link and position it below our link by setting position: absolute,bottom: 0, left:0
Then we will add height and background-color to our ::after pseudo-element so that we can see it.
And finally, we will add transform: scaleX(0) and transform-origin: bottom left on it so it stays hidden by default.

  .link-1::after {
    content: '';
    width: 100%;
    position: absolute;
    height: 3px;
    bottom: 0;
    left: 0;
    background-color: #4F46E5;
    transform: scaleX(0);
    transform-origin: bottom left;
    transition: all 0.3s ease;
  }

Now we will just scale the speudo element and change the color of our link on hover to see our hover effect.

  .link-1:hover{
      color: #4F46E5;
  }

  .link-1:hover::after {
    transform: scaleX(1);
  }

Tip!: You can play with the transform-origin property to try and get different hover effects.

Final result:

That was it for this little article. I got to learn so much from this. And I hope you also find this useful. Thank u so much! 😀

Let's build a responsive navbar and hamburger menu using HTML, CSS, and Javascript.

Gaurav — Sat, 13 Mar 2021 09:08:24 +0000

Hello everyone! In this tutorial lets build a responsive navbar and hamburger menu using html,css and a little bit of javascript.

This is how it will look,

Github link :

dev-ggaurav / responsive-hamburger-tutorial

So let's start with the HTML,


 HTML
<header class="header">
        <nav class="navbar">
            <a href="#" class="nav-logo">WebDev.</a>
            <ul class="nav-menu">
                <li class="nav-item">
                    <a href="#" class="nav-link">Services</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">Blog</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">About</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">Contact</a>
                </li>
            </ul>
            <div class="hamburger">
                <span class="bar"></span>
                <span class="bar"></span>
                <span class="bar"></span>
            </div>
        </nav>
</header>

Here, we have

header with the class of header which work as a container of our navbar
nav with the class of navbar
a link with the class of nav-logo
ul with the class of nav-menu
inside the ul we have 4 lis with the class of nav-item
inside each nav-item we have a link with the class of nav-link
for our hamburger I have added a div with the class of hamburger and inside which we have 3 spans with the class of bar

So this is the HTML that we need.

Now let's add the CSS reset

(Here we will import the font we need and add some basic CSS to reset all the default styles.


 CSS
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,500;1,400&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 62.5%;
    font-family: 'Roboto', sans-serif;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
}

Now let's add styles to the elements one by one,

header and navbar


 CSS
.header{
    border-bottom: 1px solid #E2E8F0;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
}

hamburger styles


 CSS
.hamburger {
    display: none;
}

.bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    background-color: #101010;
}

basic styles for our other elements ``` CSS .nav-menu { display: flex; justify-content: space-between; align-items: center; }

.nav-item {
margin-left: 5rem;
}

.nav-link{
font-size: 1.6rem;
font-weight: 400;
color: #475569;
}

.nav-link:hover{
color: #482ff7;
}

.nav-logo {
font-size: 2.1rem;
font-weight: 500;
color: #482ff7;
}

### After this, It should look like this,

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bn6yu5tlo21go91u1tlh.png)

# But It's not responsive yet, so let's add the media queries.

CSS
@media only screen and (max-width: 768px) {
.nav-menu {
position: fixed;
left: -100%;
top: 5rem;
flex-direction: column;
background-color: #fff;
width: 100%;
border-radius: 10px;
text-align: center;
transition: 0.3s;
box-shadow:
0 10px 27px rgba(0, 0, 0, 0.05);
}

.nav-menu.active {
    left: 0;
}

.nav-item {
    margin: 2.5rem 0;
}

.hamburger {
    display: block;
    cursor: pointer;
}

}

What this media query does is, hides our `nav-menu` by setting `position: fixed;`  `left: -100%;` on it.
Also, we set our `hamburger` to `display: block;` so it's visible now. 
We have also added an extra class that is `.nav-menu.active` which sets `left: 0;` on the `nav-menu`. Now we will have to add the javascript which will add this `active` class on the nav-menu when we click our hamburger.

# Let's add the javascript.

Javascript
const hamburger = document.querySelector(".hamburger");
const navMenu = document.querySelector(".nav-menu");

hamburger.addEventListener("click", mobileMenu);

function mobileMenu() {
hamburger.classList.toggle("active");
navMenu.classList.toggle("active");
}


Here the function `mobileMenu()` also adds an `active` class on our `hamburger` and our `nav-menu` which makes our mobile menu open.  we can use the active class on the hamburger to create that X animation when we click on the `hamburger`. so let's do that now.

CSS
// Inside the Media Query.

.hamburger.active .bar:nth-child(2) {
    opacity: 0;
}

.hamburger.active .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.hamburger.active .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

### It should look like this now,
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gct0bbbmkpj4vugpq6rw.gif)


## But there is a catch, the hamburger menu doesn't close when we click a link. So let's add that now,

Javascript
const navLink = document.querySelectorAll(".nav-link");

navLink.forEach(n => n.addEventListener("click", closeMenu));

function closeMenu() {
hamburger.classList.remove("active");
navMenu.classList.remove("active");
}


The `closeMenu()` function removes the `active` class from both the `nav-menu` and the `hamburger` which makes our mobile menu close.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q5h5uh2ed6a7esevmulw.gif)

So that's it guys we built a responsive navbar and hamburger menu with HTML CSS and javascript. Hope u liked it. Share this article. Thank you 😀

5 super under-rated free tools/resources I use almost every day. (As a Frontend developer)

Gaurav — Thu, 11 Mar 2021 06:36:02 +0000

Hello everyone! Let's get straight into the list of 5 tools/resources I use almost every day as a frontend developer and UI designer. Of course, I use many more tools and resources in my creative process but these are the more underrated ones.

1. ScreenToGif

With this tool, we can record our screen and export the clip as a gif. Some of its amazing features include -

Recording a specific part of your screen with the area selector.
Recording with webcam.
Drawing on the screen while you are recording with the board feature.

Also, this tool is completely free and open-source on GitHub! Definitely worth a try.

2. Responsively

With this amazing tool or as they call it 'A web developer's browser you can see how your website will look on different devices. For example, here's what my website looks like on different devices

There are more than 40 devices you can choose from and check the responsiveness of your website. There are some glitches here and there but it works pretty great for the most part. Also, the community is constantly improving it because it is free and open-source!

3. DevDocs

Devdocs is a free resource where you can find documentation for pretty much every technology used in web development. You can download it as a PWA on your desktop or even your phone. Also, you can download documentation of your favourite technologies for offline reading.

4. Undesign

Undesign is a collection of free resources for developers and designers. The resources are divided into 45 categories like Inspiration, Colors, Gradients, Illustrations, Templates, etc. Also, you can install it as a PWA.

5. Colorsinspo

This is probably the only tool most people will need when it comes to choosing colors and color palettes for their projects. It has premade color palettes, solid colors, gradients, brand colors, etc. and you can also install it as a plugin for Adobe XD.

So these were my favorite 5 tools that I use almost every single day. If you find it useful please share this post. Thank you😀

Build a simple card skeleton loader component using HTML and CSS.

Gaurav — Mon, 08 Mar 2021 08:40:31 +0000

Hello everyone! In this tutorial, let's build a simple skeleton loader component using HTML and CSS. You can then use this component in your websites/apps as a fallback option before your main content loads.

Step 1. - HTML

We will create a card and its skeleton loader, so let's start with adding the HTML for both the card and the skeleton.

HTML for the card

<div class="card">
          <div>
              <img class="card-img" src='https://avataaars.io/?avatarStyle=Transparent&topType=ShortHairShortWaved&accessoriesType=Prescription01&hairColor=Black&facialHairType=Blank&clotheType=Hoodie&clotheColor=Blue03&eyeType=Default&eyebrowType=Default&mouthType=Twinkle&skinColor=Light'/>
          </div>
          <div class="card-text">
              <h2 class="card-title">Gaurav Gawade</h2>
              <p class="card-description">
                 <span>Lorem ipsum dolor sit amet consectetur, adipisicing eli.</span> 
              </p>
              <ul class="card-skills">
                  <li class="skill">UI Designer.</li>
                  <li class="skill">UX Designer.</li>
                  <li class="skill">Web Developer.</li>
              </ul>
              <a href="#" class="card-link">Read More</a>
          </div>
 </div>

HTML for the skeleton

(We are going to keep the basic structure the same as the card but we will remove the content. Also, change the classes on the elements')

<div class="skeleton">
          <div class="skeleton-img"></div>
          <div class="skeleton-text">
              <h2 class="skeleton-title"></h2>
              <p class="skeleton-description">
                <span></span>
                <span></span>
              </p>
              <ul class="skeleton-skills">
                  <li class="skill"></li>
                  <li class="skill"></li>
                  <li class="skill"></li>
              </ul>
              <a href="#" class="skeleton-link"></a>
          </div>
</div>

Step 2 - Adding the common styles for the card and the skeleton.

(For the consistent look)

    .card,
    .skeleton {
      display: flex;
      justify-content: space-around;
      padding: 20px;
      max-width: 400px;
      height: 155px;
      margin: 20px;
      border-radius: 10px;
      background-color: #E2E8F0;
      box-shadow:
        0 9px 33px rgba(0, 0, 0, 0.07);
    }


    .card-text, .skeleton-text{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 250px;
        margin-left: 10px;
    }


    .card-img, .skeleton-img{
        width: 75px;
        height: 75px;
        border-radius: 50%;
    }


    .card-description, .skeleton-description{
        margin: 10px 0;
    }


    .card-link, .skeleton-link{
        margin-top: 20px;
    }


    .card-skills , .skeleton-skills{
        display: flex;
        justify-content: space-between;
    }

Step 3 - Adding the Card-specific styles.

(Font sizes, colors, etc)

    .card-img{
        background-color: #4F46E5;
    }

    .card-title{
        font-size: 16px;
        color: #334155;
    }

    .card-description{
        font-size: 12px;
        color: #64748B;
    }

    .card-skills .skill {
        font-size: 12px;
        font-weight: 600;
        color: #475569;
    }

    .card-link{
        font-size: 12px;
        color: #4F46E5;
    }

Step 4 - Adding the skeleton specific styles

(Here, we will specify the height, width, and background color of the skeletons.)

.skeleton-img{
        animation: pulse 2s infinite ease-in-out;
    }

    .skeleton-description span:nth-child(1){
        display: block;
        width: 210px;
        height: 10px;
        background-color: #94A3B8;
    }

    .skeleton-description span:nth-child(2){
        display: block;
        width: 150px;
        height: 10px;
        background-color: #94A3B8;
        margin-top: 5px;
    }

    .skeleton-skills .skill{
        width: 65px;
        height: 12px;
        background-color: #94A3B8;
    }

    .skeleton-link{
        width: 75px;
        height: 12px;
        background-color: #94A3B8;
    }

Now The card and the skeleton should look like this

We are almost there! Now let's add the subtle animation on the skeletons

Step 5 - Adding the animation

    @keyframes pulse {
        0% {
            background-color: #94A3B8;
        }

        50% {
            background-color: #CBD5E1;
        }

        100% {
            background-color: #94A3B8;
        }
    }

Now we can add this animation on all the skeletons and remove the background color.

// replace all styles from skeletons with these styles

    .skeleton-title{
        width: 150px;
        height: 12px;
        animation: pulse 2s infinite ease-in-out;
    }

    .skeleton-img{
        animation: pulse 2s infinite ease-in-out;
    }

    .skeleton-description span:nth-child(1){
        display: block;
        width: 210px;
        height: 10px;
        animation: pulse 2s infinite ease-in-out;
    }

    .skeleton-description span:nth-child(2){
        display: block;
        width: 150px;
        height: 10px;
        animation: pulse 2s infinite ease-in-out;
        margin-top: 5px;
    }

    .skeleton-skills .skill{
        width: 65px;
        height: 12px;
        animation: pulse 2s infinite ease-in-out;
    }

    .skeleton-link{
        width: 75px;
        height: 12px;
        animation: pulse 2s infinite ease-in-out;
    }

Final Demo

Hope you find this useful in some way. I apologize for my writing I am really bad at explaining code 😅
Thank u so much🙂

Let's build 3 essential website layouts using Tailwind CSS. 1.Pancake, 2.Sidebar and 3.Pancake with double sidebars.

Gaurav — Sat, 06 Mar 2021 15:04:05 +0000

Hello everyone!😀 In this mini-article let's learn to build 3 essential website layouts using Tailwind CSS which are,

Pancake Layout
Sidebar Layout
Pancake layout with double sidebars

1. Pancake Layout

<div class="parent h-screen bg-gray-400 flex flex-col text-center">
      <header class="bg-red-400 p-4">Header</header>
      <main class="bg-green-400 flex-1">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi numquam rerum, perspiciatis atque cumque dolore quod repudiandae neque facilis voluptatibus incidunt laudantium accusantium tempora doloribus a, consectetur repellendus vero quisquam omnis alias. Molestias necessitatibus accusamus nam numquam perferendis tempora nobis dicta dolor porro non voluptatem esse quia animi sit obcaecati, placeat nulla omnis recusandae magnam natus debitis voluptatum. Eveniet aliquam quis totam quia quod quidem ullam dicta expedita illum enim sit dolor dolorum veritatis dolore reprehenderit, repellendus incidunt similique maiores est? Odio, ipsam possimus? Quasi maxime impedit sit sed quam officia tempore, corporis asperiores cum minus fuga exercitationem dolores ipsam possimus saepe, provident nostrum corrupti sapiente alias eos a nam nihil ullam. Consequatur, beatae illo sunt atque ipsam tenetur et, laudantium architecto dolorem velit blanditiis magnam incidunt possimus impedit ad cupiditate laborum voluptates reprehenderit quasi ducimus ut quas accusantium. Dolores, incidunt consequatur atque consectetur aperiam saepe soluta rerum repellat?
      </main>
      <footer class="bg-blue-400 p-4">Footer</footer>
</div>

So, there are 4 elements here i.e. a parent container, the header, the main content with some lorem ipsum text, and the footer. Now let's see what all the Tailwind CSS classes do for each element.

1. Parent container classes.

h-screen: this class gives the parent height of 100vh
bg-gray-400: this class gives it a background color of gray
flex: for adding display:flex
flex-col: adds flex-direction:column on the parent
text-center: adds text-align:center

2. Header classes.

bg-red-400: gives background color of red
p-4: adds padding on the header

3. Main section classes.

bg-green-400: gives background color of green
flex-1(most imp class): adds flex-1 on the main section so it takes the maximum space of the viewport.

4. Footer classes.

bg-blue-400: gives background color of blue
p-4: adds padding on the footer

Codepen link : Pancake Layout codepen

2. Sidebar Layout

For this layout, we are adding the 'md' prefix to most of our classes so the sidebar only shows on devices with width more than 768px.

<div class="parent md:h-screen md:grid md:grid-cols-6">
      <section class="sidebar bg-green-400 md:col-span-1">Sidebar</section>
      <main class="main bg-blue-400 md:col-span-5">Main</main>
</div>

So, there are 3 elements here i.e. a parent container, the sidebar, and the main content section. Now let's see what all the Tailwind CSS classes do for each element.

1. Parent container classes.

md:h-screen: this class gives the parent height of 100vh
md:grid: adds display:grid on the parent container.
md:grid-cols-6: adds grid-template-columns: repeat(6, minmax(0, 1fr)) on the parent container.

2. Sidebar classes.

bg-green-400: gives background color of green
md:col-span-1: adds grid-column: span 1 / span 1 on the sidebar so it spans across 1 column of the grid

3. Main content section classes.

bg-blue-400: gives background color of blue
md:col-span-5: adds grid-column: span 5 / span 5 on the main section so it spans across 5 columns of the grid.

Codepen link : Sidebar Layout codepen

3. Pancake layout with double sidebar.

So, for this layout, we are going to basically combine the previous 2 layouts so I am not going to explain all these classes again (they all are the same as the previous 2 layouts😅)

<div class="parent text-center flex flex-col h-screen">
      <header class="bg-green-400 p-4">Header</header>
      <main class="bg-gray-400 flex-1 flex">
          <div class="sidebar-1 bg-yellow-400 p-4">Sidebar 1</div>
          <div class="content flex-1">Content</div>
          <div class="sidebar-2 bg-yellow-400 p-4">Sidebar 2</div>
      </main> 
      <footer class="bg-blue-400 p-4">Footer</footer>
</div>

Codepen link : Pancake double Sidebar Layout codepen

Hope u find this useful. Thank u! 😀

Let's create a custom toggle switch using HTML and CSS.

Gaurav — Fri, 05 Mar 2021 14:01:13 +0000

Hello everyone! In this quick tutorial, let's learn how to create a custom toggle switch using HTML and CSS.

Step 1 - The HTML.

<label class="switch">
     <input type="checkbox" class="checkbox">
     <span class="toggle-thumb">

          <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" style="fill:#4ADE80;transform:;-ms-filter:"><path d="M10 15.586L6.707 12.293 5.293 13.707 10 18.414 19.707 8.707 18.293 7.293z"></path></svg>

          <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" style="fill:#F87171;transform:;-ms-filter:"><path d="M16.192 6.344L11.949 10.586 7.707 6.344 6.293 7.758 10.535 12 6.293 16.242 7.707 17.656 11.949 13.414 16.192 17.656 17.606 16.242 13.364 12 17.606 7.758z"></path></svg>

     </span>
</label>

Here, the label with the class 'switch' is like the main container of our switch. The span with the class of 'toggle-thumb' is the circle part of the switch and inside this span are the 2 SVG icons that we are going to use. And We will use the checkbox to toggle the switch.

Step 2 - Basic Styles

.switch {
      display: inline-block;
      width: 60px;
      height: 34px;
      position: relative;
    }

.toggle-thumb {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #475569;
      border-radius: 40px;
      cursor: pointer;
    }

After these styles, the switch should look like this

Step 3 - Creating the toggle thumb and hiding the checkbox.

For creating the toggle thumb we need to add the '::before' pseudo-element to the 'toggle-thumb'.

 .toggle-thumb:before {
      content: "";
      height: 26px;
      width: 26px;
      position: absolute;
      left: 4px;
      bottom: 4px;
      border-radius: 50%;
      background-color: #E2E8F0;
      transition: .4s all ease;
    }

And to hide the checkbox

.checkbox {
      opacity: 0;
      width: 0;
      height: 0;
    }

It should look like this now,

Step 4 - Adding the functionality.

To add the functionality to our switch we need to add transform to our 'toggle-thumb::before' when our checkbox is checked. So to do that,

.checkbox:checked + .toggle-thumb:before {
      transform: translateX(26px);
    }

That's it. Here is the demo of the switch.

Thanks 😀

Create a loading spinner using pure CSS.

Gaurav — Thu, 04 Mar 2021 14:40:11 +0000

Hello everyone. In this quick tutorial, let's learn how to create a loading spinner using pure CSS in 3 easy steps!

Step 1 - HTML

Create the HTML structure we need (which is just 1 line)

<div class="spinner"></div>

Step 2 - Add basic styles.

.spinner{
        width: 64px;
        height: 64px;
        border: 8px solid;
        border-color: #3d5af1 transparent #3d5af1 transparent;
        border-radius: 50%;
        animation: spin 1.2s linear infinite;
}

Step 3 - Add the spin animation

 @keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }

That's it! we have created the loading spinner. Here is the final result.

Thank u😀

Monotone - A Nuxt, tailwind portfolio and blog template powered by netlify CMS.

Gaurav — Tue, 19 Jan 2021 07:05:30 +0000

Yo did my first open-source contribution 🤩🤩
Built a portfolio/blog template (I am calling it Monotone because it's clean and minimal) using Nuxt, Tailwind CSS, and Netlify CMS.

Live link: https://monotone-nuxt.netlify.app
Github: https://github.com/dev-ggaurav/Monotone