BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

Главная » Рецепты CSS » Красивый комментарий в css или как сделать словесный пузырь

Красивый комментарий в css или как сделать словесный пузырь

2013-03-19 / Вр:19:40 / просмотров: 4944

Всем привет!!! Возможно, вас удивили слова из названия поста "словесный пузырь"?  И вы в недоумении, какое отношение пузырь, да еще словесный, имеет к красивым комментариям? Начну с объяснения, что называется словесным пузырем.
Что такое словесный пузырь?

Любому из вас на глаза попадались комиксы. Их отличие в том, что диалоги между персонажами помещаются в такие рамочки, похожие на тучки или пузырьки со словами. Собственно говоря, эти рамочки и называются - словесный пузырь.

Но какое они имеют отношение к красивым комментариям? Здесь я лучше не расскажу, а просто покажу. Смотрите пример, что можно сделать со словесными пузырями в комментариях:

Красивый комментарий в css или как сделать словесный пузырь,

Конечно, полет фантазий можно расширить и словесный пузырь для комментария сделать намного красивее, чем у меня в примере.
Хочу предложить вам кода красивых словесных пузырей, которые будут работать во всех браузерах, где только будет задействован единственный элемент HTML и несколько строк кода CSS3. А самое важное, что мы обойдемся без картинок и без лишнего JavaScript. Ну как, готовы??? Тогда приступим!

Пример №1

<html>
<head>
<style type="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>

Результат:

Красивый комментарий в css или как сделать словесный пузырь,

Пример №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;
}

Результат:

Красивый комментарий в css или как сделать словесный пузырь,

Пример№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;
}

Результат:

Красивый комментарий в css или как сделать словесный пузырь,

Пример№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;
}

Результат:

Красивый комментарий в css или как сделать словесный пузырь,

Пример №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;
}

Результат: 

Красивый комментарий в css или как сделать словесный пузырь

Вот и разобрались, как сделать словесный пузырь для комментариев. Кстати, словесный пузырь можно использовать не только в комментариях, но и в оформлении новостей сайта, меню, цитат, полезных советов и даже самого сайта.

Ну все пока, до новых встреч!!!

С Уважением WebMasterok2009

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

2 Ответов на комментарий - Красивый комментарий в css или как сделать словесный пузырь

  1. Alex

    Хмм… спасибо, довльно таки полезно!

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Пожалуйста!

    Ответить

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

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Subscribe without commenting

Метки: ,

Мои цели на 2016 год:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Довести количество статей до 600

4). Добиться стабильной посещаемости 2500 человек/сутки

5). Закончить все статьи, которые находятся в черновиках

6). Создать портфолио и мини интернет-магазин шаблонов

7). Создать книгу

8). Добиться стабильной посещаемости 3000 человек/сутки

9). Довести количество статей до 700

10). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 669
Количество страниц на блоге: 20
Количество рубрик на блоге: 27
Количество меток на блоге: 71
Количество комментариев на блоге: 3663