чтение rss ленты

Fantazystudio.ru

Добро пожаловать на сайт о вебдизайне Fantazystudio.ru! У нас Вы сможете: скачать стили, шрифты, psd исходники, иконки, смайлики, кисти, узоры, экшены, шаблоны для фото, фоторамки, уроки по Фотошопу и многое другое!..

Создаём облако тегов, используя CSS3

Создаём облако тегов, используя CSS3


Приветствую пользователей и гостей сайта fantazystudio.ru! Сегодня я расскажу Вам как сделать красивое облако тегов при помощи CSS3.

Начинаем с базовой HTML5 разметки.

<!DOCTYPE html>
<html>
    <head>
 
        <!-- Мета теги -->
        <meta charset="utf-8">
 
        <!-- Заголовок -->
        <title></title>
 
        <!-- Стили -->
        <link rel="stylesheet" href="css/styles.css">
 
</head>
<body>
 <div class="wrapper">
 <div class="wrapper">
 
    <a href="#" class="tag">
        <span class="arrow"></span>
        <span class="text">high resolution</span>
        <span class="end"></span>
    </a>
 
</div>
</div>
</body>
</html>


Теперь можно перейти к подключению CSS3 кода.



body {
    font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size:16px;
    background:url(../images/bg.jpg) repeat;
    -webkit-font-smoothing: antialiased;
}
 
.wrapper {
    max-width:340px;
    margin:50px auto;
}


Далее мы можем стилизировать сами теги.

.tag {
    float:left;
    margin:0 0 7px 20px;
    position:relative;
 
    font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size:0.75em;
    font-weight:bold;
    text-decoration:none;
 
    color:#996633;
    text-shadow:0px 1px 0px rgba(255,255,255,.4);
 
    padding:0.417em 0.417em 0.417em 0.917em;
 
    border-top:1px solid #d99d38;
    border-right:1px solid #d99d38;
    border-bottom:1px solid #d99d38;
 
    -webkit-border-radius:0 0.25em 0.25em 0;
    -moz-border-radius:0 0.25em 0.25em 0;
    border-radius:0 0.25em 0.25em 0;
 
    background-image: -webkit-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -moz-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -o-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -ms-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#feda71', EndColorStr='#feba47');
 
    -webkit-box-shadow:
        inset 0 1px 0 #faeaba,
        0 1px 1px rgba(0,0,0,.1);
    -moz-box-shadow:
        inset 0 1px 0 #faeaba,
        0 1px 1px rgba(0,0,0,.1);
    box-shadow:
        inset 0 1px 0 #faeaba,
        0 1px 1px rgba(0,0,0,.1);
 
    z-index:100;
}
.tag:before {
    content:'';
 
    width:1.30em;
    height:1.358em;
 
    background-image: -webkit-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -moz-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -o-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -ms-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#feda71', EndColorStr='#feba47');
 
    position:absolute;
    left:-0.69em;
    top:.2em;
 
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    transform:rotate(45deg);
 
    border-left:1px solid #d99d38;
    border-bottom:1px solid #d99d38;
 
    -webkit-border-radius:0 0 0 0.25em;
    -moz-border-radius:0 0 0 0.25em;
    border-radius:0 0 0 0.25em;
 
    z-index:1;
}
.tag:after {
    content:'';
 
    width:0.5em;
    height:0.5em;
 
    background:#fff;
 
    -webkit-border-radius:4.167em;
    -moz-border-radius:4.167em;
    border-radius:4.167em;
 
    border:1px solid #d99d38;
 
    -webkit-box-shadow:0 1px 0 #faeaba;
    -moz-box-shadow:0 1px 0 #faeaba;
    box-shadow:0 1px 0 #faeaba;
 
    position:absolute;
    top:0.667em;
    left:-0.083em;
    z-index:9999;
}
.tag:hover {
    background-image: -webkit-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -moz-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -o-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -ms-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#fee18d', EndColorStr='#fec86c');
 
    border-color:#e1b160;
}
 
.tag:hover:before {
    background-image: -webkit-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -moz-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -o-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -ms-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#fee18d', EndColorStr='#fec86c');
 
    border-color:#e1b160;
}


Мы почти у цели! Теперь нужно добавить совместимость с IE...

.arrow {
    width:15px;
    height:25px;
    float:left;
 
    background:url(../images/arrow.png) no-repeat;
}
.text {
    height:25px;
    float:left;
 
    padding-left:4px;
    padding-right:4px;
 
    background:url(../images/text.png) repeat-x;
 
    font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size:0.75em;
    font-weight:bold;
 
    color:#996633;
    text-shadow:0px 1px 0px rgba(255,255,255,.4);
 
    line-height:23px;
}
.end {
    width:4px;
    height:25px;
    float:left;
 
    background:url(../images/end.png) no-repeat;
}
 
.tag:hover .arrow { background-image:url(../images/arrow_hover.png); }
.tag:hover .text { background-image:url(../images/text_hover.png); }
.tag:hover .end { background-image:url(../images/end_hover.png); }
 
Поделиться интересной новостью со своими друзьями

Прямая ссылка на новость
BB-code ссылка на новость
HTML ссылка на новость
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.


Другие новости по теме:
  • Просмотров: 1006
  • Комментариев: 0

Добавление комментария

Ваше Имя: *
Ваш E-Mail: *
Текст:
Введите два слова, показанных на изображении:
Вопрос:
Домен (.org) нашего сайта?
Ответ:*

Fantazystudio.ru

  • Яндекс.Метрика