Пользовательские скроллбары в WebKit

Вернёмся назад, когда вы могли настроить скроллбары в IE (5.5) с помощью нестандартных свойств типа scrollbar-base-color, которые применялись к элементам с полосами прокрутки (вроде body), и делать потрясные штуки. IE теперь не тот.

В наши дни пользовательские скроллбары вернулись, но теперь наступило время WebKit. Это несколько лучше, поскольку свойства содержат вендорный префикс (например ::-webkit-scrollbar) и используют «Shadow DOM». Всё это работает уже несколько лет. Дэвид Хаятт в начале 2009 года показал в своём блоге пример страницы со всевозможными полосами прокрутки, о которых вы могли только мечтать.

Простая CSS3 анимация с Animate.css

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

Animate.css делает кодирование чуть более сносным. Просто выберите эффект, посмотрите его в действии, скачайте код и добавтье пару классов к вашему HTML-элементу. Вы можете скачать весь CSS-файл, содержащий 2500 строк или создать пользовательский файл используя только необходимые эффекты.

Обновление сайта

Друзья, htmlbook.ru обновил движок и заодно дизайн. Также изменена структура сайта и отредактированы все материалы, плюс добавились новые задачи в разделе Практикума.

Если заметите какие-то ошибки, пишите о них в комментариях к этой заметке или лично мне по почте vlad@htmlbook.ru.

Основы HTML5

Добавлен новый тест для проверки основ знаний по HTML5. В тесте всего десять простых вопросов, прохождение занимает минуту.

Рецепты CSS в виде приложения под Андроид

В виде приложения под Андроид доступен справочник «Рецепты CSS», в котором собраны ответы на популярные вопросы, касательно оформления элементов веб-страниц. Все рецепты систематизированы по категориям, содержат таблицу поддерживаемых браузеров, пример и результаты выполнения примера в браузере.

Приложение платное, стоит 1$.

QR-код для ссылки

Путь верстальщика

Коллеги, часто ли вы слышите вопрос "Как стать хорошим верстальщиком?"? Лично я постоянно! Мне задавали этот вопрос неоднократно, и каждый раз мне приходилось давать урезанные ответы, которые порой оставляли ещё больше вопросов у новичков.

В этой статье я решил исправиться и поведать читателям свой путь обучения, который я считаю наиболее правильным и эффективным.

Обзор: Инлайновый контекст форматирования

Эта книга, написанная создателями css-live.ru (Максимом Усачёвым aka psywalker и Ильёй Стрельцыным aka SelenIT), посвящена одной из самых важных и вместе с тем самой загадочной, неизученной, неоднозначной и полной неочевидных сюрпризов стороне действующей спецификации CSS — визуальному форматированию текста.

Как изменить размер фоновой картинки через CSS3

В CSS 2.1 фоновая картинка, применяемая к контейнеру, сохраняет свои фиксированные размеры. К счастью, в CSS3 введено свойство background-size, с помощью которого фон может быть растянут или сжат. Оно идеально подходит, если вы создаёте шаблон для адаптивного веб-дизайна.