Всем приветы и ответы!
Сегодня мы предоставляем возможность, взглянуть на визуальное оформление кода на страницах HTML сайта и мы будем стилизовать теги!
Которые как правило находятся в конце статьи! Но также, этот вариант оформление можно использовать в облаке тегов!
Давайте посмотрим на код!
HTML код
В нужное место на страницы сайта надо установить вот такой код:
<div class="cell-tag-1">
<div><a href="#" rel="nofollow">Wordpress</a><span> 751</span></div>
<div><a href="#" rel="nofollow">css</a> <span>245</span></div>
<div><a href="#" rel="nofollow">html-css</a> <span>18</span></div>
<div><a href="#" rel="nofollow">jQuery</a> <span>6</span></div>
</div>
Обратите своё внимание на то, что меняя класс cell-tag-1 в конце цифру на 2 или 3, вы поменяете цвет картинки ленточки, которая прописана в CSS стилях ниже!
CSS стили
И собственно говоря стили, которые необходимо прописать в файле под названием style.css в самый низ:
/*Оформление тегов - синий
------------------------------------------*/
.cell-tag-1{
float:left;
width:100%;
}
.cell-tag-1 div {
float:left;
color:#fff;
margin: 10px 0px 0px 10px;
padding: 10px 15px 10px 0px;
background: url(fon_tag_1.png) right no-repeat;
font: 13px Verdana,Arial,Helvetica, sans-serif;
}
.cell-tag-1 span {
float:left;
margin: 1px 0px 0px 0px;
}
.cell-tag-1 a:link,
.cell-tag-1 a:visited {
float:left;
color:#555;
background: #fff;
margin: -5px 5px -5px 0px;
padding: 5px 10px 5px 10px;
border: 1px solid #a3a3a3;
border-radius:5px 0px 0px 5px;
}
.cell-tag-1 a:active {
box-shadow:inset 0px 0px 3px #134087;
}
.cell-tag-1 a:hover {
color:#fff;
text-shadow:1px 1px 1px #4576c3;
border: 1px solid #4576c3;
background: #69a0f5;
}
/*Оформление тегов - красный
------------------------------------------*/
.cell-tag-2{
float:left;
width:100%;
}
.cell-tag-2 div {
float:left;
color:#fff;
margin: 10px 0px 0px 10px;
padding: 10px 15px 10px 0px;
background: url(fon_tag_2.png) right no-repeat;
font: 13px Verdana,Arial,Helvetica, sans-serif;
}
.cell-tag-2 span {
float:left;
margin: 1px 0px 0px 0px;
}
.cell-tag-2 a:link,
.cell-tag-2 a:visited {
float:left;
color:#555;
background: #fff;
margin: -5px 5px -5px 0px;
padding: 5px 10px 5px 10px;
border: 1px solid #a3a3a3;
border-radius:5px 0px 0px 5px;
}
.cell-tag-2 a:active {
box-shadow:inset 0px 0px 3px #910f40;
}
.cell-tag-2 a:hover {
color:#fff;
text-shadow:1px 1px 1px #ca4377;
border: 1px solid #ca4377;
background: #fc5b98;
}
/*Оформление тегов - зелёный
------------------------------------------*/
.cell-tag-3{
float:left;
width:100%;
}
.cell-tag-3 div {
float:left;
color:#fff;
margin: 10px 0px 0px 10px;
padding: 10px 15px 10px 0px;
background: url(fon_tag_3.png) right no-repeat;
font: 13px Verdana,Arial,Helvetica, sans-serif;
}
.cell-tag-3 span {
float:left;
margin: 1px 0px 0px 0px;
}
.cell-tag-3 a:link,
.cell-tag-3 a:visited {
float:left;
color:#555;
background: #fff;
margin: -5px 5px -5px 0px;
padding: 5px 10px 5px 10px;
border: 1px solid #a3a3a3;
border-radius:5px 0px 0px 5px;
}
.cell-tag-3 a:active {
box-shadow:inset 0px 0px 3px #267507;
}
.cell-tag-3 a:hover {
color:#fff;
text-shadow:1px 1px 1px #449425;
border: 1px solid #5db23b;
background: #70d54a;
}
И незабываем, что в выше предоставленном коде надо прописать адрес на картинку ленты:
background: url(fon_tag_3.png) right no-repeat;
скачиваем изображения к себе на сайт:
На этом у меня всё! Удачных решений!
Розовый цвет мне очень зашел. Беру себе, автору спасибо.