Saturday, January 26, 2019
CREATING BEAUTIFUL CIRCLES AND ELLIPTICAL SHAPES USING CSS
CSS
,
CSS3
,
SHAPES
No comments
:
In this lesson, I will be teaching you how to create
amazing shapes such as circles, ellipsis and so on. We attempted to create some shapes in our
HTML lessons but I don’t think those shapes are beautiful and colorful. With
Cascading Style Sheet, you can do amazing things with shapes, such as adding
texts, inner and outer shadow to shapes and many more amazing things. Let’s get
started.
Open your text editor, and write the following codes
HTML
<div>
<p>circle</p>
</div>
CSS
div{
width: 200px;
height: 200px;
background-color: mediumseagreen;
color: white;
border-radius:
100px;
}
p{
padding-left:
70px;
padding-top:
100px;
font-weight:
bolder;
font-size:
xx-large;
}
REFERENCE THE
CSS IN HTML, it will look like this
SAVE AND
OPEN IT, IT WILL LOOK LIKE THIS
For
Elliptical Shapes
HTML
<div></div>
CSS
div{
width: 200px;
height: 100px;
background-color: darkblue;
border-radius:
50% 50% 50% 50%;
}
REFERENCE
THE CSS IN HTML, IT WILL LOOK LIKE THIS
SAVE AND
OPEN IT, IT WILL LOOK LIKE THIS
WRAPPING UP
Keep on practicing, never give up. Our next lesson
will be awesome.
Subscribe to:
Post Comments
(
Atom
)
No comments :
Post a Comment