Красивый комментарий в css или как сделать словесный пузырь
Опубликовано: 06.09.2018
Всем привет!!! Возможно, вас удивили слова из названия поста " словесный пузырь "? И вы в недоумении, какое отношение пузырь, да еще словесный, имеет к красивым комментариям? Начну с объяснения, что называется словесным пузырем.
Что такое словесный пузырь?Любому из вас на глаза попадались комиксы. Их отличие в том, что диалоги между персонажами помещаются в такие рамочки, похожие на тучки или пузырьки со словами. Собственно говоря, эти рамочки и называются - словесный пузырь.
Но какое они имеют отношение к красивым комментариям ? Здесь я лучше не расскажу, а просто покажу. Смотрите пример, что можно сделать со словесными пузырями в комментариях:
Конечно, полет фантазий можно расширить и словесный пузырь для комментария сделать намного красивее, чем у меня в примере.
Хочу предложить вам кода красивых словесных пузырей, которые будут работать во всех браузерах, где только будет задействован единственный элемент 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>Результат:
Пример №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 , эффекты для сайта
