Как сделать красивые метки (теги) для сайта только с помощью CSS3

Разместил / Просмотров: 5 255 / комментариев 16

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

Теги — это один из самых Важных этапов в навигации на сайте. Казалось бы кто этими метками пользуется, и зачем они вообще нужны? Я говорю Вам, нужны. Я недавно заметил, что если я захожу на какой нибудь сайт то ищу сразу эти теги.  С помощью их очень удобно ориентироваться на сайте, легче найти то что ищешь. Одним словом это второе меню сайта, только более подробное.

А вот если они ещё и красивые, тогда вообще супер, так и хочется нажать на них :-)

Вот и мы сегодня будем делать подобное для нашего сайта. А ещё прибавим не много анимации, чтобы вообще эффектно смотрелось. Анимацию мы взяли здесь. Хочу сказать, что теги делать будем только на CSS, а это значит, что нет изображений и загрузка, естественно, быстрее.

Хотелось бы добавить, что в исходниках есть три примера. Но на практике мы рассмотрим только один. Почему? Потому что в двух примерах изменён только цвет, там всё очень просто, и проблем с эти возникнуть не должно. Ну ладно, давайте уже будем делать.

Пример ι Cкачать исходники

HTML

Для начала нужно задать класс для меток, делается это с помощью обычных тегов <div>. А HTML код меток я взял уже готовый со своего блога. В конечном итоге вот, что у меня получилось:

<div class="tagcloud">

<a title="1 запись" href="http://beloweb.ru/tag/3d-risunki">3d рисунки</a>
 <a title="46 записей" href="http://beloweb.ru/tag/css">CSS</a>
 <a title="6 записей" href="http://beloweb.ru/tag/google">Google</a>
 <a title="25 записей" href="http://beloweb.ru/tag/html">HTML</a>
 <a title="41 запись" href="http://beloweb.ru/tag/jquery">JQuery</a>
 <a title="10 записей" href="http://beloweb.ru/tag/photoshop">Photoshop</a>
 <a title="13 записей" href="http://beloweb.ru/tag/psd">PSD</a>
 <a title="1 запись" href="http://beloweb.ru/tag/rss">RSS</a>
 <a title="2 записи" href="http://beloweb.ru/tag/twitter">Twitter</a>
 <a title="2 записи" href="http://beloweb.ru/tag/belyie-katalogi">Белые каталоги</a>
 <a title="9 записей" href="http://beloweb.ru/tag/blog">Блог</a>
 <a title="1 запись" href="http://beloweb.ru/tag/vkladki">Вкладки</a>
 <a title="9 записей" href="http://beloweb.ru/tag/galereya-na-sayt">Галерея на сайт</a>
 <a title="64 записи" href="http://beloweb.ru/tag/dizayn">Дизайн</a>
 <a title="10 записей" href="http://beloweb.ru/tag/ikonki">Иконки</a>
 <a title="27 записей" href="http://beloweb.ru/tag/interesnoe-v-seti">Интересности</a>
 <a title="6 записей" href="http://beloweb.ru/tag/knopki">Кнопки</a>
 <a title="5 записей" href="http://beloweb.ru/tag/krasivyie-saytyi">Красивые сайты</a>
 <a title="2 записи" href="http://beloweb.ru/tag/krasivyie-foto">Красивые фото</a>
 <a title="1 запись" href="http://beloweb.ru/tag/logo-psd">Лого PSD</a>
 <a title="2 записи" href="http://beloweb.ru/tag/modalnoe-okno">Модальное окно</a>
 <a title="1 запись" href="http://beloweb.ru/tag/monohrom">Монохром</a>
 <a title="1 запись" href="http://beloweb.ru/tag/n-g">Н Г</a>
 <a title="23 записи" href="http://beloweb.ru/tag/novichku">Новичку</a>
 <a title="2 записи" href="http://beloweb.ru/tag/novosti">Новости</a>
 <a title="31 запись" href="http://beloweb.ru/tag/plaginyi">Плагины</a>
 <a title="1 запись" href="http://beloweb.ru/tag/podsvetka-koda">Подсветка кода</a>
 <a title="5 записей" href="http://beloweb.ru/tag/poiskoviki">Поисковики</a>
 <a title="2 записи" href="http://beloweb.ru/tag/poleznyie-saytyi">Полезные сайты</a>
 <a title="1 запись" href="http://beloweb.ru/tag/prozrachnost">Прозрачность</a>
 <a title="6 записей" href="http://beloweb.ru/tag/raskrutka">Раскрутка</a>
 <a title="37 записей" href="http://beloweb.ru/tag/sayt">Сайт</a>
 <a title="63 записи" href="http://beloweb.ru/tag/skachat">Скачать</a>
 <a title="5 записей" href="http://beloweb.ru/tag/slayder">Слайдер</a>
 <a title="4 записи" href="http://beloweb.ru/tag/sozdat-blog">Создать блог</a>

