Создание пузырей, как в комиксах
Три пузыря
Сначала создаем основной пузырь. 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;
}
Я думаю,
что это очень крутая техника!