Немного пятничной радости на CSS3

Вот решил принести немного пятничной радости, продемонстрировать силу CSS3 и поднять настроение тем, у кого Internet Explorer. Смотреть тут.

Ну а если интересно — как я это сделал, то…

Итак, кусочек 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>

Начальные стили:

.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 */
}

Получим такое (и на этом IE8 остановится):


Ну а мы продолжим. Вот та самая магия CSS3:

.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);
}

Результат:


И немного динамики via jQuery UI:

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

Ну и так далее. Итог тут. Приятной пятницы и выходных!