Четверг, 22 Ноября 2012 17:21

Делаем bubble на CSS

Written by 
Оцени эту запись
(2 Голоса)

В данной статье я расскажу как сделать bubble при помощи CSS и псевдоклассов before и after.

 

 

 

Для реализации bubble сделаем такую структуру:

 

<div class="bubble">Bubble Text</div>

 

Стилизируем наш блок и добавим ему псевдокласс before:

 

<style>

.bubble {

width: 200px;

height: 100px;

background: blueviolet;

-webkit-border-radius: 50px;

-moz-border-radius: 50px;

 

border-radius: 50px;
 
position: relative;
 
margin: 30px auto;
 
text-align: center;
 
line-height: 100px;
 
vertical-align: middle;
 
}
 
.bubble:before {
 
content: '';
 
display: block;
 
background: transparent
 
width: 0;
 
height: 0;
 
position: absolute;
 
bottom: 0;
 
left: 50px;
 
border-top: 20px solid blueviolet; 
 
border-right: 20px solid transparent;
 
border-bottom: 20px solid  transparent; 
 
border-left: 20px solid blueviolet;
 
}

</style>

 

 

Bubble Text

 

 

Идея понятна? Стилизировать можно любым образом. Если нужно что-то вроде обводки другого цвета, тогда нужно блоку добавить ее в роли border'а и прописать еще псевдоэлемент after. Для before границы цвета обводки блока, а after цвета блока и спозиционирован сверху

 

 

Additional Info

Добавить комментарий


Защитный код
Обновить

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов