В связи с участившимися сообщениями о том, что в CSS хотят добавить переменные, анимацию, трансформацию и прочая, хотелось бы немного отстраненно порассуждать на эту тему.

CSS, которому уже 12 лет, изначально был задуман и разрабатывался как средство для описания внешнего вида документа. С тех пор утекло много воды и технология претерпела значительные изменения и дополнения. На данный момент, рабочая версия по стандарту W3C, принятая в 2006 году - Уровень 2.1. Уровень 3 находится в состоянии разработки (есть черновик), и ожидается с нетерпением многими разработчиками.

Вокруг будущего CSS ходит много слухов и предположений, коротые муссируются и множатся, выливаются в дискуссии и споры. Ведь по сути, если хотя бы половина предлагаемых изменений будет осуществлена, то CSS превратится в (полноценный?) язык программирования визуальной составляющей веб-документов.
И все бы хорошо, если бы это не вносило смуту в ряды разработчиков, часть которых небезосновательно утверждает что использование переменных на уровне документа это благо, так как позволяет с большей легкостью изменять значения тех или иных свойств, да и сами свойства. Другая часть разработчиков не согласна с этими утверждениями и твердит о том, что переменные - зло, так как толка от них мало, они только путают и тд. Читать дальше >>

* Перевел все RSS-каналы на Feedburner. Починил заголовок фида.

На днях столкнулся с задачей вывода списка годов между 1900 и 2008 в теге select. Дело было при создании формы регистрации, а заказчик почему-то не хотел использовать Date Picker.

Так как сайт разрабатывается с помощью XML/XSL и без БД, то и решение должно быть на XSL. Если с месяцами все понятно и их в любом случае надо тянуть из XML, то дни и года надо выписать через темплейт. Читать дальше >>

Думаю многие из вас сталкивались с задачей создания двойной/нестандартной рамки для изображений на сайте. Частично я описал технику создания таких рамок здесь. Но я не упомянул (а если честно, то и сам тогда не подумал об этом) в той статье один интересный нюанс.

С помощью этой техники, можно создавать эффект тени для картинки, буквально в пару строк. Что нужно сделать?

Для начала напомню, что для создания двойной/нестандартной рамки для изображений нужно задать отступ шириной в 1px для картинки и прописать для нее либо border с параметрами цвета и толщины, либо положить картинку в контейнер и задать для контейнера отступ и фоновое изображение.

В данном случае все проще. Нужно задать padding и border для картинки всего лишь с двух сторон, вместо четырех и фон. Например вот так:

.shadow{
border-bottom:2px solid #eee;
border-right:2px solid #eee;
padding-bottom:2px;
padding-right:2px;
background:#ccc;
}

Вот живой пример:

Не уверен что на картинке с белым фоном это выглядит так как надо, но все же

С неменьшим успехом можно проделывать подобное, задавая фоновое изображение и играя с его позиционированием.

Естественно, что можно и нужно эксперементировать чтобы добиться нужного эффекта, но суть ясна.

P.S. В Quircks Mode в Интернет Эксплорере 6 не будет работать padding для img, но если вы все же работаете в Quircks Mode, то это ваши проблемы