Доступна новая платная цифровая книга «Рецепты CSS» представляющая собой сборник ответов на типовые вопросы по CSS и HTML. Все примеры выполнены на HTML5, активно используется CSS3. Кроме самих рецептов приведены двух и трёхколоночные типовые макеты для вёрстки.

Стоимость 50 рублей, доступны два формата: chm для просмотра в Windows и в виде набора html-файлов для любой платформы.

Рецепты CSS в формате CHM

Рецепты CSS в виде набора HTML-файлов

На форуме htmlbook.ru объявлен очередной мини-конкурс по использованию свойств CSS3 для рисования на тему «Сады Семирамиды». Работы принимаются до 14 ноября. Правила конкурса и подробности смотрите в этой теме.

Радиальные по своему принципу похожи на линейные градиенты, но один цвет переходит в другой не вдоль прямой линии, а словно круги по воде вокруг точки. На рис. 1 представлено для сравнения одновременно два разных градиента: радиальный (рис. 1а) и линейный (рис. 1б).

а	б

Рис. 1. Радиальный и линейный градиент

Градиентом называют плавный переход от одного цвета к другому, причём самих цветов и переходов между ними может быть несколько. С помощью градиентов создаются самые причудливые эффекты веб-дизайна, например, псевдотрёхмерность, блики, фон и др. Также с градиентом элементы смотрятся более симпатично, чем однотонные.

Традиционные прямоугольные уголки в дизайне сайтов давно уже всем надоели. В моде скруглённые уголки, которые делаются не с помощью изображений, а через стили, для чего используется свойство border-radius. Это свойство может иметь одно, два, три или четыре значения разделённых пробелом, которые и определяют радиус всех уголков или каждого по отдельности.

Эффект полупрозрачности элемента хорошо заметен на фоновом рисунке и получил распространении в разных операционных системах, потому что смотрится стильно и красиво. В веб-дизайне полупрозрачность также применяется и достигается за счёт свойства opacity или формата цвета RGBA, который задаётся для фона.

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

Тень под блочным элементом на странице обычно применяется для создания эффекта трёхмерности, привлечения внимания к элементу или как часть дизайна. Небольшая тень под элементами придаёт также странице объём и глубину.

Для добавления тени используется свойство box-shadow, у которого имеется шесть значений, из них только два являются обязательными. На рис. 1 показано свойство box-shadow со всеми возможными значениями, они пронумерованы для их идентификации.

Рис. 1. Значения свойства box-shadow

Рисованные декоративные рамки делаются с помощью изображений, при этом предварительно рамку разбивают на ряд фрагментов, а затем выводят их в виде фонового рисунка. Этот процесс можно сильно упростить, если воспользоваться свойством border-image, с его помощью легко управлять видом и настройками декоративной рамки.

Компания Google со своим браузером Chrome нарушила все общепринятые нормы именования версий программ. Как обычно это происходит. Если изменения достаточно серьёзные, то присваивается мажорная часть, например 2.0 вместо 1.0 или для краткости просто 2, если же обновления были, но не тянут на полноценную версию, тогда повышается минорная часть, например, 2.1 вместо 2.0 и 2.2 вместо 2.1. Браузер Chrome выходит три года, но за это время по нумерации версий переплюнул старичка Opera, которому в несколько раз больше лет. Всё потому, что любое, самое ничтожное с точки зрения пользователей новшество, сразу же вызывает повышение номера версии и вместо 1.1 выходит 2.0, затем 3.0 и т. д.

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

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

Mozilla объявила, что переходит на короткие циклы выпуска программы Firefox, так что в следующем году нас как минимум ожидает версия 12.0. Что это даёт пользователям? Да ничего хорошего. Некоторые дополнения с новой версией перестают работать, другие начинают работать несколько по другому. Широкий разброс версий только сбивает с толку, потому как непонятно, что в действительности реализовано в новой версии из HTML и CSS, а что нет. Разработчики просто не успевают привыкнуть и понять различия, когда следом надвигается уже новая версия.

Пусть переходят хоть на сверхкороткие выпуски и делают новые версии хоть каждую ночь, только чтоб не морочили голову, что это новая версия, тогда как в реальности в ней только пара особенностей появилась. На деле эта всё та же медленная и прожорливая программа, что была год назад, которая должна называться 6.1, а не 7.0. Из Firefox почему-то насильно хотят сделать второй Chrome, забывая, что второй такой браузер не нужен. Мы любим Лисичку не за то, что это Хром, а за то, что под неё есть множество полезных и нужных дополнений и вёрстка проверяется по стандартам.