Генератор стрелок, «облаков мыслей», тултипов на CSS3

Бороздя просторы интернета в поиске решения каких-то своих задач, нередко нахожу кучу других интересных и полезных сервисов. Так, недавно задался целью нарисовать стрелку для сайта. Фотошоп я сразу отбросил. Как-то это «по-детски». Куда более практично использовать CSS3, о котором, как выяснилось, я знаю очень мало (надо будет как-нибудь подтянуть свои знания по каскадным таблицам стилей).

Тултип

В итоге, по запросу «стрелки на CSS», нашел несколько онлайн генераторов.

С их помощью можно не только сделать стрелку, но и на чистом CSS3 создать «облака мыслей». Вы наверняка их видели на изображениях. Они, как правило, отображают мысли или речь персонажа на картинке. Имеют вид блока (овала или прямоугольника, чаще - облака) со стрелочкой.

А так же, учитывая то, что «облака мыслей» стилистически очень похожи на тултипы (tooltips), то это по совместительству еще и генератор форм для тултипов.

Онлайн конструктор стрелок и облаков мыслей от Phpguru

Cssarrowplease - онлайн сервис с неплохим функционалом, который позволит быстро создать весьма симпатичные «облака мыслей», а так же стрелки (к сожалению, не очень симпатичные) с помощью CSS3.

В настройках можно задать:

  1. Цветовые схемы;
  2. Расположение стрелок;
  3. Их размер;
  4. Положение;
  5. Толщину обводки;
  6. Высоту блоков;
  7. Ширину;
  8. Скругление углов;
  9. Тень;
  10. Вписать текст в «Облако мыслей»;
  11. Тень текста.

В итоге вы получите готовые HTML и CSS, которые можно вставить на свой сайт.

Онлайн генератор облаков мыслей, стрелок

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

Сервис создания стрелок и «облаков мыслей» на CSS3 – cssarrowplease

Cssarrowplease – англоязычный сервис, который значительно уступает предыдущему по возможностям. Тем не менее, создать простенькие «облака» он может (со стрелками опять же - беда, так как граница не цельная).

облака мыслей и тултипы

Кроме того, Cssarrowplease создает только CSS, а HTML вам необходимо сделать самостоятельно. Или скопировать отсюда:

<div class=”arrow_box”></div>

Создание тултипов в онлайн сервисе Qtip2

Qtip2 - с помощью этого англоязычного сервиса можно создать тултип. Конструктор генерирует полностью готовые для вставки на сайт CSS и JavaScript коды.

сервис создания tooltips

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *