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.
Let first put some basic css in sandbox.css to show four boxes.
It will show as below.
Now, let’s create a tooltip on hover. We will use the after and before pseudo element.
It will show below. Both after and before are not in correct position. We will fix it later.
We will fix it now, but also create two new CSS rule for top.
It will fix our first tooltip.
Now, we will write the code for tooltip right.
It will show as below.
Next, we will write the code for tooltip bottom.
It will show as below.
Next, we will write the code for tooltip left.
It will show as below.
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.
Let’s create the style for the first Progress bar.
It will show this beautiful Progress bar.
Next, we will write code to make it like stripe.
It will show the progress bar with beautiful stripes.
Now, we will add animations to the progress bar. We will add animation for both going forward and the stripe moving.
The animation keyframes.
The animation is as below.
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.
Now, we will add animation to the Progress bar.
It will show this nice animation.
This completes day 6 of the course. You can find the code for the same here.
Top comments (0)