• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Оформление тегов для сайта с помощью CSS (Оформление тегов на сайте в виде ярлыков с помощью CSS)
Оформление тегов для сайта с помощью CSS
Kosten
Суббота, 23 Марта 2019 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44269
Награды: 70
Здесь рассмотрим,, как можно красиво оформить теги под определенный формат, где бы они смотрелись прекрасно на светлом или темном сайте. Вообщем будем выстраивать стилистику под каждое кочевое слово, для того, чтоб можно было разместить на главной страницы.

И все это делается на чистом CSS, где уже самостоятельно придаете палитру цвета, ведь по умолчанию идет в светло зеленом оттенке. Теперь вы можете образовать блок или колонку, где разместить теги, которые преобразованы в стильно виде.



HTML

Код
<h1>Метки:</h1>
<a href="#" rel="gesamolas">Чистый билет CSS3</a>
<a href="#" rel="gesamolas">CSS3Ticket</a>
<a href="#" rel="gesamolas">HTML5</a>
<a href="#" rel="gesamolas">Design</a>
<a href="#" rel="gesamolas">Development</a>
<a href="#" rel="gesamolas">JQuery</a>
<a href="#" rel="gesamolas">Photoshop</a>
<a href="#" rel="gesamolas">Javascript</a>
<a href="#" rel="gesamolas">WordPress</a>
<a href="#" rel="gesamolas">gesamolass</a>
<a href="#" rel="gesamolas">Green</a>
<a href="#" rel="gesamolas">Tutorial</a>
<a href="#" rel="gesamolas">Resource</a>
<a href="#" rel="gesamolas">Site</a>

<h1>Некоторые большие теги:</h1>
<div class="deranukop">
    <a href="#" rel="gesamolas">Elements</a>
    <a href="#" rel="gesamolas">Application</a>
    <a href="#" rel="gesamolas">Coding</a>
</div>

CSS

Код
.deranukop {
    font-size: 24px;
}

a[rel="gesamolas"] {
    display: inline-block;
    position: relative;
    padding: .8em;
    padding-left: 2.1em;
    margin: 0 .6em .6em 0;
    background: #618e24;
    color: rgba(251, 249, 249, 0.81);
    text-decoration: none;
    font-weight: bold;
}

a[rel="gesamolas"]:hover {
    background:#b30;
    color:white;
}

a[rel="gesamolas"]:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    background: -moz-radial-gradient(.6em .6em, circle, white .55em, rgba(255,255,255,0) .6em) -.6em -.6em, -moz-radial-gradient(1em 50%, circle, white .35em, rgba(255,255,255,0) .4em), -moz-radial-gradient(1em 47%, circle, rgba(0,0,0,.4) .4em, transparent .43em);
    background: -o-radial-gradient(.6em .6em, circle, white .55em, rgba(255,255,255,0) .6em) -.6em -.6em, -o-radial-gradient(1em 50%, circle, white .35em, rgba(255,255,255,0) .4em), -o-radial-gradient(1em 47%, circle, rgba(0,0,0,.4) .4em, transparent .43em);
    background: -ms-radial-gradient(.6em .6em, circle, white .55em, rgba(255,255,255,0) .6em) -.6em -.6em, -ms-radial-gradient(1em 50%, circle, white .35em, rgba(255,255,255,0) .4em), -ms-radial-gradient(1em 47%, circle, rgba(0,0,0,.4) .4em, transparent .43em);
    background: -webkit-radial-gradient(.6em .6em, circle, #f5eeee .55em, rgba(255,255,255,0) .6em) -.6em -.6em, -webkit-radial-gradient(1em 50%, circle, #f5f1f1 .35em, rgba(245, 238, 238, 0) .4em), -webkit-radial-gradient(1em 47%, circle, rgba(16, 16, 16, 0.4) .4em, rgba(14, 14, 14, 0) .43em);
}

a[rel="gesamolas"]:after {
    content: '';
    position:absolute;
    top:.25em;
    right:.25em;
    bottom:.25em;
    left:.25em;
    border: 1px rgba(0,0,0,.3) dashed;
    outline: 1px rgba(255,255,255,.5) dashed;
}


Демонстрация
Прикрепления: 8317470.png (40.5 Kb)
Страна: (RU)
Kosten
Воскресенье, 24 Марта 2019 | Сообщение 2
Оффлайн
Администраторы
Сообщений:44269
Награды: 70
Они созданы только с помощью CSS. Тем не менее, результат довольно ограничен, если вы хотите продолжить его с переходами и прочим.


See the Pen
CSS tags
by Kocsten (@kocsten)
on CodePen.


Страна: (RU)
Kosten
Воскресенье, 24 Марта 2019 | Сообщение 3
Оффлайн
Администраторы
Сообщений:44269
Награды: 70
Скользящие метки, где элементы пользовательского интерфейса и виджеты с HTML5, CSS3


See the Pen
Sliding Tags
by Kocsten (@kocsten)
on CodePen.


Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Оформление тегов для сайта с помощью CSS (Оформление тегов на сайте в виде ярлыков с помощью CSS)
  • Страница 1 из 1
  • 1
Поиск: