Slaver's Blog » CSS

CSS Naked Day 2009

Slaver — Wed, 08 Apr 2009 20:05:09 +0000

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

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

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

CSS Naked Day 2008

Slaver — Wed, 09 Apr 2008 11:30:00 +0000

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

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

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

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

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

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

Slaver — Mon, 10 Mar 2008 08:40:00 +0000

Вот тут советуют как делать резиновые блоки (по вертикали) с подложкой. Конечно, видел я разные варианты, но с нижним фоном в виде — не встречал. Кроме того, оно не работает в 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;
}


	
		
			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…

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