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

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

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

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

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

К дополнению справочника по CSS, в качестве приложения под Андроид выпущена книга Вёрстка веб-страниц. Если кто ещё не читал, то устанавливайте бесплатно и знакомьтесь.

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

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

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

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

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

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

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

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

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

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

Масштабирование, наклон и поворот любого элемента возможен с помощью свойства 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, а не к родительскому контейнеру. Псевдоэлемент может трансформироваться независимо.