DEV Community: Pedro Romão

How do you keep up to date as developer?

Pedro Romão — Sun, 03 Apr 2022 22:00:34 +0000

How to make a beautiful liquid animation in a tap bar menu using css and javascript

Pedro Romão — Mon, 28 Mar 2022 12:40:49 +0000

In this article, we will create a tap bar that you can use in your mobile projects. Let's first look at what are we building:

Let's code...

HTML

<div class="container">
  <div class="bar">
    <div class="bar-item pre-active" onclick="changeActive(this)">
      <div class="bar-fluid"></div>
      <div class="drop"></div>
      <i class="far fa-calendar-alt"></i>
    </div>
    <div class="bar-item" onclick="changeActive(this)">
      <div class="bar-fluid"></div>
      <div class="drop"></div>
      <i class="far fa-sticky-note"></i>
    </div>
    <div class="bar-item" onclick="changeActive(this)">
      <div class="bar-fluid"></div>
      <div class="drop"></div>
      <i class="far fa-bell"></i>
    </div>
    <div class="bar-item" onclick="changeActive(this)">
      <div class="bar-fluid"></div>
      <div class="drop"></div>
      <i class="far fa-address-book"></i>
    </div>
  </div>
</div>

In the HTML code, the "bar" class is the container of our tap bar and "bar-item" class are the buttons that trigger the animations.

Now let's look at the CSS:

CSS

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

.container {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fc5c65;
}

.bar {
  padding: 0px 10px;
  display: flex;
  align-items: center;
  background-color: #ffffff;
  border-radius: 10px 10px 20px 20px;
  box-shadow: 3px 3px 0px 0px rgb(235 59 90);
}

.bar .bar-item {
  position: relative;
  overflow: hidden;
  padding: 20px 25px;
  cursor: pointer;
}

.bar .bar-item i {
  z-index: 1;
  position: relative;
  color: #a4b0be;
  transition: all .3s ease-in-out;
}

.bar .bar-item.pre-active i {
  color: #fc5c65;
}

.bar .bar-item.active i {
  color: #fc5c65;
  animation: colour 1s ease-in-out;
}

.bar .bar-item.active .bar-fluid {
  position: absolute;
  top: 0px;
  left: 0px;
  background-color: #fc5c65;
  width: 100%;
  height: 0px;
  animation: fluid 1s ease-in-out;
}

.bar .bar-item.active .bar-fluid:before {
  content: '';
  position: absolute;
  top: 0px;
  left: -50%;
  background-color: #ffffff;
  width: 110%;
  height: 400%;
  border-radius: 50%;
}

.bar .bar-item.active .bar-fluid:after {
  content: '';
  position: absolute;
  top: 0px;
  right: -50%;
  background-color: #ffffff;
  width: 110%;
  height: 400%;
  border-radius: 50%;
}

.bar .bar-item.active .drop {
  position: absolute;
  top: -2.5px;
  left: 30.5px;
  background-color: #fc5c65;
  width: 2.5px;
  height: 2.5px;
  border-radius: 50%;
  animation: drop 1s ease-in-out;
}

