В данном уроке мы создадим иконку документа с использованием свойств CSS3. Для нее потребуется только один элемент HTML.
План действий
Создаем прямоугольник.
Округляем углы.
Используем псевдо-элемент для создания загнутого уголка.
Создаем иллюзию текста с помощью полосок градиента.
Начнем!
Шаг 1. Создаем прямоугольник
Начнем с добавления единственного элемента HTML: тега ссылки. Большинство иконок работают как ссылки.
<a class="docIcon" href="#">Иконка документа</a>
В нашем примере иконка будет иметь размер 40x56px. В реальном проекте его можно уменьшить. Также нужно использовать свойство display: block, потому что тег ссылки является строчным элементом по умолчанию.
.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;
}
Обратите внимание, что мы установили позиционирование содержания, чтобы упростить работу с псевдо-элементами.
Далее, добавим прелести с помощью теней CSS. Чтобы скрыть текст мы используем свойство 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. В нашем случае никакого текста не требуется. Но нужно создать квадрат с размером стороны 15px и использовать для него градиент в качестве фона.
.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:0px 15px 0px 0px;
-moz-border-radius:0px 15px 0px 0px;
border-radius:0px 15px 0px 0px;
Шаг 4. Добавляем строчки текста.
Теперь будем использовать псевдо-элемент :after, чтобы добавить несколько штрихов, представляющих текст на странице. Устанавливаем ширину 60% и значения свойств 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. Сначала разделим высоту на пять, и для каждого блока зададим заполнение. Смотрите на ниже приведенную картинку.
.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%);
}
Готово!