css3 - opera logo

 

 

 

 

Below is a perfect example of this is how to use css3 gradient. I often looks opera logo. Even in photoshop or illustrator its difficult to create. but below is an example without any image designer made the logo with simple css3 gradient property.

Border Radius

-moz-border-radius: 220px/235px;
-webkit-border-radius: 220px 235px;
border-radius: 220px/235px; 

Gradients

background: #E71616;
background: -moz-linear-gradient(-90deg, #FE878A, #E71616 50%, #800000 80%, 
    #800000 85%, #b80304);
background:   -o-linear-gradient(        #FE878A, #E71616    , #800000 80%, 
    #800000 85%, #b80304);
background: -webkit-gradient(linear, 0 top, 0 bottom, from(#FE878A),
    color-stop(50%, #E71616), color-stop(80%, #800000), 
    color-stop(85%, #800000), to(#b80304) );

Box Shadow

-webkit-box-shadow: 0 100px 30px hsla(0,0%,0%,.2);
   -moz-box-shadow: 0 100px 30px hsla(0,0%,0%,.2);
        box-shadow: 0 100px 30px hsla(0,0%,0%,.2);

 HTML:

 

       
   

   

   

   

   

   

   

   

CSS: