• Главная
  • Карта сайта
Не найдено

Красивый комментарий в 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 , эффекты для сайта

Новости
Провайдеры:
  • 08.09.2015

    Batyevka.NET предоставляет услуги доступа к сети Интернет на территории Соломенского района г. Киева.Наша миссия —... 
    Читать полностью

  • 08.09.2015
    IPNET

    Компания IPNET — это крупнейший оператор и технологический лидер на рынке телекоммуникаций Киева. Мы предоставляем... 
    Читать полностью

  • 08.09.2015
    Boryspil.Net

    Интернет-провайдер «Boryspil.net» начал свою работу в 2008 году и на данный момент является одним из крупнейших поставщиков... 
    Читать полностью

  • 08.09.2015
    4OKNET

    Наша компания работает в сфере телекоммуникационных услуг, а именно — предоставлении доступа в сеть интернет.Уже... 
    Читать полностью

  • 08.09.2015
    Телегруп

    ДП «Телегруп-Украина» – IT-компания с 15-летним опытом работы на рынке телекоммуникационных услуг, а также официальный... 
    Читать полностью

  • 08.09.2015
    Софтлинк

    Высокая скоростьМы являемся участником Украинского центра обмена трафиком (UA — IX) с включением 10 Гбит / сек... 
    Читать полностью

rss