Говорят, что создание сайта - очень длительный и трудоемкий процесс. Мы скажем - НЕТ! Ведь с новыми технологиями, такими как HTML5, CSS3, PHP и MySql можно быстро и легко научиться создавать сайты любой сложности.
Два сумасшедших веб-мастера покажут где что лежит и как этим пользоваться.
Авторизация
Новый
Забыл
Пожалуйста, заполните поля выше. Это нужно сделать обязательно, иначе ничего не получится.
CSS и Верстка /

Gmail-лейблы с помощью CSS

  • Понедельник, 27 сентября 2011, 02:12 |
  • Автор: karpovi4 |
  • Просмотров: 2700 |
  • Комментарии: 0 |
  • В закладки:
Вам интересно, как создать такиеже классные метки, что используются в гмэл'е??
Состоять они будут из трех крошечных бесцветных картинок, которые будут использоваться для создания округлой границы и крестика закрытия.
В этой статье я постораюсь описать как в домашних условиях создать гугл-подобные лейблы)

Цвета задаются в собственный класс для каждого Li-элемента и поэтому очень легко все это с вашими потребностями.
Вот пример:

http://takein.ru/uploads/posts/2010-09/128...abels.png[/img]
Демо можно посмотреть здесь:

игры азартные довольно вредная штука, по словам нашего нового спонсора. Будьте бдительны и не допускайте эту гадость в вашу жизнь.
Начнем с html:

<ul class="labels">
<li class="blue"><span>blue label</span><a href="#"></a></li>
<li class="lightblue"><span>light blue label</span><a href="#"></a></li>
<li class="brown"><span>brown label</span><a href="#"></a></li>
<li class="olive"><span>olive label</span><a href="#"></a></li>
<li class="pink"><span>pink label</span><a href="#"></a></li>
<li class="green"><span>green label</span><a href="#"></a></li>
<li class="violet"><span>violet label</span><a href="#"></a></li>
<li class="orange"><span>orange label</span><a href="#"></a></li>
<li class="turk"><span>turkoise label</span><a href="#"></a></li>
<li class="red"><span>red label</span><a href="#"></a></li>
<li class="lime"><span>lime label</span><a href="#"></a></li>
<li class="darkblue"><span>dark blue label</span><a href="#"></a></li>
<li class="autumn"><span>autumn label</span><a href="#"></a></li>
<li class="yellow"><span>yellow label</span><a href="#"></a></li>
<li class="purple"><span>purple label</span><a href="#"></a></li>
<li class="frost"><span>frost label</span><a href="#"></a></li>
<li class="black"><span>black label</span><a href="#"></a></li>
</ul>


Первая часть css, которую нужно поместить в заголовок вашего ХТМЛ-файла, выглядит примерно вот так:

/*General Label Style*/
ul.labels{
font-family: Verdana,Arial,Helvetica,sans-serif;
font-weight: 100;
line-height: 13px;
}
ul.labels li{
display: inline;
color: #CCCCCC;
float: left;
margin: 0px 2px 2px 0px;
height: 13px;
}
ul.labels li span{
background: url(label_front.gif) no-repeat center left;
font-size: 11px;
font-weight: normal;
white-space: nowrap;
padding: 0px 3px;
color: white;
vertical-align: top;
float: left;
}
ul.labels li a{
padding: 1px 4px 0px 11px;
padding-top  /*\**/: 0px\9; /*Hack for IE*/
background: url(labelx.gif) no-repeat center right;
cursor: pointer;
border-left: 1px dotted white;
outline: none;
}
ul.labels li a:hover{
background: url(labelx_hover.gif) no-repeat center right;
}


Для того, чтобы задать цвета лейблам, определяем некоторые новые классы:

/*Colored Label Attributes*/
ul.labels li.pink{
background-color: #F1A9E7;
}
ul.labels li.lightblue{
background-color: #99CCFF;
}
ul.labels li.blue{
background-color: #3019FF;
}
ul.labels li.olive{
background-color: #CCCC66;
}
ul.labels li.green{
background-color: #37B700;
}
ul.labels li.brown{
background-color: #C5AD98;
}
ul.labels li.violet{
background-color: #CEA6CE;
}
ul.labels li.turk{
background-color: #8FCDB6;
}
ul.labels li.red{
background-color: #EE998A;
}
ul.labels li.orange{
background-color: #FF9E28;
}
ul.labels li.lime{
background-color: #B6FF00;
}
ul.labels li.darkblue{
background-color: #21007F;
}
ul.labels li.leaf{
background-color: #00CC00;
}
ul.labels li.yellow{
background-color: #FFFF00;
}
ul.labels li.autumn{
background-color: #B24700;
}
ul.labels li.frost{
background-color: #80C8FE;
}
ul.labels li.purple{
background-color: #8E006B;
}
ul.labels li.black{
background-color: #000;
}


Эта часть кода дает возможность очень легко и быстро изменять внешний вид метки.

Все изображения необходимые для закругления границ и крестика закрытия сможете найти в архиве. Данный способ превосходно работает в Mozilla, IE, Chrome и Safari.

Надеюсь все описано максимально доступно) Вот ссылка на скачивание исходников - labels.zip [2.12 Kb] (cкачиваний: 43)
Удачи)

Увлекательная информация о создании красивых слайдеров картинок на JQuery

Кстати, пару слов о нашем спонсоре, если Вы решите сделать заказ деда мороза на дом в канун Новогодних праздников. то в этом Вам поможет ресурс DedushcaMoroz.ru - они всегда доступны по телефону в Москве (495) 721-63-54


корпоративные споры
мой семейный адвокат


игры азартные
  • Тэги публикацииgmail, css
Добавить комментарий