DEV Community: Pasindu Codes

Icon Navigation Bar With Animated Hover Effects

Pasindu Codes — Wed, 17 Nov 2021 14:39:15 +0000

Welcome back, guys. ✌ In this article you will be learning how to create this beautiful navigation bar with HTML, CSS, and a little bit of JavaScript. This is a quick preview of what we are going to create today. 👇

It is very easy and simple to understand. So let's make this 😉. I have discussed step by step how to create this and at the end, there is a complete code also.

HTML CODE

<nav>
  <ul>
    <li>
      <span data-color="#3f3f64">
        <img src="./images/service-icon.png" alt="service-icon" />
        <img
          class="color-image"
          src="./images/service-icon-color.png"
          alt="service-icon"
        />
      </span>
    </li>

    <li>
      <span data-color="#794343">
        <img src="./images/support-icon.png" alt="support-icon" />
        <img
          class="color-image"
          src="./images/support-icon-color.png"
          alt="support-icon"
        />
      </span>
    </li>

    <li>
      <span data-color="#8be8ff">
        <img src="./images/home-icon.png" alt="home-icon" />
        <img
          class="color-image"
          src="./images/home-icon-color.png"
          alt="home-icon"
        />
      </span>
    </li>

    <li>
      <span data-color="#f7a11fa2">
        <img src="./images/stats-icon.png" alt="stats-icon" />
        <img
          class="color-image"
          src="./images/stats-icon-color.png"
          alt="stats-icon"
        />
      </span>
    </li>

    <li>
      <span data-color="#b33136">
        <img src="./images/feedback-icon.png" alt="feedback-icon" />
        <img
          class="color-image"
          src="./images/feedback-icon-color.png"
          alt="feedback-icon"
        />
      </span>
    </li>
  </ul>
</nav>

So as this is a navigation bar I decided to use the <nav> element to create this. Everything is inside the <nav> tag, and there is an unordered list in it to create the links.

CSS for Nav Bar

nav {
  width: 50%;
}

nav ul {
  list-style-type: none;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-color: #8395a7;
  border-radius: 10px;
}

Created a flex box and justify-content: space-around to create equal spaces between images. list-style-type: none to remove the bullets and overflow: hidden to avoind overflowing the content. set a bacground-color and border-radius to look better. 😏

<li> Tag

<span data-color="#3f3f64">
  <img src="./images/service-icon.png" alt="service-icon" />
  <img
    class="color-image"
    src="./images/service-icon-color.png"
    alt="service-icon"
  />
</span>

The images are created inside the <span> tag. And you can see there are two images inside the<span> tag. One is the black and white and the other is color image. the data-color attribute in the<span> tag is made for the function of JavaScript. You can see it at the end of this article.

nav ul li span {
  display: block;
  padding: 15px 0;
  cursor: pointer;
  position: relative;
}

These are the stylings for <span> tag. display: block unless we can't change the padding values because it is a inline element by default. position: relative because the colored image is going to be absolute to that element.

img {
  width: 70px;
}

Set an fixed width to the image.

The most important part is positioning the colored image. I position the colored image right in front of the black and white image. So that the black and white image is under the colored image. Then I set the colored image'sopacity: 0 so that the colored image cannot be seen. But still, the colored image is in front of the black and white image. So the hover effect is to bring back the opacity with a transition. And it will be like an animation of color-changing 😁.

.color-image {
  position: absolute;
  left: 0;
  opacity: 0;
  transition: all 0.25s;
}

.color-image:hover {
  opacity: 1;
}

👍 So here is the complete CSS code for the project.

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

body {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 1s;
  background-color: #3f3f64;
}

nav {
  width: 50%;
}

nav ul {
  list-style-type: none;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-color: #8395a7;
  border-radius: 10px;
}

nav ul li span {
  display: block;
  padding: 15px 0;
  cursor: pointer;
  position: relative;
}

img {
  width: 70px;
}

.color-image {
  position: absolute;
  left: 0;
  opacity: 0;
  transition: all 0.25s;
}