@keyframes colour {
  0% { color: #a4b0be; }
  55% {
    color: #a4b0be;
    transform: scale(1);
  }
  60% {
    color: #fc5c65;
    transform: scale(1);
  }
  70% { transform: scale(1.1); }
  80% { transform: scale(1); }
}

@keyframes fluid {
  0% { height: 0px; }
  30% { height: 10px; }
  100% { height: 0px; }
}

@keyframes drop {
  20% { top: -2.5px; }
  50% { top: 21px; }
  51% { top: -2.5px; }
}

JavaScript

const preactiveItem = document.querySelector('.pre-active')
const barItems = document.querySelectorAll('.bar-item')

function changeActive (newActive) {
  preactiveItem.classList.remove('pre-active')
  barItems.forEach(element => {
    element.classList.remove('active')
  })
  newActive.classList.add('active')
}

Codepen is here:

Thank you for reading, and let's connect!

Thank you for reading, and feel free to connect with me on Linkedin and check my Youtube channel.

And if you like my work and want to support me, you can buy me a coffee by clicking here.

How to make an animated like button | HTML, CSS, JavaScript

Pedro Romão — Sat, 26 Mar 2022 20:04:22 +0000

There are many like animations available on the internet, but this is one of my favorites. It's simple, easy to apply and different from what we see out there.

In this article, we will create an animated like button that you can use in your projects.

Let's first look at what are we building, feel free to press the button and see the animation happening :):

Explaining the code

The "item--bg" class is the active state color that will be appear when the user press the "Click me" button. At the beginning, it will be invisible to the user and will appear only when the "active" class is with the "item" element:

The shake animation will happen only when the "shake" class is with the "item" element:

When the user press the "Click me" button, the JavaScript code will be called adding the "active" and "shake" class to the "item" element and removing the "shake" class after 2 seconds:

Thank you for reading, and let's connect!

Thank you for reading, and feel free to connect with me on Linkedin and check my Youtube channel.

And if you like my work and want to support me, you can buy me a coffee by clicking here.

Cool dashboard side menu using CSS and JavaScript

Pedro Romão — Sun, 14 Nov 2021 00:37:30 +0000

In this article, we will create a cool dashboard side menu that you can use in your web projects. Let's first look at what are we building:

HTML

<div class="container">
  <div class="menu">

    <div class="main-menu">

      <div class="logo">
        <img src="your_image_url">
      </div>

      <div class="button-list">
        <div class="item" active>
          <i class="fas fa-home"></i>
        </div>
        <div class="item">
          <i class="fas fa-user"></i>
        </div>
        <div class="item">
          <i class="fas fa-briefcase"></i>
        </div>
        <div class="item">
          <i class="fas fa-chart-pie"></i>
        </div>
        <div class="item">
          <i class="fas fa-user-cog"></i>
        </div>
        <div class="item">
          <i class="fas fa-cog"></i>
        </div>
      </div>

    </div>

    <div class="secondary-menu" expand>
      <div class="content">

        <div class="title">
          <span>Settings</span>
        </div>

        <div class="button-list-title">
          <span>User admin</span>
        </div>

        <div class="button-list">
          <div class="item" active>
            <div class="border-left"></div>
            <span>My Profile</span>
          </div>
          <div class="item">
            <div class="border-left"></div>
            <span>Org</span>
          </div>
          <div class="item">
            <div class="border-left"></div>
            <span>Teams</span>
          </div>
          <div class="item">
            <div class="border-left"></div>
            <span>Roles</span>
          </div>
          <div class="item">
            <div class="border-left"></div>
            <span>Profiles</span>
          </div>
        </div>

        <div class="button-list-title">
          <span>System config.</span>
        </div>

        <div class="button-list">
          <div class="item">
            <div class="border-left"></div>
            <span>Rulesets</span>
          </div>
          <div class="item">
            <div class="border-left"></div>
            <span>Prospects</span>
          </div>
          <div class="item">
            <div class="border-left"></div>
            <span>Accounts</span>
          </div>
          <div class="item">
            <div class="border-left"></div>
            <span>Calls</span>
          </div>
          <div class="item">
            <div class="border-left"></div>
            <span>Triggers</span>
          </div>
          <div class="item">
            <div class="border-left"></div>
            <span>Phones</span>
          </div>
        </div>

      </div>
    </div>

  </div>
</div>

In the HTML code, the "main-menu" class is the main container with the icon buttons and "secondary-menu" class is the secondary container with the submenus.

Now let's look at the CSS:

CSS

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@600;700&display=swap');

:root {
  --color-primary: #546de5;
  --color-secondary: #8395e9;
  --color-secondary-light: rgb(84, 109, 229, .05);
  --color-dark: #303952;
  --color-dark-light: #4f576c;
  --color-light: #ffffff;
}

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

.container {
  display: flex;
  align-items: flex-start;
}

.menu {
  display: flex;
  align-items: flex-start;
  height: 100vh;
/*   overflow-y: hidden; */
}

.menu .main-menu {
  width: 60px;
  height: 100vh;
  background-color: var(--color-dark);
}

.menu .main-menu .logo {
  display: flex;
  padding: 10px;
}

.menu .main-menu .logo img {
  width: 40px;
  margin: 0px auto;
}

.menu .main-menu .button-list {
  margin-top: 30px;
}

.menu .main-menu .button-list .item {
  display: flex;
  padding: 15px 10px;
  cursor: pointer;
  transition: all .5s;
}

.menu .main-menu .button-list .item:hover {
  background-color: var(--color-dark-light);
}

.menu .main-menu .button-list .item[active] {
  background-color: var(--color-primary);
}

.menu .main-menu .button-list .item i {
  font-size: 16px;
  color: var(--color-light);
  margin: 0px auto;
  pointer-events: none;
}

.menu .secondary-menu {
  padding: 20px 0px;
  width: 0px;
  height: 100vh;
  background-color: var(--color-light);
  -webkit-box-shadow: 10px 0px 15px 0px rgba(48,57,82,0.1);
  -moz-box-shadow: 10px 0px 15px 0px rgba(48,57,82,0.1);
  box-shadow: 10px 0px 15px 0px rgba(48,57,82,0.1);
  transition: all .5s;
}

.menu .secondary-menu .content {
  opacity: 0;
}

.menu .secondary-menu[expand] {
  width: 200px;
}

.menu .secondary-menu[expand] .content {
  opacity: 1;
}

.menu .secondary-menu .content {
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  transition: opacity .5s;

  /*  Firefox  */
  scrollbar-color: var(--color-secondary-light) var(--color-secondary-light) !important;
  scrollbar-width: thin !important;
}

.menu .secondary-menu .content::-webkit-scrollbar {
  width: 2px;
}

.menu .secondary-menu .content::-webkit-scrollbar-track {
  background: var(--color-secondary-light);
}

.menu .secondary-menu .content .title {
  padding: 0px 20px;
}

.menu .secondary-menu .title span {
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
}

.menu .secondary-menu .button-list-title {
  padding: 20px 20px 10px 20px;
}

.menu .secondary-menu .button-list-title span {
  font-family: 'Open Sans', sans-serif;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.menu .secondary-menu .button-list {
  padding: 20px 0px;
}

.menu .secondary-menu .button-list .item {
  display: flex;
  align-items: center;
  height: 35px;
  padding: 0px 20px;
  cursor: pointer;
  transition: all .5s;
}

.menu .secondary-menu .button-list .item:hover {
  background-color: var(--color-secondary-light);
}

.menu .secondary-menu .button-list .item .border-left {
  height: 100%;
  border-left: 2px solid var(--color-dark-light);
  opacity: 0.1;
  margin-right: 15px;
  pointer-events: none;
}

.menu .secondary-menu .button-list .item span {
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  color: var(--color-dark-light);
  opacity: 0.3;
  pointer-events: none;
}

.menu .secondary-menu .button-list .item[active] {
  background-color: var(--color-light);
}

.menu .secondary-menu .button-list .item[active] .border-left {
  border-left-color: var(--color-secondary);
  opacity: 1;
}

.menu .secondary-menu .button-list .item[active] span {
  color: var(--color-secondary);
  opacity: 1;
}

JavaScript

const mainButtons = document.querySelectorAll('.main-menu .item')
const secondaryButtons = document.querySelectorAll('.secondary-menu .item')

const handleMainButtonClick = (event) => {
  const button = event.target
  if (!isActive(button)) {
    removeMainActive()
    addActive(button)
  }
}

const handleSecondaryButtonClick = (event) => {
  const button = event.target
  if (!isActive(button)) {
    removeSecondaryActive()
    addActive(button)
  }
}

mainButtons.forEach(button => {
  button.addEventListener('click', handleMainButtonClick)
})

secondaryButtons.forEach(button => {
  button.addEventListener('click', handleSecondaryButtonClick)
})

function isActive (button) {
  return button.hasAttribute('active')
}

function removeMainActive () {
  document.querySelectorAll('.main-menu .item[active]').forEach(item => {
    item.removeAttribute('active')
  })
}

function removeSecondaryActive () {
  document.querySelectorAll('.secondary-menu .item[active]').forEach(item => {
    item.removeAttribute('active')
  })
}

function addActive (button) {
  button.setAttribute('active', '')
}

Codepen is here:

Tap bar with liquid animation using CSS and JavaScript

Pedro Romão — Thu, 11 Nov 2021 01:24:46 +0000

In this article, we will create a tap bar that you can use in your mobile projects. Let's first look at what are we building:

Let's code...

HTML

<div class="container">
  <div class="bar">
    <div class="bar-item pre-active" onclick="changeActive(this)">
      <div class="bar-fluid"></div>
      <div class="drop"></div>
      <i class="far fa-calendar-alt"></i>
    </div>
    <div class="bar-item" onclick="changeActive(this)">
      <div class="bar-fluid"></div>
      <div class="drop"></div>
      <i class="far fa-sticky-note"></i>
    </div>
    <div class="bar-item" onclick="changeActive(this)">
      <div class="bar-fluid"></div>
      <div class="drop"></div>
      <i class="far fa-bell"></i>
    </div>
    <div class="bar-item" onclick="changeActive(this)">
      <div class="bar-fluid"></div>
      <div class="drop"></div>
      <i class="far fa-address-book"></i>
    </div>
  </div>
</div>

In the HTML code, the "bar" class is the container of our tap bar and "bar-item" class are the buttons that trigger the animations.

Now let's look at the CSS:

CSS

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

.container {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fc5c65;
}

.bar {
  padding: 0px 10px;
  display: flex;
  align-items: center;
  background-color: #ffffff;
  border-radius: 10px 10px 20px 20px;
  box-shadow: 3px 3px 0px 0px rgb(235 59 90);
}

.bar .bar-item {
  position: relative;
  overflow: hidden;
  padding: 20px 25px;
  cursor: pointer;
}

.bar .bar-item i {
  z-index: 1;
  position: relative;
  color: #a4b0be;
  transition: all .3s ease-in-out;
}

.bar .bar-item.pre-active i {
  color: #fc5c65;
}

.bar .bar-item.active i {
  color: #fc5c65;
  animation: colour 1s ease-in-out;
}

.bar .bar-item.active .bar-fluid {
  position: absolute;
  top: 0px;
  left: 0px;
  background-color: #fc5c65;
  width: 100%;
  height: 0px;
  animation: fluid 1s ease-in-out;
}

.bar .bar-item.active .bar-fluid:before {
  content: '';
  position: absolute;
  top: 0px;
  left: -50%;
  background-color: #ffffff;
  width: 110%;
  height: 400%;
  border-radius: 50%;
}

.bar .bar-item.active .bar-fluid:after {
  content: '';
  position: absolute;
  top: 0px;
  right: -50%;
  background-color: #ffffff;
  width: 110%;
  height: 400%;
  border-radius: 50%;
}

.bar .bar-item.active .drop {
  position: absolute;
  top: -2.5px;
  left: 30.5px;
  background-color: #fc5c65;
  width: 2.5px;
  height: 2.5px;
  border-radius: 50%;
  animation: drop 1s ease-in-out;
}

@keyframes colour {
  0% { color: #a4b0be; }
  55% {
    color: #a4b0be;
    transform: scale(1);
  }
  60% {
    color: #fc5c65;
    transform: scale(1);
  }
  70% { transform: scale(1.1); }
  80% { transform: scale(1); }
}

@keyframes fluid {
  0% { height: 0px; }
  30% { height: 10px; }
  100% { height: 0px; }
}

@keyframes drop {
  20% { top: -2.5px; }
  50% { top: 21px; }
  51% { top: -2.5px; }
}

JavaScript

const preactiveItem = document.querySelector('.pre-active')
const barItems = document.querySelectorAll('.bar-item')

function changeActive (newActive) {
  preactiveItem.classList.remove('pre-active')
  barItems.forEach(element => {
    element.classList.remove('active')
  })
  newActive.classList.add('active')
}