Ellipse in CSS3.0

In my previous post, i have explained how to create a circle in CSS3.0, now ill explain how to create a ellipse in CSS3. This is done by another CSS3 properties called transform. Transform has several attribute. But we will use any one like scale or skew. Alright. First we need to create a circle. You can read my previous post to know that. Its the same HTML


<div class="circle">
 <div class="text">
 This is a Text
 </div>
</div>

Now the main tweak is in CSS. we are going to use the magic property transform. This is not implemented in IE9 so it wont work with IE9. It works perfect with firefox, chorme and safari.


.circle {
 width:200px;
 height:200px;
 border:#000 2px solid;
 border-radius:100px;
 background:#CCC;
 -moz-transform:scaleY(0.4);
 -webkit-transform:scaleY(0.4);
 margin-top:-60px;;
}

The prefix -moz is for firefox. and -webkit- is for chorme and safari. If you want to support it for opera then use the prefix -o. Here i have used scale property to scale the Y to 40% of its original height. Giving the value scaleY(2); will double the size of the Y axis. 0.4 will reduce the size of the Y axis. Now here to do the same skewY can also be used. But skewY changes the position of the ellipse.

Now the ellipse is formed but what happened to the content inside it. They also will be scaled down to 40%. To overcome this we have to scale up the contents inside the ellipse. The trick is done by the following CSS code.


.text {
 -moz-transform:scaleY(2.5);
 -webkit-transform:scaleY(2.5);
 padding-top:50px;
 padding-left:50px;
}

You have to calculate what’s the value to be put on scaleY. You got to be good at math. We are reducing the overall size to 40%. Whats the ratio between 100% and 40%. Calculate it by dividing 100 with 40. Then we get 2.5. This should be given to scaleY attribute. For example if the ellipse is scaled down by 0.5 then dividing 100 with 50 gives 2. So we have to give scaleY(2); to the transform property of the contents.

The Ellipse can also be created in vertical direction by scaling x axis down by using scaleX() instead of scaleY().

3 Responses to “Ellipse in CSS3.0”

  • Naresh:

    Sir,
    I am sincerely checking your site daily. I am at extreme eager to know about CSS3 and HTML5. Reading stuffs make me feel boredom. So can you upload some video tutorials so that it would be easy for ppl like us to learn.

    Note: Please provide subtitles if the language is not தமிழ் .

  • Logs:

    Hey dude ! is it possible to implement to run the code as an option ? a seperate page would b cool or ny iframe !

Leave a Reply