Тег «CSS»

CSS Naked Day 2009

Каждый год 9 апреля — CSS Naked Day! Это когда на сайте отключаются все таблицы стилей и сайт виден посетителям во всей своей красе :) Как и в прошлом году, я с радостью поддерживаю эту чудесную акцию, которая помогает посмотреть на сайт и код с другой стороны. Цель понятна — популяризация и продвижение веб-стандартов.

За минувший год этот блог поменял дизайн и вёрстку. Все проблемы, выявленные в прошлом году, как мне кажется, устранены. Польза очевидна.

Присоединяйтесь и раздевайтесь :)

08.04.2009. Раздел: Интернет. Ключевые слова: , .

CSS Naked Day 2008

Сегодня — CSS Naked Day 2008! Ай-да, блогеры, раздеваемся и ходим голыми!

В этот день участники акции снимают со своих сайтов CSS, демонстрируя своим посетителям голый <body>. По словам автора идеи Дастина Диаса, цель сего действа — популяризация и продвижение веб-стандартов.

Принять участие в акции может любой, кому нечего скрывать, кроме своих тэгов. Для этого необходимо:

  1. Отметиться в списке участников.
  2. 9 апреля оключить на сайте все оформление. На странице акции даже предлагаются средства автоматизации этой операции, вплоть до плагинов к WordPress.
  3. Сообщить своим посетителям, что, собственно, происходит.

P.S. За одноузрел недостатки своей верстки. Поправлю в ближайшее время :)

09.04.2008. Раздел: Интернет. Ключевые слова: , .

Резиновые изделия

Вот тут советуют как делать резиновые блоки (по вертикали) с подложкой. Конечно, видел я разные варианты, но с нижним фоном в виде <img /> — не встречал. Кроме того, оно не работает в IE7.

Мне сразу же захотелось упростить и улучшить исполнение. Задача тривиальная, исходные данные оставим, как есть — три картинки для фона, один растяжимый по вертикали блок и пару параграфов текста. За минуту был сделан вариант с тремя вложенными дивами с background. Не очень семантично, зато минимально и везде работает.

* {
	margin: 0;
	padding: 0;
}

.block {
	width: 210px;
	background: url("middle.jpg") 0 0 repeat-y;
}

.block p {
	font-size: 75%;
	font-family: Georgia;
	padding: 0 20px;
}

.block .top {
	width: 210px;
	background: url("top.jpg") top left no-repeat;
	padding-top: 30px;
}

.block .bottom {
	width: 210px;
	background: url("bottom.jpg") bottom left no-repeat;
	padding-bottom: 30px;
}

<div class="block">
	<div class="top">
		<div class="bottom">
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
			Aenean dictum, neque id ornare porttitor, nisl odio sollicitudin arcu,
			eu scelerisque nibh lorem in ipsum. Suspendisse dolor lacus, vulputate eu…</p>
		</div>
	</div>
</div>

Предлагаю поупражнятся в оптимизации и изящности :)

10.03.2008. Раздел: Интернет. Ключевые слова: , , .