.color-image:hover {
  opacity: 1;
}

JAVASCRIPT

This is the JavaScript part. It is very simple. All it does is change the background-color of the document when an icon is clicked. (Just for fun 😂). So here it is...

const link = document.querySelectorAll("span"); // Getting all the span elements
const body = document.querySelector("body"); // Getting the body

link.forEach((item) => {
  item.addEventListener("click", () => {
    const bodyColor = item.dataset.color;
    body.style.backgroundColor = bodyColor;
  });
});

So in here I have selected all the <span> elements using querySelectorAll and when a <span> element is clicked, it takes the data-color attribute of that element and set that color as the bacground-color of the document.

🔗 LINKS

Link to the Github Repository
Follow me on Twitter
Follow me on Instagram
Download SVG icons from flaticon

Leave a like 👍 and share 🤙 this article to your friends so that they will also learn what you learned from this. Comment 💬 down you ideas about this. See you in the article. :)

SASS For Beginners Part II

Pasindu Codes — Sun, 14 Nov 2021 14:32:54 +0000

Welcome Back. Here is the second part of the previous SASS for Beginners article, If you missed the first part you can also check that out.

At Rules (@)

@import
@mixin and @include
@extend

are some of the most common at rules. Let's see step by step how they work.

- `@import` -

@import is used to import an scss file to the main scss. When making a website with multiple sections or pages, with the help of @import you can make it easy. You can create different scss files for each section or page and then you can import them to the main scss file.

NOTE: When we create scss files that are about to import, that scss file name must start with an underscore( _ ). Ex: _home.scss, _nav.scss, _footer.scss. But when we are importing we have to avoid the underscore.

You will understand after watching the examples below.

_home.scss

article {
  width: 100%;
  height: 100vh;
  background-color: #1e90ff;
  font-family: "Quicksand", sans-serif;
  h1 {
    font-size: 3rem;
    font-weight: 600;
    color: #00008b;
    text-align: center;
  }
  p {
    font-weight: 500;
    font-size: 1rem;
  }
}

_nav.scss

nav {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 1;
  ul {
    list-style-type: none;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-around;
    li a {
      text-decoration: none;
      color: black;
      font-family: "Quicksand", sans-serif;
      font-size: 0.9rem;
      display: block;
      padding: 10px;
    }
  }
}

_footer.scss

footer {
  background-color: rgb(26, 26, 26);
  display: flex;
  align-items: center;
  justify-content: space-between;
  .credits {
    width: 50%;
    padding: 50px;
    .logo {
      width: 150px;
    }
    p {
      font-size: 0.9rem;
      color: #808080;
      font-family: monospace;
    }
  }
  .social-media {
    width: 100%;
    span {
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }
  }
}

Finally import all of them to the main.scss

main.scss

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

@import "./nav";
@import "./home";
@import "./footer";

- `@mixin` and `@include`-

