Анимированное облако тегов css

Содержание

анимированное облако тегов на css3
Анимированное облако тегов на css3
Как сверстать облако тегов на css?
3 ответа 3
Оформление облака тегов на сайте в виде ярлыков с помощью CSS3
Готовые CSS стили для облака тегов

анимированное облако тегов на css3

Захотелось моей половинке анимированное облако тегов в ЖЖ. Казалось бы, в сети полным-полно вариаций на эту тему: крутящихся, интерактивных, выбирай любое. Но всё это богатство либо на javascript, либо на flash. И прикрутить это к журналу нельзя (стандартный аккаунт, про платные не в курсе).

Нужно было вращающееся облако тегов, написанное на чистом css3. Сразу оговорюсь, решить задачу удалось лишь частично. Попытки что-то лучшее найти не увенчались успехом, в свое время даже публиковал вопрос на Хабре.

Для создания анимации, создается правило @keyframes, в котором указаны начальное, конечное, и, опционально, промежуточные свойства объекта. А для самого объекта указываются свойства animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction. Таким образом оперделяется, какие преобразования происходят с объектом, с какой скоростью и в каком направлении. Есть много учебных ресурсов на эту тему, я пользовался w3schools.com.

Сразу перейду к ограничениям, на которые я наткнулся.
В свойстве animation-name для одного объекта можно указать несколько @keyframes, но они будут выполняться одновременно — нельзя зациклить одно преобразование с периодами в 10 секунд и параллельно другое с периодами в 5.
Возможности animation-timing-function очень ограничены. Теоретически, можно прописать какое угодно поведение объектов, с помощию большого количества промежуточных состояний в @keyframes. Но на практике, анимация шла неказисто, с рывками.

Пришлось упростить самому себе задачу: «дальняя» часть облака не видна, элементы появляются из небытия, и туда же уходят.

Для этого я использую 2 преобразования.
Вот это отвечает за движение сверху вниз:
@keyframes tagmove < from < top:-80px; >to < top:80px; >>
А вот это — за «выплывание» тегов с заднего плана на передний и обратно
@keyframes coloring < from < opacity: 0; >50% < opacity: 1; >to < opacity: 0; >>

Чтобы облако было равномерным и красивым, может потребоваться подогнать параметры animation-duration и animation-delay для разных эелементов. Значения, которые там прописаны — это рукотворный рандом. Также можно заморочиться и использовать абсолютное позиционирование, чего я делать не стал. Исходное расположение Тегов в облаке дает нужный псевдослучайный разброс по горизонтали и вертикали. Последний можно уменьшить с помощью line-height.

Вот, пожалуй, и всё. Буду рад советам, как сделать лучше

Источник

Анимированное облако тегов на css3

Для этого я использую 2 преобразования.
Вот это отвечает за движение сверху вниз:
@keyframes tagmove from < top:-80px; >
to < top:80px; >
>

А вот это — за «выплывание» тегов с заднего плана на передний и обратно
@keyframes coloring

Вот, пожалуй, и всё. Буду рад советам, как сделать лучше

Источник

Как сверстать облако тегов на css?

Сейчас готов кусок html и css к нему, но верстка не соответствует макету и непонятно, как сделать hover при наведении и всплывающую подсказку над тегом.

 Супер тег Еще один тег И еще тег Классный тег Вот тег последний

При этом на выходе должно получится облако тегов с возможностью раскрыть его и при наведении hover с подсказкой https://yadi.sk/i/t7ATcCq23SqXoq

3 ответа 3

body < background: #1e2429; >.tags < padding: 80px; width: 380px; /* Style for "jQuery" */ color: #ffffff; font-family: Roboto; font-size: 17px; font-weight: 300; line-height: 40px; >.tags a < white-space: nowrap; /* Style for "Rounded Re" */ width: auto; border-radius: 13px; background-color: #090a0b; padding: 5px 10px 5px 10px; text-decoration: none; color: #ffffff; position: relative; /* для подсказки */ >/* это нужно, если есть необходимость что бы можно было навести курсор на подсказку. Иначе будет исчезать */ .tags a:after < content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 20px; visibility: hidden; >.tags a:hover:after < visibility: visible; >.tags a:hover < background: #eb1f63; >/* оформление плашки */ .tags__hide < position: absolute; left: 50%; position: absolute; left: 50%; transform: translateX(-50%); color: #000; background: #fff; padding: 5px 10px; line-height: 1; transition: all .3s; /* параметры для изчезновения/появления. Можете настроить как вам угодно */ visibility: hidden; opacity: 0; bottom: 0; >.tags a:hover .tags__hide < visibility: visible; opacity: 1; bottom: calc(100% + 15px); >/* треугольник */ .tags__hide:before

  Супер тег text hide  Еще один тег И еще тег Классный тег Вот тег последний

