Для одной CSS3 демки, которой я сейчас пишу tutorial для habrahabr.ru понадобилась иконка CSS3. Одним из свойст демки являтся отсутсвие какой-либо графики, поэтому вставлять ссылку на иконку показалось некошерным. Поэтому было решено изобразить ее cредствами СSS ну и минимом HTML.
Минимумом HTML оказался один тэг —
<div id="css3icon />
A код СSS оказался демонстрацией новых свойств CSS3, он внутри.
Поэтому быть может маленький челендж для всех,
попробовать проиллюстрировать возможности СSS3 в одном тэге.
Для придумывания как понадобилось совсем немного времени.
То что получилось в один тэг на самом деле не планировалось, но зато
натянуть градиент и отбросить адекватную тень на подложку не получилось.
Больше времени ушло на попытки устраненит артефакты вылезшие во всех браузерах.
Cобственно пощупать CSS код можно здесь
codepen.io/rassadin/details/vkBDC
Собственно сам листинг в конце статьи.
Пользоваться можно просто включением тега
<div id="css3icon /> и подключением стиля. Изменение размеров осуществляется установкой значения
font-size для
#css3icon.
Исходник лежит на github —
www.github.com/rassadin/css3icon/
или можно сразу линковаться так
<link href="http://rassadin.github.com/css3icon/css3icon-blue.css" rel="stylesheet" type="text/css" />
Чуть позже, попробовав найти делал ли кто-нибудь подбное, я натолкнулся на человека который собирает такие «однотеговые» иконки и отправил ему свою Всю коллекцию иконок можно посмотреть на
one-div.com, и надо сказать некоторые поражают —, например, иконка Android…
Теперь собственно код, а потом собственно комментарии, вопросы и
ваши идеи с одним тегом.
#css3icon {
outline:solid 1px transparent;
display:inline-block;
position:relative;
height:0.8em; width:0.8em;
background:transparent;
color:transparent;
line-height:0.8em;
overflow:visible;
box-shadow:
0.8em 0 0 #38c, 1.4em 0 0 #38c, 2em 0 0 #38c, 2.6em 0 0 #38c, 3.2em 0 0 #38c, 3.6em 0 0 #38c, 4em 0 0 #38c, 4em .65em 0 #38c, 0.8em 1.3em 0 #38c, 1.4em 1.3em 0 #38c, 2em 1.3em 0 #38c, 2.6em 1.3em 0 #38c, 3.2em 1.3em 0 #38c, 3.6em 1.3em 0 #38c, 4em 1.3em 0 #38c, 4em 1.9em 0 #38c, 0.8em 2.6em 0 #38c, 4em 2.6em 0 #38c;
transform: skewX(-12deg);
-webkit-transform: skewX(-12deg);
-ms-transform: skewX(-12deg);
}
#css3icon:before {
position:absolute;
content:'';
display:block;
height:0.8em; width:2em;
margin:3.4em 0 0 0.8em;
background:#38c;
transform: skew(-1deg,18.4deg);
transform-origin: 100% 100%;
-webkit-transform: skew(-1deg,18.4deg);
-webkit-transform-origin: 100% 100%;
-ms-transform: skew(-1deg,18.4deg);
-ms-transform-origin: 100% 100%;
border-right:solid 1px #38c;
}
#css3icon:after {
position:absolute;
content:'';
display:block;
height:0.8em; width:2em;
margin:3.4em 0 0 2.8em;
background:#38c;
transform: skew(1deg,-18.4deg);
transform-origin: 0% 100%;
-webkit-transform: skew(1deg,-18.4deg);
-webkit-transform-origin: 0 100%;
-ms-transform: skew(1deg,-18.4deg);
-ms-transform-origin: 0 100%;
}
Простой
