| Kosten | Суббота, 23 Марта 2019, 14:26 | Сообщение 1 |
| Здесь рассмотрим,, как можно красиво оформить теги под определенный формат, где бы они смотрелись прекрасно на светлом или темном сайте. Вообщем будем выстраивать стилистику под каждое кочевое слово, для того, чтоб можно было разместить на главной страницы.
И все это делается на чистом 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;
}
Демонстрация
| | Страна: (RU) |
| |
| Kosten | Воскресенье, 24 Марта 2019, 15:09 | Сообщение 2 |
|
| Они созданы только с помощью CSS. Тем не менее, результат довольно ограничен, если вы хотите продолжить его с переходами и прочим.
See the Pen
CSS tags by Kocsten (@kocsten)
on CodePen.
| | Страна: (RU) |
| |
| Kosten | Воскресенье, 24 Марта 2019, 15:10 | Сообщение 3 |
|
| Скользящие метки, где элементы пользовательского интерфейса и виджеты с HTML5, CSS3
See the Pen
Sliding Tags by Kocsten (@kocsten)
on CodePen.
| | Страна: (RU) |
| |
