DEV Community

Cover image for CSS3 in 10 days — Day 6
Nabendu
Nabendu

Posted on • Updated on • Originally published at nabendu.blog

CSS3 in 10 days — Day 6

Welcome to Day 6 of learning CSS.

As i have told earlier, this series is inspired by this awesome youtube series in freecodecamp channel.

We will start with Tooltip on day-6. Open your code editor and create a new 6.1-Tooltip folder and two files index.html and sandbox.css inside it.

Next, in index.html put the basic html.

Basic indexBasic index

Let first put some basic css in sandbox.css to show four boxes.

tooltiptooltip

It will show as below.

Basic boxBasic box

Now, let’s create a tooltip on hover. We will use the after and before pseudo element.

Tooltip codeTooltip code

It will show below. Both after and before are not in correct position. We will fix it later.

TooltipTooltip

We will fix it now, but also create two new CSS rule for top.

Fixing topFixing top

It will fix our first tooltip.

First one fixedFirst one fixed

Now, we will write the code for tooltip right.

Tooltip rightTooltip right

It will show as below.

RightRight

Next, we will write the code for tooltip bottom.

Tooltip bottomTooltip bottom

It will show as below.

BottomBottom

Next, we will write the code for tooltip left.

tooltip lefttooltip left

It will show as below.

LeftLeft

Next we will Animated Progress Bar on day-6. Open your code editor and create a new 6.1-ProgressBar folder and two files index.html and sandbox.css inside it.

Next, in index.html put the basic html.

Basic indexBasic index

Let’s create the style for the first Progress bar.

First styleFirst style

It will show this beautiful Progress bar.

Beautiful BarBeautiful Bar

Next, we will write code to make it like stripe.

Stripe effectStripe effect

It will show the progress bar with beautiful stripes.

StripesStripes

Now, we will add animations to the progress bar. We will add animation for both going forward and the stripe moving.

Code addedCode added

The animation keyframes.

KeyframesKeyframes

The animation is as below.

The animationThe animation

We will next write code for the second Progress bar, which will have a tooltip also.

.animation-bar-2 {
    position: relative;
    display: block;
    font-size: 16px;
    line-height: 16px;
    background: rgba(0, 0, 0, 0.1);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
  }
  .animation-bar-2 span {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    background-color: #00e6e7;
    background-size: 100%;
    background-image: linear-gradient(to bottom, #00b3b4, #008081);
  }
  .animation-bar-2 span:before {
    position: absolute;
    right: 0;
    bottom: 100%;
    display: inline-block;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-right-width: 0;
    border-bottom-width: 0;
    border-top-color: rgba(0, 0, 0, 1);
    content: "";
  }
  .animation-bar-2 span:after {
    position: absolute;
    right: 0;
    bottom: calc(100% + 5px);
    z-index: 1;
    display: inline-block;
    content: attr(data-label);
    padding: 5px;
    border-radius: 3px;
    font-size: 0.8em;
    background-color: rgba(0, 0, 0, 1);
    color: #FFFFFF;
  }

It will initially show like below.

Initial barInitial bar

Now, we will add animation to the Progress bar.

AnimationAnimation

It will show this nice animation.

The animationThe animation

This completes day 6 of the course. You can find the code for the same here.

Top comments (0)