</div>

Как видите мы сразу задали класс нашим будущим меткам — tagcloud. Теперь давайте сделаем красивый вид с помощью стилей.

CSS

.tagcloud {
 float:left;
 width:300px;
 margin-top:20px;
 margin-right:10px;
 }

.tagcloud a {
 font-size:13px;
 color:#999;
 border-radius: 3px;
 background: #333;
 border-bottom:2px solid #888;
 margin:5px;
 padding:5px 5px 7px;
 float:left;
 -moz-transition: all 0.2s 0.01s ease-in;
 -o-transition: all 0.2s 0.01s ease-in;
 -webkit-transition: all 0.2s 0.01s ease-in;
 }

.tagcloud a:hover {
 color:#fff;
 background-color:#FF6766;
 -webkit-transform: rotate(5deg);
 -moz-transform: rotate(5deg);
 -o-transform: rotate(5deg);
 }

Сам список сделан шириной в 300 пикселей. Естественно Вы можете сделать шире или уже для Вашего сайта. А также размер шрифта, отступы и т.д. всё можно настроить.

Цвет можно изменить с помощью background: в данном случае цвет #333. Также можно настроить цвет при наведении в классе .tagcloud a:hover, в данном примере background-color:#FF6766;

Теперь самое интересное — анимация при наведении. Плавное изменение цвета и плавный наклон задаётся с помощью transition:

-moz-transition: all 0.2s 0.01s ease-in;
 -o-transition: all 0.2s 0.01s ease-in;
 -webkit-transition: all 0.2s 0.01s ease-in;

Эти параметры вы можете изменить в секундах, быстрее или медленнее.

А сам наклон метки задаётся с помощью transform:

-webkit-transform: rotate(5deg);
 -moz-transform: rotate(5deg);
 -o-transform: rotate(5deg);

5deg — это 5 градусов вправо, а -5deg — это пять градусов влево. Естественно это значение Вы можете изменить на большее или меньшое.

Хочу сказать, что данные метки не работают в ИЕ. И ничего с этим поделать нельзя.

Пример ι Cкачать исходники

Вот и получились у нас метки простые и вроде как красивые. На этом всё. Друзья, если у Вас возникнут какие либо вопросы, я жду их в комментариях. До скорых встреч.

  • Марат

    Спасибо. Как раз хотел реализовать такие метки :) А можно вопрос: как сделать, чтобы метки автоматически выводились в конце поста? У вас, Александр, как я понимаю, каждую метку нужно отдельно задавать по тег . Хотелось бы автоматизировать

  • Марат, если на вордпресс, тогда там метки нужно вручную вставлять. Но единственная проблема в том, что они автоматически увеличиваются. Я пока что не разобрался как это убрать.

    Обычно, чтобы вывести метки пользуются виджетами, всё очень просто. Опять же, чтобы их вывести в конце поста, нужно вставлять вручную.

    Или же, тем меткам, которые старые стоят на блоге, задать соответствующий класс стилей который выше в статье. Главное не забыть удалить стандартный класс меток.

  • Марат

    У меня например метки выводятся с помощью Simple Tags. Как мне теперь настроить? Знаешь такой плагин?:)

  • Знаю. Стоял когда то такой.

    Скажу сразу, что лучше его отключить и делать с нуля. Так легче.

    Ну а вообще можно скачать плагин и уже разбираться в его коде, и стилях. Далее добавлять стили желаемых меток.

  • Марат

    Подскажи, какой лучше плагин и какой код выводит метки в конце записи?

  • Марат, этот код должен выводить теги в конце < ?php the_tags(); ?>. Скорее всего он у тебя уже стоит, там только нужно поменять класс и всё.

  • Марат

    Хорошо, попробую :) Спасибо.

  • Если, что то будет не понятно, пишите. :-)

  • Марат

    Всё получилось =) Спасибо)

  • Марат

    благодаря вашему сайту чуть-чуть начал разбираться в CSS =)

  • Марат, очень рад за Вас. Честно признаюсь Вам — очень приятно :-)

    А по поводу CSS — очень затягивает. Особенно если что то получается :-)

  • Ден

    Здравствуйте! У меня на сайте метки выводятся через запятую, <?php
    echo get_the_tag_list('Ключевые слова: ‘,’, ‘,»);
    ?>
    Если убирать запятые вылезает «Ошибка сервера» и сайт не загружается, если же запятые оставить, то метки отображаются очень криво…

    Что посоветуете в данной ситуации?

  • Ден, попробуйте поставить вот это < ?php the_tags( $before, $sep, $after ); ?>

  • Ден

    Отличный совет Александр! Спасибо за помощь. Помогло, конечно после 25 минут тыков, все таки удалось. Подобрал цвета и теперь смотрится вообще зачетно. Подписался на обновления, буду ждать еще фишек с использованием jquery.

  • Ден, рад был помочь :-)

  • Камила

    master-tenge.kz