Создание пузырей, как в комиксах
Три пузыря
Сначала создаем основной пузырь. HTML разметка будет выглядеть так:
Я думаю,
что это очень крутая техника!
а стиль будет выглядеть так:
#container { margin: 0 auto; padding: 0 0 50px; width: 500px; font: 1em/1.4 Cambria,Georgia,sans-serif; } blockquote p { font-size: 2em; margin: 0; text-align: center; } .oval-thought-border { -moz-border-radius: 240px 240px 240px 240px / 140px 140px 140px 140px; -webkit-border-radius: 240px 240px 240px 240px / 140px 140px 140px 140px; border-radius: 240px / 140px; background: none repeat scroll 0 0 #FFFFFF; border: 10px solid #C81E2B; color: #333333; margin: 1em auto 80px; padding: 70px 30px; position: relative; text-align: center; }
Я думаю,
что это очень крутая техника!
Теперь добавим средний пузырек. Это делается читым CSS3.
.oval-thought-border:before { content:""; position:absolute; z-index:10; bottom:-40px; right:100px; width:50px; height:50px; border:10px solid #c81e2b; background:#fff; /* css3 */ -moz-border-radius:50px; -webkit-border-radius:50px; border-radius:50px; }
Я думаю,
что это очень крутая техника!
И по аналогии добавляем маленький пузырек.
.oval-thought-border:after { content:""; position:absolute; z-index:10; bottom:-60px; right:50px; width:25px; height:25px; border:10px solid #c81e2b; background:#fff; /* css3 */ -moz-border-radius:25px; -webkit-border-radius:25px; border-radius:25px; }
Я думаю,
что это очень крутая техника!