вход

Как создать цветные метки при помощи CSS

Как создать цветные надписи при помощи CSS

CSS заметно облегчает жизнь веб разработчикам и создателям сайтов, особенно третья редакция с поддержкой всевозможных градиентов, скруглённых углов, анимаций, теней и много другого. Теперь на создание элементов, где ранее использовались хитрости с графикой, уходит минимум времени и средств. Достаточно для тэга назначить стиль, а в стиле прописать нужные правила. И нужный эффект создаст уже сам браузер на стороне клиента. Не подгружая дополнительных изображений. Сегодня я хотел бы показать, насколько просто создавать например цветные надписи. Насколько описание правил для этих надписей, и применение стилей для них очень простое.

Как выглядят цветные надписи

Для реализации я использовал немаркированный список. Хотя вы можете использовать любые другие тэги. Просто на этих тегах вы легко поймете идею реализации цветных надписей. Вот как это выглядит в итоге:

Можете также протестировать у себя в браузере и посмотреть как создать цветные надписи при помощи CSS.

Как это сделать?

Реализация, как я уже говорил очень проста. Добавляем всего несколько строк кода в документ CSS и создаем структуру в HTML.

CSS

/*General Label Style*/
ul.labels{
  font-family: Verdana,Arial,Helvetica,sans-serif;
  font-weight: 100;
  line-height: 18px;

}
ul.labels li{
	display: inline;
	color: #FFF;
	float: left;
	margin: 0px 5px 5px 0px;
	height: 18px;
	padding:2px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;
}

ul.labels li span{
	font-size: 11px;
	font-weight: normal;
	white-space: nowrap;
	padding: 0px 6px;
	color: #FFF;
	vertical-align: top;
	float: left;  
}

ul.labels li a{
  padding: 2px 2px 2px 16px;
  padding-top  /*\**/: 0px\9; /*Hack for IE*/
  background: url(on.png) no-repeat center right;
  cursor: pointer;
  border-left: 1px dotted white;
  outline: none;
  
}
ul.labels li a:hover{
  background: url(ov.png) 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;
}

Как вы могли заметить, вначале описывается общий класс, а затем добавляюся уже классы по цветам. Как известно, стиль, объявленный позднее затирает стиль объявленный ранее. На этом и основан принцып в этом подходе. Так мы и создаём разные цветовые заливки

/*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;
}

HTML

В структуре мы создаем немаркированный список и назначаем соответствующие классы. Каждый дополнительный класс создает свою цветную метку.

<ul class="labels">	
  <li class="blue"><span>синяя метка</span><a href="#"></a></li>
  <li class="lightblue"><span>голубая метка</span><a href="#"></a></li>
  <li class="brown"><span>коричневая метка</span><a href="#"></a></li>
  <li class="olive"><span>оливковая метка</span><a href="#"></a></li>
  <li class="pink"><span>розовая метка</span><a href="#"></a></li>
  <li class="green"><span>зелёная метка</span><a href="#"></a></li>
  <li class="violet"><span>фиолетовая метка</span><a href="#"></a></li>
  <li class="orange"><span>оранжевая метка</span><a href="#"></a></li>
  <li class="turk"><span>светло зелёная метка</span><a href="#"></a></li>
  <li class="red"><span>red label</span><a href="#"></a></li>
  <li class="lime"><span>лайм метка</span><a href="#"></a></li>
  <li class="darkblue"><span>темно синяя метка</span><a href="#"></a></li>
  <li class="autumn"><span>осенняя метка</span><a href="#"></a></li>
  <li class="yellow"><span>жёлтая метка</span><a href="#"></a></li>
  <li class="purple"><span>пурпурная метка</span><a href="#"></a></li>
  <li class="frost"><span>морозная метка</span><a href="#"></a></li>
  <li class="black"><span>чёрная метка</span><a href="#"></a></li>
</ul> 

Как видите, изменить цвет фона под надписью достаточно просто. Смените название класса, и все.

Качественные премиум темы и шаблоны для Вашего сайта:

Смотреть полный каталог качественных тем и шаблонов

Здесь Вы можете выбрать из более чем 46 000 готовых дизайнов. Шаблоны сайтов + установка + хостинг + персонализация + поисковая оптимизация + копирайтинг — все эти услуги вы всегда можете получить от профессионалов мирового уровня!


Нашли это полезным? Поделитесь с другими:
Не останавливайтесь, читайте дальше:
Оставить комментарий

Статья → Как создать цветные метки при помощи CSS

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

  1. Кoммeнтapий всегда проходит премодерацию.
  2. В поле "URL блога" можно указывать только ссылку на главную страницу вашего блога. Ссылки на прочие веб-ресурсы (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Запрещается использовать в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия имя изменяется по усмотрению владельца блога. Просьба указывать нормальное имя или ник.
  4. Весьма вероятно, что короткий и неинформативный кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.