Всем привет!!! Возможно, вас удивили слова из названия поста "словесный пузырь"? И вы в недоумении, какое отношение пузырь, да еще словесный, имеет к красивым комментариям? Начну с объяснения, что называется словесным пузырем.
Что такое словесный пузырь?
Любому из вас на глаза попадались комиксы. Их отличие в том, что диалоги между персонажами помещаются в такие рамочки, похожие на тучки или пузырьки со словами. Собственно говоря, эти рамочки и называются - словесный пузырь.
Но какое они имеют отношение к красивым комментариям? Здесь я лучше не расскажу, а просто покажу. Смотрите пример, что можно сделать со словесными пузырями в комментариях:
Конечно, полет фантазий можно расширить и словесный пузырь для комментария сделать намного красивее, чем у меня в примере.
Хочу предложить вам кода красивых словесных пузырей, которые будут работать во всех браузерах, где только будет задействован единственный элемент HTML и несколько строк кода CSS3. А самое важное, что мы обойдемся без картинок и без лишнего JavaScript. Ну как, готовы??? Тогда приступим!
Пример №1
<html>
<head>
<style ENGINE="text/css">
p {
position: relative;
background: #ffffff;
border: 1px solid #7d9185;
padding:20px;
}
p:after, p:before {
bottom: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
p:after {
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #ffffff;
border-width: 18px;
left: 50%;
margin-left: -18px;
}
p:before {
border-color: rgba(125, 145, 133, 0);
border-bottom-color: #7d9185;
border-width: 19px;
left: 50%;
margin-left: -19px;
}
</style>
</head>
<body>
<br>
<p>Всем привет!!! Возможно, вас удивили слова из названия поста "словесный пузырь"? И вы в недоумении, какое отношение пузырь, да еще словесный, имеет к красивым комментариям?</p>
</body>
</html>
Результат:
Пример №2
Замените только код CSS, чтобы увидеть другой эффект.
p {
position: relative;
background: #ffffff;
border: 1px solid #7d9185;
}
p:after, p:before {
left: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
p:after {
border-color: rgba(255, 255, 255, 0);
border-left-color: #ffffff;
border-width: 18px;
top: 50%;
margin-top: -18px;
}
p:before {
border-color: rgba(125, 145, 133, 0);
border-left-color: #7d9185;
border-width: 19px;
top: 50%;
margin-top: -19px;
}
Результат:
Пример№3
Замените только код CSS, чтобы увидеть другой эффект.
p {
position: relative;
background: #ffffff;
border: 1px solid #7d9185;
}
p:after, p:before {
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
p:after {
border-color: rgba(255, 255, 255, 0);
border-top-color: #ffffff;
border-width: 18px;
left: 50%;
margin-left: -18px;
}
p:before {
border-color: rgba(125, 145, 133, 0);
border-top-color: #7d9185;
border-width: 19px;
left: 50%;
margin-left: -19px;
}
Результат:
Пример№4
Замените только код CSS, чтобы увидеть другой эффект.
p {
position: relative;
background: #ffffff;
border: 1px solid #7d9185;
}
p:after, p:before {
right: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
p:after {
border-color: rgba(255, 255, 255, 0);
border-right-color: #ffffff;
border-width: 18px;
top: 50%;
margin-top: -18px;
}
p:before {
border-color: rgba(125, 145, 133, 0);
border-right-color: #7d9185;
border-width: 19px;
top: 50%;
margin-top: -19px;
}
Результат:
Пример №5
Здесь мы немного усложним задачу. Сделаем словесный пузырь с закругленными углами, добавим тень и указатель слов сместим влево, а не по центру.
Обратите внимание на строку 28 и 35. Вы можете регулировать параметры left для смещения указателя слов. В строке 28 и 35 параметры должны быть аналогичны друг другу. Смотрим пример.
p {
position: relative;
background: #ffffff;
padding:20px;
background-color: #fff;
border: 2px solid #666;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
-webkit-box-shadow: 2px 2px 4px #888;
-moz-box-shadow: 2px 2px 4px #888;
box-shadow: 2px 2px 4px #888;
}
p:after, p:before {
bottom: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
p:after {
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #ffffff;
border-width: 18px;
left: 4%;
margin-left: -18px;
}
p:before {
border-color: rgba(125, 145, 133, 0);
border-bottom-color: #7d9185;
border-width: 20px;
left: 4%;
margin-left: -20px;
}
Результат:
Вот и разобрались, как сделать словесный пузырь для комментариев. Кстати, словесный пузырь можно использовать не только в комментариях, но и в оформлении новостей сайта, меню, цитат, полезных советов и даже самого сайта.
Ну все пока, до новых встреч!!!
С Уважением WebMasterok2009
Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓
Последние новости категории:
Как растянуть блок на всю высоту экрана с помощью CSS
Анимация (покачивание-swing) текста или изображения при наведении мыши
CSS стили для горизонтальных линий «HR»
Как сделать простой эффект Lightbox на CSS3Похожие статьи
Как подогнать картинку под размер экрана с помощью CSS
Несколько интересных трюков для тега input №2
Популярные статьи:
-
Как узнать id компьютера
Дата: 29 марта 2013
Прокомментировано:90
просмотров: 330379 -
Размеры форматов листов А0 – А7
Дата: 23 января 2013
Прокомментировано:3
просмотров: 274711 -
Смешные логические загадки с подвохом, отгадки прилагаются
Дата: 12 ноября 2014
Прокомментировано:5
просмотров: 222615 -
Готовые макеты блоков для веб-страниц на HTML и CSS
Дата: 25 июня 2014
Прокомментировано:23
просмотров: 187975 -
Установка windows 7 на ноутбук
Дата: 18 декабря 2012
Прокомментировано:169
просмотров: 186569
4 Ответов на комментарий - Красивый комментарий в css или как сделать словесный пузырь
Добавить комментарий
Метки: css, эффекты для сайта
Хмм… спасибо, довльно таки полезно!
Пожалуйста!
Спасибо, пригодилось)
Пожалуйста!!!