CSS Shapes Collection 1

CSS Shapes Collection 1

 
VIEW DEMO   DOWNLOAD SOURCE

Hey! Wass up! friends.Today we are going towards the new tutorial which is from the Collections (This is the very first tutorial of our “Collection” Series). So today we’re gonna be discussing about Shapes i.e. CSS Shapes Collection 1.

This CSS Shapes Collection 1 includes 5 shapes which are – Square, Rectangle, Circle, Triangle & Oval. Before going further i suggest you to go through the “Demo”. Obviously, all the shapes are totally generated using CSS. Also all the shapes has been defined as a <div> tags & the id’s of div tags are taken into consideration. Just for an example this is the html which we’ve used here…

<div id="square"></div>      <!--  for generating Square  -->
<div id="rectangle"></div>   <!--  for generating Rectangle  -->
<div id="circle"></div>      <!--  for generating Circle  -->
<div id="triangle"></div>    <!--  for generating Triangle  -->
<div id="oval"></div>        <!--  for generating Oval  -->
Square Shape
So lets get started with our CSS part. Lets take “Square” first. Generally to generate a square shape we need two things, first is the “width” & the second one is “height”. And a shape to be square both properties is to be the same. i.e. if width=200 then height=200 (width=height). Thats it! now you’re ready with the square shape now…

#square {     /*The id of the 
tag*/ width: 300px; height: 300px; background: #FF4400; }
Rectangle Shape
Talking about a rectangle only makes a difference in the properties of width & height. Its just the opposite of square i.e. if width=200 then height=300 or anything else except ‘200’ (width≠height). Here the CSS code should be like…

#rectangle {     /*The id of the 
tag*/ width: 300px; height: 100px; background: #FF4400; }
Circle Shape
For a Circle we just want a radius element to define the radius, thats all we need. Similarly we define width & height (keep in mind, width=height) & the border-radius that should be also equal to width & height for a “perfect circle” (width=height=border-radius). Lets see the CSS part of the Circle…

#circle {     /*The id of the 
tag*/ width: 300px; height: 300px; background: #FF4400; border-radius: 400px; /*this gives radius of the circle*/ -moz-border-radius: 400px; /*radius for firefox*/ -webkit-border-radius: 400px; /*radius for chrome or safari*/ }
Oval Shape
Its same as the Circle we just want a radius element to define an additional radius or property. We define width & height (keep in mind, width≠height) & the border-radius that should be depending on your width & height. The additional property/radius is defined by the “border-radius” property, that should be somewhat different from the Circle i.e. “border-radius: p1 / p2″ (See line 5 of the below code). Lets see the CSS part now…

#oval {                       /*The id of the 
tag*/ width: 300px; height: 300px; background: #FF4400; border-radius: 400px; /*this gives radius of the circle*/ -moz-border-radius: 400px; /*radius for firefox*/ -webkit-border-radius: 400px; /*radius for chrome or safari*/ }
Triangle Shape
Its different & somewhat typical from all the above shapes we’ve discussed till now. It has width=height=0, that define the nose of the triangle. The next important property is the border-left, border-right & border-bottom which defines the border of the left edge, right edge & the bottom edge respectively. Lets see the line 4,5&6 of the below CSS code…

#triangle {                       /*The id of the 
tag*/ width: 0; height: 0; border-left: 250px solid transparent; /*left edge*/ border-right: 250px solid transparent; /*right edge*/ border-bottom: 400px solid #FF4400; /*bottom edge also defining the color*/ }

Thats all! for this “CSS Shapes Collection: 1″. We’ll be coming with our new collection soon i.e. “CSS Shapes Collection: 2″ which will be more attracting and quite difficult than all these shapes… Keep visiting our site & share as much as you can…

Author Description

humanz

Our mission is to bring the affordable Technology education to people everywhere, in order to help them achieve their dreams and change the world. - Follow @program_guide

There are 1 comments. Add yours

  1. Pingback: Ghost Buttons (The Buttons you wanna Lick) - CSS Tuts | Coders Don't Sleep July 6, 2014

    […] in the shape of a rectangle box. You can change the shape according to your specifications (See the CSS Shapes Collection 1 Tutorial to learn about making shapes using CSS). The CSS for the gbutton1 is shown […]

Join the Conversation