Создание ярлыков в виде марочных билетов с использованием CSS3

25 ноября 2015 | Опубликовано в css | Нет комментариев »

Наше внимание привлек урок о создании ярлыков в виде марочных билетов, в котором подробно показано, как создать очень необычно выглядящие ярлыки. На этом сайте много интересных уроков, и сама идея таких ярлыков, на наш взгляд, заслуживает внимания. Но мы решили, что можем улучшить способ создания таких ярлыков, особенно нам хотелось избавиться от трех элементов HTML для каждого ярлыка, включая такую разметку, как <span></span>. О результатах нашего эксперимента Вы узнаете из этого урока.

У нас получилось создать точно такие же на вид ярлыки. Они будут выглядеть, как задумано, во всех современных браузерах, поддерживающих градиенты CSS, таких как Internet Explorer от версии 10, Firefox от версии 3,6, Chrome, Safari от версии 5,1 и Opera от версии 12,1, а также во всех современных версиях мобильных браузеров.

У этих ярлыков остается тот же недостаток, что и у прототипов: они зависят от цвета фона. Но в отличие от исходников для их создания нужно меньше кода, и им очень просто изменить размер, что показано в коде CSS для класса .bigger, и, конечно, им не требуется лишняя разметка.

Результаты нашей работы можно увидеть по ссылке ниже:

Демонстрация работы

Код HTML

<h1>Tags:</h1>
<a href="#" rel="tag">Pure CSS3 Ticket</a>
<a href="#" rel="tag">CSS3Ticket</a>
<a href="#" rel="tag">HTML5</a>
<a href="#" rel="tag">Design</a>
<a href="#" rel="tag">Development</a>
<a href="#" rel="tag">JQuery</a>
<a href="#" rel="tag">Photoshop</a>
<a href="#" rel="tag">Javascript</a>
<a href="#" rel="tag">WordPress</a>
<a href="#" rel="tag">Tags</a>
<a href="#" rel="tag">Green</a>
<a href="#" rel="tag">Tutorial</a>
<a href="#" rel="tag">Resource</a>
<a href="#" rel="tag">Site</a>
<h1>Some bigger tags:</h1>
<div class="bigger">
    <a href="#" rel="tag">Elements</a>
    <a href="#" rel="tag">Application</a>
    <a href="#" rel="tag">Coding</a>
</div>

Код CSS

body {
    font-family: sans-serif;
    font-size: 12px;
}

.bigger {
    font-size: 24px;
}

a[rel="tag"] {
    display: inline-block;
    position:relative;
    padding: .7em;
    padding-left: 2em;
    margin: 0 .5em .5em 0;
    background: #8dc63f;
    color: rgba(255,255,255,.6);
    text-decoration:none;
    font-weight: bold;
}

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

a[rel="tag"]: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, white .55em, rgba(255,255,255,0) .6em) -.6em -.6em,
                -webkit-radial-gradient(1em 50%, circle, white .35em, rgba(255,255,255,0) .4em),
                -webkit-radial-gradient(1em 47%, circle, rgba(0,0,0,.4) .4em, transparent .43em);
}
a[rel="tag"]: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;
}

Автор урока Lea Verou

Перевод — Дежурка

Смотрите также:

Опубликовано в css, ноября 25, 2015
Метки: css, css3, верстка, урок css, урок css3, урок верстка

�

Коментарии запрещены.

Создание ярлыков в виде марочных билетов с использованием CSS3

Похожие статьи

Случайные статьи

Страницы

Друзья

Самые комментируемые