Some Friday Joy on CSS3

So I decided to bring some Friday joy, demonstrate the power of CSS3 and cheer up those who have Internet Explorer. Watch here .



Well, if you're wondering how I did it, then ...



So a bit of HTML:

<div class="breast"> <div class="left"> <ul class="boob"> <li class="nipple"></li> </ul> </div> <div class="right"> <ul class="boob"> <li class="nipple"></li> </ul> </div> </div> 

Initial styles:

 .breast { width: 222px; margin: 200px auto 0; } .breast .left { float: left; } .breast .right { float: right; } .breast .boob { border: 1px solid black; border-top: none; width: 100px; height: 56px; padding: 0; margin: 0; } .breast .boob .nipple { margin: 0 auto; padding: 18px 0 0; font-size: 40px; line-height: 20px; width: 20px; height: 20px; list-style-position: inside; color: #ff9999; content: '\A0'; /*  Opera,      LI */ } 

We get this (and IE8 will stop at this):



')

Well, we will continue. Here is the CSS3 magic:

 .breast .boob { -moz-border-radius: 0 0 60px 60px; -webkit-border-bottom-right-radius: 60px; /* Safari -   -webkit-border-radius: 0 0 60px 60px */ -webkit-border-bottom-left-radius: 60px; /*     */ border-radius: 0 0 60px 60px; -moz-transform: rotate(15deg); -webkit-transform: rotate(15deg); -o-transform: rotate(15deg); } .breast .right .boob { -moz-transform: rotate(-15deg); -webkit-transform: rotate(-15deg); -o-transform: rotate(-15deg); } 

Result:





And a bit of the dynamics via jQuery UI:

 $(function() { $('.breast .left, .breast .right').effect('bounce'); }); 

Well, and so on. The result is here . Have a nice Friday and weekend!