Бороздя просторы интернета в поиске решения каких-то своих задач, нередко нахожу кучу других интересных и полезных сервисов. Так, недавно задался целью нарисовать стрелку для сайта. Фотошоп я сразу отбросил. Как-то это «по-детски». Куда более практично использовать CSS3, о котором, как выяснилось, я знаю очень мало (надо будет как-нибудь подтянуть свои знания по каскадным таблицам стилей).
В итоге, по запросу «стрелки на CSS», нашел несколько онлайн генераторов.
С их помощью можно не только сделать стрелку, но и на чистом CSS3 создать «облака мыслей». Вы наверняка их видели на изображениях. Они, как правило, отображают мысли или речь персонажа на картинке. Имеют вид блока (овала или прямоугольника, чаще - облака) со стрелочкой.
А так же, учитывая то, что «облака мыслей» стилистически очень похожи на тултипы (tooltips), то это по совместительству еще и генератор форм для тултипов.
Онлайн конструктор стрелок и облаков мыслей от Phpguru
Cssarrowplease - онлайн сервис с неплохим функционалом, который позволит быстро создать весьма симпатичные «облака мыслей», а так же стрелки (к сожалению, не очень симпатичные) с помощью CSS3.
В настройках можно задать:
- Цветовые схемы;
- Расположение стрелок;
- Их размер;
- Положение;
- Толщину обводки;
- Высоту блоков;
- Ширину;
- Скругление углов;
- Тень;
- Вписать текст в «Облако мыслей»;
- Тень текста.
В итоге вы получите готовые HTML и CSS, которые можно вставить на свой сайт.
К сожалению, этот сервис не генерирует JavaScript, который необходим для создания тултипов, поэтому сгодиться он только как конструктор самой формы.
Сервис создания стрелок и «облаков мыслей» на CSS3 – cssarrowplease
Cssarrowplease – англоязычный сервис, который значительно уступает предыдущему по возможностям. Тем не менее, создать простенькие «облака» он может (со стрелками опять же - беда, так как граница не цельная).
Кроме того, Cssarrowplease создает только CSS, а HTML вам необходимо сделать самостоятельно. Или скопировать отсюда:
<div class=”arrow_box”></div>
Создание тултипов в онлайн сервисе Qtip2
Qtip2 - с помощью этого англоязычного сервиса можно создать тултип. Конструктор генерирует полностью готовые для вставки на сайт CSS и JavaScript коды.
