-->

Saturday, May 26, 2012 Figures CSS

Figures CSS
Today, technology allows you to create CSS more flexible things. CSS3 has successfully replaces the use of graphics in the design of pages, greatly simplifying and easing the code a web page. Today, with CSS you can create not only a realistic gradients, drop shadows, etc. but also to create different shapes. Most of the following codes are used the possibility of CSS3, so will work on the latest browsers. A distinctive feature of the establishment of such figures is the fact that you use only one tag of HTML. Appointing him to this or that class, you can easily switch the shape created by the shape.


Square


Source code:

# square  {
        width : 100px ;
        height : 100px ;
        Background : Red ;
}

Rectangle


Source code:

# Rectangle {
        width : 200px ;
        height : 100px ;
        Background : Red ;
}


Range

Source code:

# Circle  {
        width : 100px ;
        height : 100px ;
        Background : Red ;
        -Moz-border-radius: 50px ;
        -Webkit-border-radius: 50px ;
        border-radius: 50px ;
}

Oval


Source code:

# Oval {
        width : 200px ;
        height : 100px ;
        Background : Red ;
        -Moz-border-radius: 100px  / 50px ;
        -Webkit-border-radius: 100px  / 50px ;
        border-radius: 100px  / 50px ;
}

Triangle up


Source code:

# Triangle-up {
        width : 0 ;
        height : 0 ;
        border-left : 50px  Solid  transparent ;
        border-right : 50px  Solid  transparent ;
        border-bottom : 100px  Solid  Red ;
}

The star (6 end)




Source code:

# Star-six {
        width : 0 ;
        height : 0 ;
        border-left : 50px  Solid  transparent ;
        border-right : 50px  Solid  transparent ;
        border-bottom : 100px  Solid  Red ;
        position : relative ;
}
# Star-six: after {
        width : 0 ;
        height : 0 ;
        border-left : 50px  Solid  transparent ;
        border-right : 50px  Solid  transparent ;
        border-top : 100px  Solid  Red ;
        position : absolute ;
        content : "" ;
        top : 30px ;
        left : 50px- ;
}

Trapezoid


Source code:

# Trapezoid {
        border-bottom : 100px  Solid  Red ;
        border-left : 50px  Solid  transparent ;
        border-right : 50px  Solid  transparent ;
        height : 0 ;
        width : 100px ;
}


Parallelogram

Source code:

# Parallelogram {
        width : 150px ;
        height : 100px ;
        -Webkit-transform: skew ( 20 deg);
           -Moz-transform: skew ( 20 deg);
             -O-transform: skew ( 20 deg);
        Background : Red ;
}

The triangle down to the right


Source code:

# Triangle-bottomright {
        width : 0 ;
        height : 0 ;
        border-bottom : 100px  Solid  Red ;
        border-left : 100px  Solid  transparent ;
}

Triangle Down Left


Source code:

# Triangle-bottomleft {
        width : 0 ;
        height : 0 ;
        border-bottom : 100px  Solid  Red ;
        border-right : 100px  Solid  transparent ;
}

Triangle top right


Source code:

# Triangle-topright {
        width : 0 ;
        height : 0 ;
        border-top : 100px  Solid  Red ;
        border-left : 100px  Solid  transparent ;
}


Triangle top left

Source code:

# Triangle-topleft {
        width : 0 ;
        height : 0 ;
        border-top : 100px  Solid  Red ;
        border-right : 100px  Solid  transparent ;
}


Right Triangle

Source code:

# Triangle- right  {
        width : 0 ;
        height : 0 ;
        border-top : 50px  Solid  transparent ;
        border-left : 100px  Solid  Red ;
        border-bottom : 50px  Solid  transparent ;
}


The triangle to the left

Source code:

# Triangle- left  {
        width : 0 ;
        height : 0 ;
        border-top : 50px  Solid  transparent ;
        border-right : 100px  Solid  Red ;
        border-bottom : 50px  Solid  transparent ;
}

The star (5 end)




Source code:

# Star-five {
   margin : 50px  0 ;
   position : relative ;
   display : block ;
   Color : Red ;
   width : 0px ;
   height : 0px ;
   border-right :   100px  Solid  transparent ;
   border-bottom : 70px   Solid  Red ;
   border-left :    100px  Solid  transparent ;
   -Moz-transform: rotate ( 35 deg);
   -Webkit-transform: rotate ( 35 deg);
   -Ms-transform: rotate ( 35 deg);
   -O-transform: rotate ( 35 deg);
}
# Star-five: before {
   border-bottom : 80px  Solid  Red ;
   border-left : 30px  Solid  transparent ;
   border-right : 30px  Solid  transparent ;
   position : absolute ;
   height : 0 ;
   width : 0 ;
   top : 45px- ;
   left : 65px- ;
   display : block ;
   content : '' ;
   -Moz-transform: rotate ( -35 deg);
   -Webkit-transform: rotate ( -35 deg);
}
# Star-five: after {
   position : absolute ;
   display : block ;
   Color : Red ;
   top : 3px ;
   left : 105px- ;
   width : 0px ;
   height : 0px ;
   border-right : 100px  Solid  transparent ;
   border-bottom : 70px  Solid  Red ;
   border-left : 100px  Solid  transparent ;
   -Moz-transform: rotate ( -70 deg);
   -Webkit-transform: rotate ( -70 deg);
   content : '' ;
}

Pentagon




Source code:

# Pentagon {
    position : relative ;
    width : 54px ;
    border-width : 50px  18px  0 ;
    border-style : Solid ;
    border-Color : Red  transparent ;
}
# Pentagon: before {
    content : "" ;
    position : absolute ;
    height : 0 ;
    width : 0 ;
    top : 85px- ;
    left : 18px- ;
    border-width : 0  45px  35px ;
    border-style : Solid ;
    border-Color : transparent  transparent  Red ;
}
Digg it StumbleUpon del.icio.us

2 comments:

Yadav Rakesh said...

I like This your company We found that your company is leading web designing and website Development Company in your city. We appreciate your creativity and portfolio of website designing. We also come to know you are doing well in search engine optimization inAhemadabad. Here we are Ahmedabad based company #1 Vinayak InfoSoft – dealing in website designing in ahmedabad, web development in ahmedabad and search engine optimization in ahmedabad.Once again thanks for sharing our view (comment) on your blog with all internet user. We wish best luck for your bright future.user. We wish best luck for your bright future."http://www.ahmedabadwebdesigning.com/
Ahmedabad Web Designing

DirectBlack22 said...

Very interesting, Thank you for sharing this blog post.We are good Manufacturer, exporter and Supplier of
tert-Butylhydroquinone ,
TBHQ ,
T-BHQ ,
Direct Black 22
Chemicals Exporter
dichlone .

Post a Comment

 
Copyright 2010 let it snow
Carbon 12 Blogger template by Blogger Bits. Supported by Bloggermint