* < padding: 0; margin: 0; box-sizing: border-box; >.tags-list < padding: 20px; margin: 25px 0; >.tags-list>li < display: inline-block; vertical-align: top; margin-right: 5px; margin-bottom: 5px; >.tags-list>li>a < position: relative; display: block; padding: 10px 15px; background: #000; color: #fff; border-radius: 15px; >.tags-list>li>a:hover < background: #f00; >.tags-list>li>a[data-tooltip]:before < position: absolute; left: 50%; top: -100%; background: #ccc; color: #000; height: 30px; line-height: 30px; padding: 0 15px; content: attr(data-tooltip); white-space: nowrap; transform: translateX(-50%); >.tags-list>li>a[data-tooltip]:after < position: absolute; left: 50%; top: -10px; margin-left: -7px; border-top: 7px solid #ccc; border-left: 7px solid transparent; border-right: 7px solid transparent; content: ""; >.tags-list>li>a[data-tooltip]:before, .tags-list>li>a[data-tooltip]:after < pointer-events: none; visibility: hidden; opacity: 0; transition: all .3s ease; >.tags-list>li>a[data-tooltip]:hover:after, .tags-list>li>a[data-tooltip]:hover:before

Можно попробовать добавить псевдоэлемент ::before и скрыть его display: none; , а при наведении display: block; , скачать иконочный шрифт в виде всплывающего облака, но не уверен, надо проверять.

Источник

Оформление облака тегов на сайте в виде ярлыков с помощью CSS3

Здравствуйте, друзья. На одном из забугорных сайтов обнаружил красивое оформление облака тегов в виде ярлыков. И сразу же задумался о том, как сделать такое на своем блоге. Сначала показалось, что реализовано все на jQuery, потому что теги очень плавно реагировали на наведение, но потом оказалось, что на чистом CSS3 и HTML. Смотрите пример.

Помнится когда-то давно в WordPress был плагин облака тегов, в виде карусели, но он работал на флеш и сейчас я его уже нигде не вижу, видимо уже неактуален. Теперь можно создать не менее красивые теги, оформленные на HTML. И для этого не нужны никакие модули. Нужно всего лишь задать определенные CSS стили и ваш ресурс преобразится и заиграет новыми красками. Не важно на чем он функционирует, на Joomla, uCoz или Modx. Трудиться будем непосредственно с кодом.

Готовые CSS стили для облака тегов

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50

.post-tag{ margin:-30px 0 35px } .post-tag a{ background-color:#aaa; border-radius:0 2px 2px 0; color:#fff; display:inline-block; font-size:11px; line-height:13px; margin:0 0 2px 10px; padding:4px 7px 3px; position:relative; text-transform:uppercase; transition: 0.2s linear -webkit-transition: 0.2s linear; -moz-transition: 0.2s linear; -o-transition: 0.2s linear; } .post-tag a:before{ border-top:10px solid transparent; border-right:8px solid #aaa; border-bottom:10px solid transparent; content:""; height:0; position:absolute; top:0;left:-8px; width:0; transition: 0.2s linear; -webkit-transition: 0.2s linear; -moz-transition: 0.2s linear; -o-transition: 0.2s linear; } .post-tag a:after{ background-color:#fff; border-radius:50%; content:""; height:4px; position:absolute; top:8px; left:-2px; width:4px } .post-tag a:hover{ background:#444; color:#FFF } .post-tag a:hover:before{ border-right-color:#444 }

Это уже готовые CSS стили для облака тегов, которые будут дополнительными. Их можно вставить в ваш файл таблицы. А Выводить на странице их нужно таким образом:

p class="post-tag">a href="#">Надпись на ярлыке/a>/p>

Чтобы сделать красивое облако тегов для сайта и, главное, чтобы они гармонично вписались в ваш дизайн, стили оформления, можно изменять, а именно цветовую схему по вашему усмотрению. Для этого используйте таблицу безопасных цветов. Если вы так же, как и я ведете дневник на WordPress и хотите все это хозяйство внедрить туда, то нужно заглянуть в код и посмотреть какие классы прописаны к текущим тегам и заменить все параметры CSS стилей на новые. Если плохо в этом разбираетесь, можете написать мне и, возможно я вам помогу. ) А пока скачайте архив с готовыми стилями.

Источник