Иконка RSS

Условие: без картинок, минимум вложенных элементов

Всем известная иконка РСС, создана без использования изображений — полный контроль над отображением посредством таблиц стилей.

Потребуется только один вложенный тег <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 будет.