Showing posts with label SHAPES. Show all posts
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.
Saturday, January 12, 2019
CREATING AMAZING SHAPES WITH CASCADING STYLE SHEET|SEE FOR YOURSELF
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="a">Blue</div>
<div class="b">Red</div>
<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.
Monday, December 31, 2018
HOW TO CREATE DIFFERENT SHAPES WITH SVG IN HTML 5 |DETAILED GUIDE
HTML 5
,
SHAPES
,
SVG
No comments
:
Hi, in this lesson, I’m going to hold you by hand and work you through various steps you can use to create shapes using Scalable Vector Graphics (SVG). SVG provides you with different methods for drawing circles, graphic images, paths, boxes, to mention but a few. One remarkable thing about SVG shapes is that it is not defined by pixels or percentages. This means that it can be magnified infinitely without losing its quality and beauty. Let us randomly pick five shapes, code them in HTML 5 and see how the results look.
CREATING SHAPES USING SVG
To put the cart before the horse, there’s one important thing I would like you to note. And that is; you have to create an <svg> tag first before you begin your shape drawing journey. Within the opening and closing tag of <svg>, you have to specify the width and the height of the shape you want to draw.
Below is how the <svg> along with the width and the height, will look like
<svg width=’’ ‘’ height=’’ ‘’></svg>
Now let’s start creating shapes. I will consider 5 shapes because of time and space, you can try as many as you want on your own.
1. CIRCLE
To create a circle with scalable vector graphics, you have to include <circle> tag within the <svg> element in order to indicate the shape type.
Let us consider the example below:
<svg width=’’3000’’ height=’’3000’’>
<circle cx=’’100’’ cy=’’100’’ r=’’60’’ fill=’’green’’ />
</svg>
Save and open it. (On latest browser preferably)
NOTE THESE
a. ‘cx’ is used to push the center of the circle further to the right of the screen
b. ‘cy’ is used to push the center of the circle further down from the top
c. ‘r’ is used to indicate the radius of the circle.
d. ‘fill’ is used to fill in the color of the circle
2. RECTANGLE
To draw a rectangle, you should use <rect> element. Consider the example below
<svg width ‘’1000’’ height=’’1000’
<rect width=’’400’’ height=’’200’’
X=’’20’’ y=’’20’’ fill=’’green’’ />
</svg>
3. LINE
To draw a line, use the <line> element. Consider the example below
<svg width ‘’500’’ height=’’500’
<line x1=’’10’’ y1=’’10’’ x2=’’210’’ y2=’’100’’
Style=stroke:#0000FF; stroke=line cap:round;
Stroke width:’’20’’ />
</svg>
NOTE
X1, y1 indicates the start coordinates while x2, y2 signifies the end coordinates
4. ELLIPSE
Drawing ellipse is similar to drawing a circle. The only difference is that you can change the horizontal and vertical axes of the radius using the ‘’rx’’ and ‘’ry’’ attributes. Consider the example below:
<svg height=’’600’’ width=’’1000’’
<ellispse cx=’’290’’ cy=140’’ rx=’’167’’ ry=’’79’’
Style=’’fill:green’’ />
</svg>
5. POLYGON
‘Polygon’ comes from two Greek words: ‘poly’ meaning ‘many’, and ‘gon’ meaning angle. Hence, a polygon can simply mean an angle with more than two sides. To create a polygon in HTML 5, you can use <polygon elements to create a shape of at least three sides. The unique thing about <polygon> element is that it automatically closes off the shape for you after you finish creating it.
Consider the example below:
<svg width=’’3000’’ height=2400’’>
<polygon points=’’100 100 200 200 300 300’’
Style=’’fill:green; stroke:black; />
</svg>
WRAPPING UP
It is often said that practice makes one perfect. On this note, I humbly adjure you to put all the lessons on HTML into practice so that you won’t have difficult when we move to CSS tomorrow
Subscribe to:
Posts
(
Atom
)
