We come to this lesson, in this lesson we are going to continue building the calculator we started here:
In the first tutorial, we created a layout structure for the calculator and now we will add both heading, tagline and sun-battery-container to meta-information as in the HTML code below:
Step 1: Adding children to meta-information
<!--<div class="meta-information">-->
<div class="heading">
<h1 class="logo">AYOCAST </h1>
<h2 class="tagline">001</h2>
</div>
<div class="sun-battery-container">
<div class="sun-battery"></div>
</div>
<!--</div>-->
Step 2: Styling the calculator
Then, let's style the calculator.
.calculator {
width: 300px;
padding: 20px 25px 45px 25px;
background: radial-gradient(ellipse farthest-corner at 20% 65%, #525864, blueviolet);
color: rgba(255, 255, 255, 0.8);
font-family: 'Overpass Mono', monospace;
border-radius: 20px;
box-shadow: 4px 2px 4px 0 rgba(0, 0, 0, .7),
-4px -2px 18px 0 rgba(0, 0, 0, .5);
}
We set the width of the calculator to 300px (fixed-width). Also, we set its min-width to 300px. Then we add padding to it. If you don't know how to use padding...read here. Now let's talk about radial-gradient. Previously, we used linear-gradient which is used in lines such as top to bottom or left to right. But radial-gradient can look like an ellipse or a circle.
background: radial-gradient(ellipse farthest-corner at 20% 65%, #525864, blueviolet); The shape of the radial-gradient, in this case, is set to ellipse, that means, we want it to look like an ellipse. The farthest corner means the gradient should flow to the end of the box in relation to 20% (horizontal direction) and 65% vertical direction. What does this mean?
20% moves the ellipse towards the left of the calculator and 65% move the ellipse a bit closer to the bottom of the calculator. You can change the percentage one by one to see how it changes for proper understanding. Then set the first gradient colour to be 525864 and the second gradient colour to be blueviolet. You can play with the colours in the radial gradient to understand it better.
We set font-family to Overpass Mono', and set monospace; as a fallback in case Overspass Mono is missing. And we set its border-radius to 20px. If you don't understand what border-radius is, read it here.
box-shadow: 4px 2px 4px 0 rgba(0, 0, 0, .7),
-4px -2px 18px 0 rgba(0, 0, 0, .5);
We set the right shadow of the calculator to 40px, the bottom shadow of the calculator to 2px, blur-radius to 4px, spread to nothing and the shadow color is set to black with 70% transparency.
Also, we put a comma(,) which means we want to add another shadow to the element to have multiple shadows. -4px set the left shadow of the calculator, -2px set the top shadow of the calculator. We add 18px blur-radius and no spread at all and its color is set to black with 50% transparency.
Step 2: Styling meta-information
.meta-information {
display: flex;
justify-content: space-between;
align-items: center;
}
.heading {
font-family: 'Slabo 27px', serif;
text-shadow: 0 0 2px rgba(255, 255, 255, .2);
}
Almost all the CSS styles below are understandable considering our previous tutorials and you need to use your understanding of box-shadow to understandtext-shadow` because they have similar structures.
If this is your first time reading this tutorial, read my tutorial on CSS box model.
.logo {
margin: 0 0 -5px 0;
font-size: 24px;
}
.tagline {
margin: 0;
font-size: 16px;
}
There we go again...you should understand the code above except the use of negative value (-). Whenever you use a negative value, you would get an opposite result of using a positive value.
Step 4: Style sun-battery
.sun-battery-container {
border-radius: 5px;
border-right: 1px solid rgba(245, 245, 245, .2);
}
In this case, we set the border radius of the the sun-battery-container on all sides (left, right, bottom and top) to 5px.
We also set its border to the right to 1px, a solid line with almost white color with 20% color transparency.
.sun-battery {
width: 105px;
height: 30px;
border-radius: 3px;
background-color: #3d2115;
box-shadow: 0 -3px 4px -3px rgba(255, 9, 9, 0.2),
4px 0 3px -4px rgba(255, 255, 255, .8),
0 2px 4px -2px rgba(0, 0, 0, .5),
-3px 0 3px -1px rgba(0, 0, 0, .8),
inset 0 -4px 3px -3px rgba(0, 0, 0, .5),
inset 4px 0 4px -2px rgba(0, 0, 0, .8);
background-image: repeating-linear-gradient(to right,
transparent,
transparent 26px,
rgba(255, 255, 255, .1) 26px,
rgba(255, 255, 255, .1) 27px);
}
Okay! We have explained almost everything in the sun-battery styles but we only need to explain repeating-linear-gradient.
Anyway, I won't explain it now intentionally. So go and find out by yourself.
Oh wait!
We will talk about it in the next lesson when we build the screen of the calculator.
Hurrayyyyyyy! Here is the result we get in this lesson:
