Всем приветы и ответы!
В своё время я создал для системы uCoz оформление внешнего вида облако тегов!
И подумал, чего этому решению пропадать зря, вдруг кому пригодиться, так как в нём всё легко и просто!
Довольно слов, начнём!
HTML код
Для начала нам надо создать div ячейку с нужным классом, в который разместим ссылку самих тегов:
<div class="cell-tag">
<a href="#" rel="nofollow">адинка</a>
<a href="#" rel="nofollow">страница</a>
<a href="#" rel="nofollow">опрос dm</a>
<a href="#" rel="nofollow">флеш</a>
<a href="#" rel="nofollow">Стили</a>
</div>
CSS стили
А теперь CSS стили, которые надо прописать в файл под названием style.css:
/* Теги в стиле билета
------------------------------------------*/
.cell-tag{
float:left;
width:100%;
}
.cell-tag a:link,
.cell-tag a:visited ,
.cell-tag a:hover {
float:left;
padding: 7px 20px;
position: relative;
background: #BADA55;
display: inline-block;
margin: 0px 15px 15px 0px;
border-right: dotted 2px #fff;
box-shadow: 4px 0 0 rgba(0, 0, 0, 0.25) inset, -4px 0 0 rgba(0, 0, 0, 0.25) inset;
font:13px Verdana,Arial,Helvetica, sans-serif;
text-shadow: 1px 1px 1px #8BA340;
font-weight: bold;
color:#fff;
}
.cell-tag a:hover {
background: #5d95df;
text-shadow: 1px 1px 1px #295691;
color:#fff;
}
.cell-tag a:before,
.cell-tag a:after {
content: '';
display: block;
position: absolute;
left: -0.5em;
width: 1em;
height: 1em;
background: #fff;
border-radius: 0.5em;
}
.cell-tag a:before {top: -0.5em;}
.cell-tag a:after {bottom: -0.5em;}
Хочу обратить внимание на тот момент, что в данном решении, в css стилях для верхнего и нижнего левого угла, мы прописываем значение border-radius:,
В результате чего на данную ячейку благодаря абсолютному позиционированию элементов накладывается белый круг, который создаёт данному решению нужный внешний вид
В результате чего основной фон в котором находятся теги необходим.
На этом у меня всё! Удачных решений!
А Вы оставите комментарий первым?