Saturday, January 12, 2019

CREATING AMAZING SHAPES WITH CASCADING STYLE SHEET|SEE FOR YOURSELF

CENTAPRENEUR 8:13 PM CSS , SHAPES , STYLING 1 comment :

CSS is reputable for its miraculous way of beautifying web pages. In today’s lesson, I’m going to teach you something a little bit advanced, so if you’ve not studied my previous lesson, then I’m afraid you will be confused and frustrated when we get to the examples. But if you’ve been following me, then you will have no iota of confusion in this lesson. Let’s move on.

There are, however, few things I want you to know before going further. These things, together with other concepts in our previous will help prepare you in the practical aspect of this lesson.

They include:

a) Box-shadow: This is a feature in CSS 3 that is used to determine the shadow of a box.

b) Z-index: It is useful for creating a parallel effect on a box. the box with higher z-index value will be on top of the one with a lower z-index value. You can build scrolling headers or navigation bars using z-index property.

Having considered these few technical elements, we can now move into examples.

Open your text editor and write the following codes

In HTML document

<body>

<div class="c">Green</div>

<div class="d">Orange</div>

<div class="e">Black</div>

<div class="f">Yellow</div>

<div class="g">purple</div>

</body>

In External CSS

.a{

color: #FFF;

background-color: blue;

margin-bottom: 15px;

width: 100px;

height: 100px;

box-shadow: 10px 10px 5px 5px #888;

z-index: 1;

}

.b{

color: #FFF;

background-color: red;

position: relative;

width: 100px;

height: 100px;

margin-top: -50px;

margin-left: 50px;

box-shadow: 10px 10px 5px 5px #888;

z-index: 2;

}

.c{

color: #FFF;

background-color: green;

position: relative;

width: 100px;

height: 100px;

margin-top: -50px;

margin-left: 100px;

box-shadow: 10px 10px 5px 5px #888;

z-index: 3;

}

.d{

color: #FFF;

background-color: orange;

position: relative;

width: 100px;

height: 100px;

margin-top: -50px;

margin-left: 150px;

box-shadow: 10px 10px 5px 5px #888;

z-index: 4;

}

.e{

color: #FFF;

background-color: black;

position: relative;

width: 100px;

height: 100px;

margin-top: -50px;

margin-left: 200px;

box-shadow: 10px 10px 5px 5px #888;

z-index: 5;

}

.f{

color: black;

background-color: yellow;

position: relative;

width: 100px;

height: 100px;

margin-top: -50px;

margin-left: 250px;

box-shadow: 10px 10px 5px 5px #888;

z-index: 6;

}

.g{

color: white;

background-color: purple;

position: relative;

width: 100px;

height: 100px;

margin-top: -50px;

margin-left: 300px;

box-shadow: 10px 10px 5px 5px #888;

z-index: 7;

}

REFERENCE THE EXTERNAL CSS IN YOUR HTML DOCUMENT. IT WILL LOOK LIKE THIS AFTER YOU’VE REFERENCED IT.

SAVE AND OPEN IT, IT WILL LOOK LIKE THIS

WRAPPING UP

You have any questions with regard to the above example, feel free to make use of the disqus comment box below. Our next lesson will be more expectional. Keep investing in yourself.