DEV Community: Cornea Florin

Mobile icon navigation with micro interaction

Cornea Florin — Sun, 17 Oct 2021 14:02:25 +0000

Simple and nice looking mobile navigation with micro interactions

Required tools

Let's brake down the micro interaction part

For a noice effect we can do an annimation where we scale up and down the icon while user is clicking on it

.menu ul li a:focus:not(.home) i {
  animation-name: pop;
  animation-duration: .5s;
}

@keyframes pop {
  0%   {transform: scale(.8);}
  50%  {transform: scale(1.2);}
  100% {transform: scale(1);}
}

The actual nav

The menu itself is just a quick nav tag with an unordered list of icons

<nav class="menu">
    <ul>
      <li>
        <a href="#"><i class="fas fa-comment-alt-lines"></i></a>  
      </li>
      <li>
        <a href="#"><i class="fas fa-bell"></i></a>  
      </li>
      <li>
        <a href="#" class="home"><i class="fas fa-store"></i></a>  
      </li>
      <li>
        <a href="#"><i class="fas fa-shopping-bag"></i></a>  
      </li>
      <li>
        <a href="#"><i class="fas fa-user"></i></a>  
      </li>
    </ul>
  </nav>

.menu {
  width: 300px;
  background-color: #fff;
  box-shadow: 0px -2px 15px -3px #ffa8ba;
  padding: 0px 20px;
  border-radius: 25px;
}

.menu ul {
  list-style: none;
  display: grid;
  grid-template-columns: auto auto auto auto auto;
  padding: 0;
  margin: 0;
}

.menu ul li {
  text-align: center;
  box-sizing: border-box;
}

.menu ul li a {
  display: block;
  width: 100%;
  padding: 10px 0;
  border-top: 2px solid;
  border-color: transparent;
  color: #888;
}

.menu ul li a:hover:not(.home) {
  border-top: 2px solid #fc466b;
  color: #999;
}

.menu ul li a:focus:not(.home) {
  border-top: 2px solid #fc466b;
  color: #fc466b;
}

.menu ul li a:focus:not(.home) i {
  animation-name: pop;
  animation-duration: .5s;
}

@keyframes pop {
  0%   {transform: scale(.8);}
  50%  {transform: scale(1.2);}
  100% {transform: scale(1);}
}

.menu ul li a.home {
  color: #fff;
  background: #fc466b;
  border-radius: 20px;
}

Final result on codepen

Tablet Dashboard UI CSS&HTML

Cornea Florin — Mon, 19 Jul 2021 06:12:42 +0000

Nice looking ui design for tablet with modern hover effects.

The html code is just a simple structure with one aside element and one section.

The HTML:

<div class="page">
  <aside class="menu">
    <a href="" class="logo">Logo</a>
    <a href="" class="menu-item">
      <p class="material-icons icon">dashboard</p>
      <p class="text">Dashboard</p>
    </a>
    <a href="" class="menu-item">
      <p class="material-icons icon">manage_accounts</p>
      <p class="text">Settings</p>    
    </a>
    <a href="" class="menu-item">
      <p class="material-icons icon">today</p>
      <p class="text">Calendar</p>    
    </a>
    <a href="" class="menu-item active">
      <p class="material-icons icon">touch_app</p>
      <p class="text">Accesibility</p>    
    </a>
    <a href="" class="menu-item">
      <p class="material-icons icon">theaters</p>
      <p class="text">Theaters</p>    
    </a>
  </aside>
  <section class="main">
    <h2>Accesibility</h2>
    <ul>
      <li>
        <div>Item</div>
        <div>Price</div>
        <div>Rate</div>
      </li>
      <li>
        <div>Itmem 1</div>
        <div>12.5</div>
        <div>2 out of 10</div>
      </li>
      <li>
        <div>Itmem 2</div>
        <div>22.8</div>
        <div>5 out of 10</div>
      </li>
      <li>
        <div>Itmem 3</div>
        <div>37</div>
        <div>4 out of 10</div>
      </li>
      <li>
        <div>Itmem 4</div>
        <div>299.9</div>
        <div>9.5 out of 10</div>
      </li>
      <li>
        <div>Itmem 5</div>
        <div>0.5</div>
        <div>0 out of 10</div>
      </li>
      <li>
        <div>Itmem 6</div>
        <div>52.52</div>
        <div>8 out of 10</div>
      </li>
      <li>
        <div>Itmem 7</div>
        <div>24.9</div>
        <div>7 out of 10</div>
      </li>
    </ul>
  </section>
</div>

For the css part i'm going to add only the more interesting element that is the menu hover effect.

So for a menu item we have the following structure in HTML:

    <a href="" class="menu-item">
      <p class="material-icons icon">dashboard</p>
      <p class="text">Dashboard</p>
    </a>

in order to make it look as I intended, the following css was needed:


.menu a.menu-item {
  display: block;
  text-decoration: none;
}

.menu a.menu-item:hover .icon,
.menu a.menu-item.active .icon {
  background-image: linear-gradient(-70deg , #08bfb3, #44e4c4);
  color: #eee;
  border-radius: 10px 10px 0 10px;
  z-index: 2;
}

.menu a.menu-item:hover .text,
.menu a.menu-item.active .text {
  background-image: linear-gradient(-90deg , #2a71e5, #1a71a8);
  z-index: -1;
  border-radius: 10px 0 0 10px;
  width: 54%;
}

.menu .icon {
  position: relative;
  color: #0e8af6;
  margin: 5px;
  padding: 10px;
}

.menu .text {
  color: #eee;
  padding: 20px 20px 20px 25px;
  margin: 0 0 0 -30px;
}

.menu p {
  line-height: 24px;
  vertical-align: middle;
  display: inline-block;
}

[CSS] Scroll snap example

Cornea Florin — Wed, 07 Jul 2021 13:57:02 +0000

Scroll snap example for presentation websites

Let's start with a simple HTML structure:

<div class="section-wrapper">
  <section class="page-one">
    <p>Scroll dowb just a little bit</p>
  </section>
  <section class="page-two">
    <p>A bit more</p>
  </section>
  <section class="page-three">
    <p>And more</p>
  </section>
  <section class="page-four">
    <p>Now scroll up</p>
  </section>
</div>

Now for the css scroll snap part:


.section-wrapper {
  scroll-snap-type: y mandatory;
  height: 100vh;
  overflow: auto;
}

section {
  height: 100vh;
  scroll-snap-align: start;
  transition: scroll-snap-align 2s;
}

We need to add `scroll-snap-align` with the individual sections and the `scroll-snap-type` to the element that contains all the sections

Looking forward to see other examples that you might have

Selectable options dashboard made with CSS

Cornea Florin — Mon, 22 Mar 2021 09:34:27 +0000

Selectable options dashboard made with CSS;

As usual, adding the plain HTML:

<section class="app">
  <i class="fa fa-rocket"></i>
  <h1>It's time to <span class="blue-color">upgrade</span></h1>
  <h3 class="gray-color">Choose the feature that best fit your needs and you'll be good to go!</h3>
  <article class="feature1">
    <input type="checkbox" id="feature1"/>
    <div>
      <span>
        20 GB<br/>
        + $15.00
      </span>
    </div>
  </article>

  <article class="feature2">
    <input type="checkbox" id="feature2"/>
    <div>
      <span>
        10 Emails<br/>
        + $10.00
      </span>
    </div>
  </article>

  <article class="feature3">
    <input type="checkbox" id="feature3"/>
    <div>
      <span>
        Support<br/>
        + $65.00
      </span>
    </div>
  </article>

  <article class="feature4">
    <input type="checkbox" id="feature4" checked/>
    <div>
      <span>
        Coffee<br/>
        $1.00
      </span>
    </div>
  </article>

  <h3>
    <span class="blue-color">50% </span>discount only today!
  </h3>

  <a href="#" class="upgrade-btn">Upgrade</a>

  <div class="gray-color">terms & conditions apply, the app will never share your private info</div>
</section>

Now doing the magic:

body {
  text-align: center;
  color: #f5f5f5;
  background-image: linear-gradient(-90deg , #0c0c0d, #1a1a1a);
  font-family: 'Roboto';
}

.app {
  max-width: 300px;
  margin: 0 auto;
}

.app i {
  font-size: 80px;

  animation-duration: 3s;
  animation-name: slidein;
  animation-iteration-count: 1;
}

article {
  position: relative;
  width: 140px;
  height: 100px;
  margin: 5px;
  float: left;
  border: 2px solid #50bcf2;
  box-sizing: border-box;
}

article div {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 25px;
  transition: .5s ease;
}

article input {
  position: absolute;
  top: 0;
  left: 0;
  width: 140px;
  height: 100px;
  opacity: 0;
  cursor: pointer;
}

input[type=checkbox]:checked ~ div {
  background-color: #50bcf2;
}

.upgrade-btn {
  display: block;
  margin: 30px auto;
  width: 200px;
  padding: 10px 20px;
  border: 2px solid #50bcf2;
  border-radius: 50px;
  color: #f5f5f5;
  font-size: 18px;
  font-weight: 600;
  text-decoration: none;
  transition: .3s ease;
}

.upgrade-btn:hover {
  background-color: #50bcf2;
}

.blue-color {
  color: #50bcf2;
}

.gray-color {
  color: #555;
}

@keyframes slidein {
  from {
    margin-top: 100%;
    width: 300%;
  }

  to {
    margin: 0%;
    width: 100%;
  }
}

What i want to cherry pick and describe is how i made the custom checkboxes:

  <article class="feature1">
    <input type="checkbox" id="feature1"/>
    <div>
      <span>
        20 GB<br/>
        + $15.00
      </span>
    </div>
  </article>

article {
  position: relative;
  width: 140px;
  height: 100px;
  margin: 5px;
  float: left;
  border: 2px solid #50bcf2;
  box-sizing: border-box;
}

article div {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 25px;
  transition: .5s ease;
}

article input {
  position: absolute;
  top: 0;
  left: 0;
  width: 140px;
  height: 100px;
  opacity: 0;
  cursor: pointer;
}

input[type=checkbox]:checked ~ div {
  background-color: #50bcf2;
}

I've created two overlapping elements inside an article, one for the checkbox and one for the container which will have the nicer look;

I made the checkbox as big as the container and I gave it an opacity 0;

Let me know what do you think.

Slim sidebar menu with hover effect

Cornea Florin — Thu, 18 Feb 2021 13:49:56 +0000

Hello #devs,

I started working o a side small Ui Kit that looks nice and is easy to use.

Disclaimer: The main purpose of this kit is to be used on the admin dashboards where the users already know to use a dashboard so no more hate comments like "this design is not in trend anymore" or smth like that you haters! :))

I'm not going to explain the whole project as it's still in progress, today I only want to share the menu creation.

First some HTML skeleton:


<aside>
  <ul>
    <li class="menu">Ui kit</li>
    <li>
      <i class="fa fa-user-o" aria-hidden="true"></i>
    </li>
    <li>
      <i class="fa fa-laptop" aria-hidden="true"></i>
    </li>
    <li>
      <i class="fa fa-clone" aria-hidden="true"></i>
    </li>
    <li>
      <i class="fa fa-star-o" aria-hidden="true"></i>
    </li>
    <li>
      <i class="fa fa-trash-o" aria-hidden="true"></i>
    </li>
  </ul>
</aside>

And now the styling. First some general CSS for the body to remove margins and use a custom font:

body {
  display: flex;
  font-family: 'Roboto';
  margin: 0;
}

Let's begin to style the menu. I will create a ul fixed and to create the overlapping effect with the main section, I will make it a bit wider and then add the section on top of it:

ul {
  position: fixed;
  min-height: 100vh;
  list-style-type: none;
  margin: 0;
  padding: 0;
  color: #fff;
  text-align: center;
  width: 80px;
  background-image: linear-gradient(-130deg , #63bbac, #aad963);
  padding-right: 40px;
  z-index: 0;
}

ul .menu {
  padding: 30px 0;
}

aside ul li {
  padding: 20px 0;
  cursor: pointer;
}


aside ul li:not(.menu):hover {
  background-image: linear-gradient(-130deg , #eee, #fff);
  color: #63bbac;
}

section.main {
  z-index: 1;
  width: 70%;
  padding: 30px;
  background: #eee;
  margin-left: 80px;
  border-radius: 30px;
}

The final menu result(WIP):

Hope you enjoy this one and please feel free to add suggestions and constructive criticism

Modern Sidebar Menu

Cornea Florin — Wed, 30 Dec 2020 18:53:51 +0000

As a CSS enthusiast I'm always trying to replicate designs I see using CSS.

Today I wanted to create a sidebar menu.
I used codepen as always(God Bless Codepen).

At first I added the necessary HTML I knew I wanted on the page:


<aside>
  <p> Menu </p>
  <a href="javascript:void(0)">
    <i class="fa fa-user-o" aria-hidden="true"></i>
    My drive
  </a>
  <a href="javascript:void(0)">
    <i class="fa fa-laptop" aria-hidden="true"></i>
    Computers
  </a>
  <a href="javascript:void(0)">
    <i class="fa fa-clone" aria-hidden="true"></i>
    Shared with me
  </a>
  <a href="javascript:void(0)">
    <i class="fa fa-star-o" aria-hidden="true"></i>
    Starred
  </a>
  <a href="javascript:void(0)">
    <i class="fa fa-trash-o" aria-hidden="true"></i>
    Trash
  </a>
</aside>

Now I want my sidebar to be 100vh and no margins:

body {
  font-family: 'Roboto';
  width: 100%;
  height: 100vh;
  margin: 0;
}

For the nice visuals of the sidebar:

aside {
  color: #fff;
  width: 250px;
  padding-left: 20px;
  height: 100vh;
  background-image: linear-gradient(30deg , #0048bd, #44a7fd);
  border-top-right-radius: 80px;
}

aside a {
  font-size: 12px;
  color: #fff;
  display: block;
  padding: 12px;
  padding-left: 30px;
  text-decoration: none;
}

aside a:hover {
  color: #3f5efb;
  background: #fff;
  position: relative;
  background-color: #fff;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
}

aside a i {
  margin-right: 5px;
}

The most difficult effect to achieve was the hover over the menu item:

For the left top and bottom hover design i added 2 pseudo elements like this:


aside a:hover::after {
  content: "";
  position: absolute;
  background-color: transparent;
  bottom: 100%;
  right: 0;
  height: 35px;
  width: 35px;
  border-bottom-right-radius: 18px;
  box-shadow: 0 20px 0 0 #fff;
}

aside a:hover::before {
  content: "";
  position: absolute;
  background-color: transparent;
  top: 38px;
  right: 0;
  height: 35px;
  width: 35px;
  border-top-right-radius: 18px;
  box-shadow: 0 -20px 0 0 #fff;
}

There are some hardcoded values but if it works, it works! :))

Thank you for reading this article and I'm curios if you have another method to achieve the hover result.

CSS text background

Cornea Florin — Mon, 21 Dec 2020 12:50:59 +0000

Hello fellows developers,

As a CSS enthusiast I'm always trying to replicate designs I see using CSS.

Today I wanted to create a text background for a paragraph.
I used codepen as always(God Bless Codepen).

At first I added the necessary HTML I knew I wanted on the page:

<section>
  <span class="text-background">2021</span>
  <p>
    “Do the hard jobs first. The easy jobs will take care of themselves.”
Dale Carnegie
  </p>
</section>

Now I want my section to be centered on the screen, a dark background and some nice visuals for the body and for that I've added some CSS:

body {
  margin: 0;
  height: 100vh;
  width: 100%;
  background: #454545;

  display: grid;
  place-items: center;
  text-align: center;
}

For my particular design I want to have all the elements centered so I need to center everything inside the section also:

section {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
}

The relative positioning will help me center and arrange the elements inside without having to mess with z-index(do to the fact of html elements order).

Display grid and Place-items center will center the items inside the section.

And the last and most important thing to do is to add position absolute to our text elements and some styling to look nice:

.text-background {
  position: absolute;
  font-size: 142px;
  color: #3d3d3d;
}

p {
  position: absolute;
  font-size: 20px;
  color: #eee;
}

The final result:

Thank you for reading this article and I'm curios if you have another method to achieve this result.

Glassmorphism Card with CSS

Cornea Florin — Thu, 10 Dec 2020 20:33:43 +0000

Inspired from Shounak's article

Modern buttons UI

Cornea Florin — Sun, 01 Nov 2020 13:26:08 +0000

Productivity tracker app

Cornea Florin — Mon, 24 Aug 2020 11:43:03 +0000

I created a simple daily productivity tracker app in vanilla js.

It was made only for desktop screens with the intention to be used by myself to track my daily productivity at work and see how i spend my day.

I added a time period from 8-18 and for each hour i can generate dynamically a time frame for 15, 30 mins or one hour

The code code is a bit messy but i intend to clean it up.

Pleas drop me a comment if you find this useful.

Smart house css light switch

Cornea Florin — Sat, 18 Jul 2020 13:52:20 +0000

Hello people of the internet,

I created a nice looking CSS neumorphic light switch button; I hope you all like it and i'll be glad to answer if you have any questions regarding this design

vertical bars loader

Cornea Florin — Tue, 26 May 2020 16:08:14 +0000

Vertical bar loader animation. Only css, simple and straight forwarding