Введение
Приветствую, уважаемый читатель.
Зашёл как-то я очередной раз на Gmail, чтобы проверить почту, и вдруг мне в глаза бросился этот колокольчик оповещений:
Не знаю почему, но раньше никогда не обращал на него внимания. Это была обычная картинка, точнее спрайт, вот хорошая статься на эту тему habrahabr.ru/post/159027
Ещё немного посмотрев на него, подумал, почему бы не рисовать его с использованием CSS3?
Стиль его рисования будет подобен рисованию словесного пузыря, как рисуется пузырь можно посмотреть здесь htmlbook.ru/blog/kak-sdelat-slovesnyi-puzyr-na-css3-bez-kartinok
Весь метод рисования держится на двух псевдоэлементах :Before и :After подробнее можно почитать тут habrahabr.ru/post/154319
Колокольчик
Добавим один элемент в Html, нужно же где-то его рисовать
<div class="bell"></div>
Давайте посмотрим, каким образом будем его рисовать, т.е. определим, что у нас будет ::Before, а что ::After
Основой будет синяя рамка, а точнее только нижняя грань. Before будет верхняя часть колокольчика, after оставшаяся нижняя.
Добавим основу, нашу рамку.
.bell{
position: relative;
background-color: #fff;
width: 150px;
height: 150px;
border: 10px solid;
}
Свойство position: relative, необходимо чтоб задать наш колокольчик. У нас рисуется такая рамка:
От этой рамки оставим только нижнюю часть, для этого сделаем все границы прозрачные кроме нижней:
border-color: transparent transparent #666 transparent;
Дальше нарисуем нижнюю часть, эту маленькую плюшечку, она тоже будет представлена в виде нижней границы. Используем свойство border для создания любого типа треугольника. Если уменьшить ширину и высоту нашего элемента до нуля, а затем использовать границы разной толщины, то мы увидим как появляются разные треугольники.
Для этой плюшечки сделаем все границы прозрачные, кроме нижней и установим толщину границы в 30px, для лучшей видимости, также она будет иметь абсолютное позиционирование
.bell::before {
content: '';
position: absolute;
width: 0;
height: 0;
left: 50px;
top: 170px;
border: 30px solid;
border-color: #666 transparent transparent transparent;
}
Результат:
Теперь добавим оставшуюся верхнюю часть:
.bell::after {
content: '*';
color: #666;
font-size: 40px;
text-align: center;
position: absolute;
width: 130px;
height: 140px;
border: 10px solid;
border-color: #666 #666 transparent #666;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 80px 80px 0 0;
}
border-radius: 80px 80px 0 0;
border-color: #666 #666 transparent #666;
Эту звёздочку '*' я нарисовал не просто так, не потому что гугл может подать в суд за воровство их колокольчика, а потому что банально не придумал, как изобразить этот верхний пиптичек, без использования ещё одного дива, если есть предложения напишите в комментариях.
Что получилось jsbin.com/uSaLIKa/1/edit
Это моя первая статья, заранее извиняюсь за ошибки.