Рецепты CSS

Доступна новая платная цифровая книга «Рецепты 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 со всеми возможными значениями, они пронумерованы для их идентификации.

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

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

Декоративные рамки

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

Зачем ты так, Mozilla?

Компания 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, забывая, что второй такой браузер не нужен. Мы любим Лисичку не за то, что это Хром, а за то, что под неё есть множество полезных и нужных дополнений и вёрстка проверяется по стандартам.

Результаты мини-конкурса по вёрстке

Подведены итоги конкурса по вёрстке формы, с большим отрывом победил psywalker, второе место по итогам голосования заняла Akaciya. Таким образом, места следующие:

I. psywalker (http://css-live.ru/Portfolio/Form-forum/main-page.html)

II. Akaciya (http://podag.ru/form_h5/

В качестве приза был предоставлен специализированный хостинг для WordPress hostenko.com и для Joomla um.la

Мини-конкурс по вёрстке формы

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

Конкурс по вёрстке продлён

Мини-конкурс по вёрстке формы продлён до 27 сентября. С правилами конкурса можно ознакомиться здесь.

Тесты

На сайте несколько поменялась система тестирования. Теперь в конце тестов Основы HTML, HTML4 на практике и Основы CSS выводится не только итоговая оценка, но и отдельные оценки по категориям. Это позволит определить, в какой области у вас хорошие знания и что следует подучить при необходимости.

OpenServer

OpenServer

http://open-server.ru

Включает в себя: Apache, nginx, PHP, MySQL, phpMyAdmin, FTP-сервер FileZilla.

Русская версия: есть.

OpenServer занимает практически 50 Мб, что раза в три превосходит объём других комплектов, при этом и содержит довольно внушительный набор компонент. Например, имеется сразу два веб-сервера: Apache и nginx, также две разные версии PHP и MySQL.

Страницы