Как создать красивый значок с помощью CSS3

Сегодня я хотел бы показать вам, ловкий трюк. Мы создадим значок документа с помощью CSS3. Этот эффект будет требовать только одного элемента HTML.

ПЛАН:

1 Создание блока

2 Закругление углов

3 Использование псевдо элемента, для создания загнутого угла

4 Создание иллюзии текста с полосатым градиентом

Давайте начнем!

ШАГ 1: Создание блока

Мы начнем с добавлением нашего одного элемента HTML(тег привязки). Это имеет смысл, поскольку большинство значков также служит, чтобы быть ссылками.

<a class="docIcon" href="#">Document Icon</a>

Давайте установим несколько произвольные размерности для нашего значка. Мы сделаем 40x56 пкс. – просто для демонстрации этого примера. Кроме того, имейте в виду, что мы должны добавить display: block, так как все теги привязки встроены по умолчанию.

.docIcon
{
    background:#eee;
    background: linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);
    border:1px solid #ccc;
    display:block;
    width:40px;
    height:56px;
    position:relative;
    margin:42px auto;
}

Отметим, что выше, мы устанавливаем контекст позиционирования для того, чтобы потом мы смогли работать с псевдо элементами. Я использовал только официальный синтаксис CSS3 для градиента. Вы также можете использовать различные префиксы браузера. Для ускорения процесса, вы можете использовать сайт Prefixr.com, или его API в вашем текстовом редакторе. Просто скопируйте фрагмент кода выше, вставьте его в текстовую область Prefixr, и нажмите кнопку входа. Послее этого он выложит все различными prefixized свойствами, вот так:

.docIcon {
   background: #eee;
 
   background: -webkit-linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);
   background: -moz-linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);
   background: -o-linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);
   background: -ms-linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);
   background: linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);
 
   border: 1px solid #ccc;
   display: block;
   width: 40px;
   height: 56px;
   position: relative;
   margin: 42px auto;
}

Затем, давайте добавим немного блеска с помощью box-shadow. Я также использовал text-indent свойство для скрытия текста.

.docIcon
{
   ...
    -webkit-box-shadow:inset rgba(255,255,255,0.8) 0 1px 1px;
    -moz-box-shadow:inset rgba(255,255,255,0.8) 0 1px 1px;
    box-shadow:inset rgba(255,255,255,0.8) 0 1px 1px;
 
    text-indent:-9999em;
}

Сейчас мы имеем вот такой вид:

ШАГ 2: Закругление углов

Затем, мы должны создать эффект закругленного угла. Для этого нужно добавить следующее:

.docIcon
{
    ...
    -webkit-border-radius:3px 15px 3px 3px;
    -moz-border-radius:3px 15px 3px 3px;
    border-radius:3px 15px 3px 3px;
}

Путем передачи четырех значений мы можем указать верхние, правые, нижние и левые радиусы.

Что это дает нам:

ШАГ 3: Создание загнутого угла

Чтобы создать иллюзию загнутого угла, мы будем использовать контент, или псевдо элемент.

Во-первых, добавьте контент :before на наш значок. В этом случае мы не требуем никакого определенного текста. Вместо этого мы должны создать поле на 15 пкс и применить фоновый градиент.

.docIcon:before {
   content: "";
   display: block;
   position: absolute;
   top: 0;
   right: 0;
   width: 15px;
   height: 15px;
   background: #ccc;
 
   background: -webkit-linear-gradient(45deg, #fff 0, #eee 50%, #ccc 100%);
   background: -moz-linear-gradient(45deg, #fff 0, #eee 50%, #ccc 100%);
   background: -o-linear-gradient(45deg, #fff 0, #eee 50%, #ccc 100%);
   background: -ms-linear-gradient(45deg, #fff 0, #eee 50%, #ccc 100%);
   background: linear-gradient(45deg, #fff 0, #eee 50%, #ccc 100%);
 
   -webkit-box-shadow: rgba(0,0,0,0.05) -1px 1px 1px, inset white 0 0 1px;
   -moz-box-shadow: rgba(0,0,0,0.05) -1px 1px 1px, inset white 0 0 1px;
   box-shadow: rgba(0,0,0,0.05) -1px 1px 1px, inset white 0 0 1px;
 
   border-bottom: 1px solid #ccc;
   border-left: 1px solid #ccc;
}

Для нашего сгенерированного контента, для того чтобы также получить верхний правый округленный край мы должны снова применить те же радиусы для его выравнивания.

...
-webkit-border-radius:3px 15px 3px 3px;
-moz-border-radius:3px 15px 3px 3px;
border-radius:3px 15px 3px 3px;

ШАГ 4: Добавление линий

Далее, мы для псевдо элемента мы собираемся использовать :after для добавления некоторых пунктирных линий. После этого дайте ширину 60%, a margin-left и margin-right 20% (который равняется 100%). Далее, мы определяем высоту, установив ее под 0 0 .

.docIcon:after
{
    content:"";
    display:block;
    position:absolute;
    left:0;
    top:0;
    width:60%;
    margin:22px 20% 0;
    height:15px;
}

Создание набора линий немного сложнее. Хотя, мы можем использовать CSS градиенты для достижения этого эффекта. Во-первых, разделите общую высоту на пять частей и установить в каждом блоке сплошную заливку. См. изображение ниже для более четкого представления этих взглядов.

Несколько линий с помощью градиента CSS3

.docIcon:after
{
    ...
    background:#ccc;
    background: -webkit-linear-gradient(top, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80%, #ccc 80%, #ccc 100%);
    background: -moz-linear-gradient(top, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80%, #ccc 80%, #ccc 100%);
    background: -o-linear-gradient(top, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80%, #ccc 80%, #ccc 100%);
    background: -ms-linear-gradient(top, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80%, #ccc 80%, #ccc 100%);
    background:linear-gradient(top, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80%, #ccc 80%, #ccc 100%);
}

А вот и результат!

Добавить комментарии



[CODE] [/CODE]


Комментариев нет!