В этой статье расскажу вам об интересном трюке. Мы создадим иконку для документа с помощью чистого CSS3. Так же плюсом данного метода будет являться то, что мы будем использовать всего один HTML элемент. Вот порядок наших действий: мы создадим прямоугольник, закруглим углы, используем псевдо-элементы для создания загнутого уголка, создадим видимость текста с помощью градиента на CSS3.
[adsense]
Посмотреть демо
Шаг 1. Создание прямоугольника
Начнем мы с добавления нашего единственного HTML-элемента. Этим элементов будет ссылка, что вдвойне примечательно, т.к. иконка так же будет еще и ссылкой.
Document Icon
Давайте зададим некоторые параметры нашей иконки. Размер сделаем 40х56px для данного примера. В реальном проекте, я думаю, размер будет порядком меньше. Так же стоит иметь ввиду, что нам необходимо установить свойство display:block, которое по стандарту inline для ссылок:
.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. Рекомендуется использовать так же конструкции с префиксами для браузеров. Дабы ускорить процесс создания конструкций с префиксами рекомендую воспользоваться сервисом http://prefixr.com/. Просто скопируйте нужный код в рабочее окно этого сервиса и нажмите кнопку «Prefixize» и вы получите готовые варианты конструкций для всех браузеров. Наш код примет такой вид:
.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;
}
Изменяю эти 4 параметра вы можете задать собственные размеры для радиусов углов. Это похоже на работу со свойствами margin и padding.
Мы получим вот такой прямоугольник с закругленными углами:
Шаг 3. Загнутый угол
Для создания загнутого угла мы будем используем псевдо-элементы. Для начала мы добавим псевдо-элемент :before. Ничего особенного мы делать не будем. Мы просто создадим еще один прямоугольник размером 15х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:3px 15px 3px 3px;
-moz-border-radius:3px 15px 3px 3px;
border-radius:3px 15px 3px 3px;
И итог у нас выглядит уже очень приятно:
Шаг 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;
}
Создание набора линий еще более увлекательное занятие. Мы достигнем нужного результата с использованием градиента. Для начала разделим общую высоту на 5 блоков и каждый блок зальем сплошным цветом. Способ довольно простой и может быть использован для решения разнообразных задач.
.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%);
}
А вот и итог нашей работы:
Посмотреть демо
Ну а если Вы житель Киева, то погода Киев не испортит, если знать ее заранее. Загляните в прогноз на сайте http://www.meteoprog.ua.
Источник http://net.tutsplus.com/
Неплохо так выглядит!