Как сделать красивые метки (теги) для сайта только с помощью CSS3
Здравствуйте, дорогие читатели блога. Сегодня хочу рассказать Вам как сделать красивые теги (метки) только с помощью CSS3.
Теги — это один из самых Важных этапов в навигации на сайте. Казалось бы кто этими метками пользуется, и зачем они вообще нужны? Я говорю Вам, нужны. Я недавно заметил, что если я захожу на какой нибудь сайт то ищу сразу эти теги. С помощью их очень удобно ориентироваться на сайте, легче найти то что ищешь. Одним словом это второе меню сайта, только более подробное.
А вот если они ещё и красивые, тогда вообще супер, так и хочется нажать на них :-)
Вот и мы сегодня будем делать подобное для нашего сайта. А ещё прибавим не много анимации, чтобы вообще эффектно смотрелось. Анимацию мы взяли здесь. Хочу сказать, что теги делать будем только на CSS, а это значит, что нет изображений и загрузка, естественно, быстрее.
Хотелось бы добавить, что в исходниках есть три примера. Но на практике мы рассмотрим только один. Почему? Потому что в двух примерах изменён только цвет, там всё очень просто, и проблем с эти возникнуть не должно. Ну ладно, давайте уже будем делать.
Пример ι Cкачать исходники
HTML
Для начала нужно задать класс для меток, делается это с помощью обычных тегов <div>. А HTML код меток я взял уже готовый со своего блога. В конечном итоге вот, что у меня получилось:
<div class="tagcloud"> <a title="1 запись" href="/tag/3d-risunki">3d рисунки</a> <a title="46 записей" href="/tag/css">CSS</a> <a title="6 записей" href="/tag/google">Google</a> <a title="25 записей" href="/tag/html">HTML</a> <a title="41 запись" href="/tag/jquery">JQuery</a> <a title="10 записей" href="/tag/photoshop">Photoshop</a> <a title="13 записей" href="/tag/psd">PSD</a> <a title="1 запись" href="/tag/rss">RSS</a> <a title="2 записи" href="/tag/twitter">Twitter</a> <a title="2 записи" href="/tag/belyie-katalogi">Белые каталоги</a> <a title="9 записей" href="/tag/blog">Блог</a> <a title="1 запись" href="/tag/vkladki">Вкладки</a> <a title="9 записей" href="/tag/galereya-na-sayt">Галерея на сайт</a> <a title="64 записи" href="/tag/dizayn">Дизайн</a> <a title="10 записей" href="/tag/ikonki">Иконки</a> <a title="27 записей" href="/tag/interesnoe-v-seti">Интересности</a> <a title="6 записей" href="/tag/knopki">Кнопки</a> <a title="5 записей" href="/tag/krasivyie-saytyi">Красивые сайты</a> <a title="2 записи" href="/tag/krasivyie-foto">Красивые фото</a> <a title="1 запись" href="/tag/logo-psd">Лого PSD</a> <a title="2 записи" href="/tag/modalnoe-okno">Модальное окно</a> <a title="1 запись" href="/tag/monohrom">Монохром</a> <a title="1 запись" href="/tag/n-g">Н Г</a> <a title="23 записи" href="/tag/novichku">Новичку</a> <a title="2 записи" href="/tag/novosti">Новости</a> <a title="31 запись" href="/tag/plaginyi">Плагины</a> <a title="1 запись" href="/tag/podsvetka-koda">Подсветка кода</a> <a title="5 записей" href="/tag/poiskoviki">Поисковики</a> <a title="2 записи" href="/tag/poleznyie-saytyi">Полезные сайты</a> <a title="1 запись" href="/tag/prozrachnost">Прозрачность</a> <a title="6 записей" href="/tag/raskrutka">Раскрутка</a> <a title="37 записей" href="/tag/sayt">Сайт</a> <a title="63 записи" href="/tag/skachat">Скачать</a> <a title="5 записей" href="/tag/slayder">Слайдер</a> <a title="4 записи" href="/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качать исходники
Вот и получились у нас метки простые и вроде как красивые. На этом всё. Друзья, если у Вас возникнут какие либо вопросы, я жду их в комментариях. До скорых встреч.