These two @rules are combined together as we need both to complete our task. This will help us to protect the DRY (Don't Repeat Yourself) principle.

Ex: Think that you have to create buttons in different sections with the same stylings. You can use @mixin and @include for this.

How to use this -

@mixin defaultBtn {
  display: block;
  padding: 10px 30px;
  border: none;
  border-radius: 25px;
  background-color: #5f9ea0;
  color: #ffffff;
  font-family: "Quicksand", sans-serif;
  font-weight: 500;
  letter-spacing: 2px;
}

article {
  width: 100%;
  height: 100vh;
  display: flex;
  button {
    @include defaultBtn();
  }
}

nav ul li button {
  @include defaultBtn();
}

footer {
  width: 100%;
  height: 50vh;
  background-color: #1e90ff;
  button {
    @include defaultBtn();
  }
}

- `@extend` -

@extend is another method used to set the same properties at the same time. It's just like the @mixin and @include but different. You will understand after looking at the example below.

scss

.btn {
  display: block;
  border: 1px solid black;
  padding: 10px;
}

.btn--active {
  @extend .btn;
  color: white;
  background-color: #dc143c;
  border-radius: 10px;
  font-weight: bolder;
  font-size: 1.2rem;
}

css

.btn,
.btn--active {
  display: block;
  border: 1px solid black;
  padding: 10px;
}

.btn--active {
  color: white;
  background-color: #dc143c;
  border-radius: 10px;
  font-weight: bolder;
  font-size: 1.2rem;
}

🔗 Links:

Follow me on Twitter
Checkout my Github
Checkout the First Article

Leave a like 👍 and comment 💬 down your ideas below.

SASS For Beginners Part I

Pasindu Codes — Sun, 14 Nov 2021 14:26:38 +0000

What is SASS ?

CSS or the Cascading Style Sheet is used to make HTML webpages look more professional and attractive. Learning CSS as a frontend web developer is very important. It is very awesome to use CSS on small projects, but when we are up to bigger projects such as landing pages, CSS files are getting larger, more complex, and very hard to maintain. Sometimes there will be more than 1000 lines in some bigger projects. So this is the place where we need SASS. SASS stands for Syntactically Awesome Style Sheets. After reading this article you will understand how really awesome it is.🧐

We can create a SASS file very easily with the file name and the extension 'scss'.
ex :

style.scss / main.scss / index.scss

But the problem is we can't link our scss file to our HTML file easily like linking css files. But don't worry there is a very simple way to do it. 😉

We have to compile our style.scss file into a css file. You can compile your scss to css using your terminal if scss is installed using the following commands.

Ex : You have to compile a scss file called home.scss

sass --watch home.scss home.css

Syntax :

sass --watch (name of the scss file to compile) (name of the compiled scss file with the extension of *css*)

But there is another way easier way to do that. As we all know VS Code is the favorite text editor among most developers. VS Code extensions play a great role in that credit. There is a cool extension in VS Code that can help us in compiling SASS files called Live Sass Compiler.

SASS BASICS

Variables

In css when we have to use the same font-family or the color with hsl, rgb or hex values, we have to copy and paste the same value in everywhere we want to use it. And the worst part is if we need to change the color or the font-family or whatever it is, we need to change all those places. That is very difficult to manage and a wastage of time. But when we came to sass we can create variables to store such values. So that if we had to change them, we need to change only the variable value. So let's see how to use it.

$defaultFont: "Quicksand", sans-serif;
$mainColor: #1e90ff;
article {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: $mainColor; // Using the color variable
  font-family: $defaultFont; // Using the font-family variable
}

footer {
  font-family: $defaultFont; // Using the font-family variable
}

a,
button,
span {
  font-family: $defaultFont; // Using the font-family variable
  color: $mainColor; // Using the color variable
  display: block;
  padding: 10px;
}

Nesting

Nesting is also one of the main features that sass can do. In HTML coding we can see a clear nested system in code. We can clearly identify the parent elements and child elements separately. But in CSS it is totally different. There we can't see such nesting. But in sass we can do that also. And it will help us to save our time in finding relevant elements we want to edit. This is how to do it.

Comparison CSS vs SASS

CSS

nav {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 1;
}

nav ul {
  list-style-type: none;
  width: 100%;
  background-color: #f0fff0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

nav ul li a {
  text-decoration: none;
  color: black;
  font-family: "Quicksand", sans-serif;
  font-size: 0.9rem;
  display: block;
  padding: 10px;
}

SASS

nav {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 1;
  ul {
    list-style-type: none;
    width: 100%;
    background-color: #f0fff0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-around;
    li a {
      text-decoration: none;
      color: black;
      font-family: "Quicksand", sans-serif;
      font-size: 0.9rem;
      display: block;
      padding: 10px;
    }
  }
}

Pseudo Elements and Pseudo Classes

Using Pseudo elements and classes is very easy in sass when compared to the css. Let's go through the examples.😉

Example 1

a {
  display: block;
  color: black;
  text-decoration: none;
  padding: 10px;
  &:hover {
    cursor: pointer;
    color: white;
    background-color: black;
  }
}

Example 2

div {
  width: 300px;
  height: 200px;
  color: black;
  display: flex;
  position: relative;
  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: #1e90ff;
    z-index: -1;
  }
}

🔗 Links:

Follow me on Twitter
Checkout my Github
Go to the Part 2

Leave a like 👍 and comment 💬 down your ideas below.

3D Flip Card Profile - HTML and CSS and JavaScript.

Pasindu Codes — Fri, 12 Nov 2021 11:28:17 +0000

In this article we are going to create a 3D Flipping Profile Card Animation with HTML, CSS and little bit of JavaScript. This is a quick preview of what we are going to do today. 😉

So let's take a look at the code...

HTML

<div class="card">
  <div class="front">
    <img
      src="https://data.whicdn.com/images/225797123/original.jpg"
      alt="Boy Profile Picture"
    />
  </div>
  <div class="back">
    <div class="text">
      <img
        src="https://paperads.com/title-img/Assistant-Manager-Admin-&-HR-Jobs.png"
        alt="Profile"
      />
      <h2>Pasindu Codes™</h2>
      <h5>Frontend Web Developer</h5>
      <ul>
        <li>
          <a href="#"><i class="fab fa-github"></i></a>
        </li>
        <li>
          <a href="#"><i class="fab fa-instagram"></i></a>
        </li>
        <li>
          <a href="#"><i class="fab fa-twitter"></i></a>
        </li>
        <li>
          <a href="#"><i class="fas fa-envelope"></i></a>
        </li>
        <li>
          <a href="#"><i class="fab fa-dev"></i></a>
        </li>
        <li>
          <a href="#"><i class="fab fa-codepen"></i></a>
        </li>
      </ul>
    </div>
  </div>
</div>

So here is the CSS part.

CSS

@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&display=swap");

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

body {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #141e30;
  overflow: hidden;
  background: linear-gradient(to left top, #243b55, #141e30);
}

.card {
  width: 350px;
  height: 500px;
  font-family: "Quicksand", sans-serif;
  position: relative;
  cursor: pointer;
}

.front,
.back {
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: hidden;
  transition: transform 2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform-style: preserve-3d;
}

.front {
  transform: perspective(1000px) rotateY(0deg);
}

.back {
  background-color: #f7f7f7;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: perspective(1000px) rotateY(180deg);
}

img {
  width: 100%;
}

.text {
  text-align: center;
}

.text img {
  width: 200px;
}

.text h5 {
  padding-top: 10px;
}

ul {
  list-style-type: none;
  display: flex;
  justify-content: space-between;
  padding-top: 10px;
}

ul li a {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: black;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  font-size: 1.2rem;
  transition: all 0.2s;
}

ul li a:hover {
  background-color: rgb(17, 17, 17);
  color: white;
}

.backTurn {
  transform: perspective(1000px) rotateY(0);
}

.frontTurn {
  transform: perspective(1000px) rotateY(-180deg);
}

This is the final and easiest part. Let's add the click event of the card with some JavaScript.

JAVASCRIPT

const card = document.querySelector(".card");
const front = document.querySelector(".front");
const back = document.querySelector(".back");

card.addEventListener("click", function () {
  front.classList.toggle("frontTurn");
  back.classList.toggle("backTurn");
});

It's done. 😀. So how was that ? Leave a like if you are interested.
Follow me on Twitter
Thank You :)

DEV Community: Pasindu Codes

Icon Navigation Bar With Animated Hover Effects

HTML CODE

CSS for Nav Bar

<li> Tag

JAVASCRIPT

🔗 LINKS

SASS For Beginners Part II

At Rules (@)

- @import -

_home.scss

_nav.scss

_footer.scss

main.scss

- @mixin and @include-

- @extend -

scss

css

SASS For Beginners Part I

What is SASS ?

SASS BASICS

Variables

Nesting

CSS

SASS

Pseudo Elements and Pseudo Classes

3D Flip Card Profile - HTML and CSS and JavaScript.

HTML

CSS

JAVASCRIPT

- `@import` -

- `@mixin` and `@include`-

- `@extend` -