Блог



Использование Animate.css

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

Пользовательские скроллбары в 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, в качестве приложения под Андроид выпущена книга Вёрстка веб-страниц. Если кто ещё не читал, то устанавливайте бесплатно и знакомьтесь.

Перейти к приложению на Google Play

QR-код

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

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

Справочник по CSS под Андроид

Друзья! Один из лучших в Рунете справочников по CSS от сайта htmlbook.ru теперь доступен и в виде мобильного приложения под Андроид. Оно бесплатное, с показом рекламы.

Перейти к приложению на Google Play

Ставьте, используйте и пишите свои отзывы.

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

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

Новые варианты повторения фоновой картинки в CSS3

В CSS 2.1 свойство background-repeat имеет четыре значения: no-repeat, repeat, repeat-x и repeat-y. Хотя они, безусловно, полезны, но не позволяют полностью управлять процессом повторения и картинки будут обрезаны, если они не помещаются в контейнер точное число раз.

CSS3 вводит два новых варианта: space и round.

Иконки веб-шрифтов: альтернатива изображениям

Давайте будем честными, делать мелкие значки дюжинами в графическом пакете не весело. Даже если вы собрали подходящий набор, вам придётся управлять дюжиной мелких файлов или создавать спрайты изображений и нарезать их затем в CSS.

К счастью, HTML5 предоставляет нам еще один вариант: веб-шрифты. Набор шрифтов может содержать графические иконки и наборы символов. Wingdings — это один из наиболее известных, но свободные шрифты вроде Iconic могут быть более полезными и обеспечат пример кода на HTML и CSS.

Как применить трансформацию CSS3 к фоновым картинкам

Масштабирование, наклон и поворот любого элемента возможен с помощью свойства CSS3 transform. Оно поддерживается всеми современными браузерами (с префиксами) и допускает изящную деградацию, к примеру:

#myelement {
  -webkit-transform: rotate(30deg);
  -moz-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  -o-transform: rotate(30deg);
  transform: rotate(30deg);
}

Хорошая штука. Однако вращается элемент целиком — его содержимое, границы и фоновая картинка. Что делать, если вы желаете повернуть только фоновое изображение? Или чтобы фон остался на месте, а элемент поворачивался?

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

К счастью, есть решение. В сущности, это хак, который добавляет фоновое изображение к псевдоэлементу :before или :after, а не к родительскому контейнеру. Псевдоэлемент может трансформироваться независимо.

Прощай -9999px: новая техника замены изображений через CSS

Техника замены изображений через -9999px была популярна почти десятилетие. Для замены текстового элемента изображением, можно использовать следующий код:

<h1>Заменяемый текст</h1>
<style>
h1
{
  background: url("myimage.png") 0 0 no-repeat;
  text-indent: -9999px;
}
</style>

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

До сих пор.

Страницы

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.