Условие: без картинок, минимум вложенных элементов
Всем известная иконка РСС, создана без использования изображений — полный контроль над отображением посредством таблиц стилей.
Потребуется только один вложенный тег <i></i>.
<a href="#" class="icon-rss">
<i></i>
</a>
.icon-rss {
display: inline-block;
width: 8em; /* Размеры иконки */
height: 8em;
background: orange;
}
.icon-rss:before {
content: '';
display: block;
margin-top: 16%;
width: 84%;
height: 84%;
background: #fff;
}
.icon-rss > i {
display: block;
padding: 16% 16% 0 0;
margin-top: -68%;
width: 52%;
height: 52%;
background: orange;
}
.icon-rss > i:before {
content: '';
display: block;
width: 100%;
height: 100%;
background: #fff;
}
.icon-rss > i:after {
content: '';
display: block;
margin: -63% 0 0 -5%;
width: 68%;
height: 68%;
background: orange;
}
Размер иконки настраивается в одном месте — высота и ширина блока ссылки <a>. Остальные элементы меняют размеры относительно.
Правда есть один минус — элементы иконки при размерах меньше 25х25 начинает плавать. Такой подход хорошо себя проявляет на экранах высокой плотности пикселей.
Минус одна или даже несколько растровых картинок.
Условие: без JS
Нажмите на строку поиска:
Для реализации необходимо обернуть все элементы меню кроме поиска в отдельный контейнер. Сроку поиска пишем сначала и наравне с контейнером элементов меню.
<nav>
<input type="text" id="search">
<menu>
<a href="#">
<span>Все</span>
</a>
<a href="#">
<span>Красные</span>
</a>
<a href="#">
<span>Четные</span>
</a>
<a href="#">
<span>Популярные</span>
</a>
</menu>
</nav>
Все просто — у контейнера ширина на автомате. Обязательно со свойством {overflow: hidden;}, которое заставляет блок занимать все свободное пространство в ширину, при этом не слетать вниз (ни в коем случае не добавляйте флоаты — все сломается).
Поле поиска имеет статическую ширину в двух состояниях. Когда курсор установлен в поле поиска, псевдоэлемент :focus меняет ширину, а свойство :transition добавляет плавность движению.
Ширина блока с меню пересчитывается в зависимости от ширины строки поиска, поэтому в структуре сначала идет инпут а за ним блок с меню.
nav input {
float: right;
width: 18%; // ширина в обычном состоянии
transition: ALL 0.2s;
}
nav input:focus {
width: 35%; // ширина в активном состоянии
}
nav menu {
overflow: hidden; // обязательно (и никаких флоатов)
transition: ALL 0.2s;
}
nav menu a {
display: block;
float: left;
width: 25%;
}
Размеры поля можно задавать в любых единицах. Главное не забыть убрать у <menu> флоат и задать элементам меню ширину в %.
Плюс: просто и красиво.
Минус: расположение элементов справа налево и хз как в IE6-8 будет.