Немного о HTML5 и CSS3

Заметки о HTML5, CSS3 и связанных с ними api

Ошибка в тексте? Выделите и нажмите Cntr+Enter!

Создание пузырей, как в комиксах

Три пузыря

Сначала создаем основной пузырь. 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;
}

Я думаю,
что это очень крутая техника!

Hosted by uCoz