На сайте webref.ru обновился Справочник HTML. Обновлена таблица с браузерами, дополнены примеры, исправлены мелкие ошибки. В общем, справочник стал ещё лучше!

Друзья, в честь праздников компания Unihost специально для читателей htmlbook согласилась предоставить скидки на услуги хостинга. Итак:

• -15% на любой тариф виртуального хостинга при заказе на срок от 1 до 6 месяцев либо домен в подарок при заказе от года и более. Подробности
• -15% на заказ виртуального сервера (VPS) на любой срок. Подробности
• -20% на установку и первый месяц аренды выделенного сервера в Германии, Франции или Канаде. Подробности

И напоследок, детальная инструкция по переносу сайта с компьютера или другого хостинга на хостинг Unihost.com.

htmlbook.ru давно дружит с Нетологией. Здесь размещаются анонсы их курсов по веб-технологиям, а они со своей стороны предлагают скидки читателям сайта. Вот и теперь всем посетителям доступна персональная скидка 5000 рублей по промокоду htmlbook на программу онлайн-обучения «HTML-вёрстка: с нуля до первого макета». Учащиеся под руководством профессионалов готовят свои макеты и защищают диплом, а преподаватели дают личную консультацию по каждой работе.

Вы научитесь:

• писать профессиональный HTML- и СSS-код, а также подбирать модульные сетки для макета;
• пользоваться базовыми инструментами Adobe Photoshop и обрабатывать изображения;
• писать скрипты и работать с библиотекой jQuery.

Записаться на программу обучения. Старт обучения 17 апреля, скидка действует до 20 апреля.

Мы привыкли читать тексты слева направо, для нас это кажется привычным и естественным. В то же время есть языки, где писать надо справа налево, например, в арабском письме. Кроме того изредка возникают задачи, когда текст надо повернуть, отразить или ещё как-то представить непривычным образом. Гугл так пошутил на первое апреля и показал оборотную сторону своего поисковика (рис. 1).

Рис. 1. Google. Вид сзади

Слава CSS, задавать направление текста весьма легко и это делается буквально парой свойств, так что можно экспериментировать вволю.

Для больших рекламных боксов на Uniqlo.com применялись анимированные полоски, которые показывались при наведении курсора мыши. Это весьма потрясающе, если вы меня спросите. Возможно поэтому они хотели чтобы это работало в большинстве браузеров, так что использовали для создания эффекта анимированный GIF. Его размер меньше 4 Кб, но как вы знаете, это дополнительный HTTP-запрос. Давайте повторим этот эффект в современном улучшенном стиле: меньше поддержки браузерами, зато более действенно.

Эффект в действии

В компьютерной графике отсечение и маскирование — это две наиболее используемые операции. Обе они визуально скрывают часть элемента. Если вы ранее работали с SVG или HTML Canvas, то эти операции для вас, скорее всего, уже не новы. Отсечение определяет область элемента которая будет видна, всё остальное за пределами этой области не отображается и получается «отрезанным». При маскировании изображение маски объединяется с элементом, влияя на его альфа-канал. Части маскированного элемента получаются полностью или частично прозрачными. Новая спецификация CSS Masking направлена на объединение этих двух операций в мире HTML.

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

Почему именно фон? У него куча плюсов. Главное, фон лежит себе на заднем плане и не мешает выводить поверх него остальные элементы. К тому же у background есть множество параметров, включая функции для градиентов, всё это позволяет разнообразить создание фона.

«Нетология» представляет программу онлайн-обучения «HTML-вёрстка: с нуля до первого макета». Участники программы разбирают реальные кейсы и готовят к выходу свои проекты. В конце обучения проходит защита диплома — выпускники показывают готовые макеты, а преподаватели дают личную консультацию по каждой работе.

Вы научитесь:

• писать профессиональный HTML- и СSS-код, а также подбирать модульные сетки для макета;
• пользоваться базовыми инструментами Adobe Photoshop и обрабатывать изображения;
• писать скрипты и работать с библиотекой jQuery.

Записаться на программу обучения. При оплате до 31 марта для посетителей htmlbook.ru — скидка 3000 рублей. Вдобавок «Нетология» вернёт деньги, если до третьего занятия вы решите прекратить обучение.

Старт обучения 3 апреля.

На сайте webreference.ru добавлено руководство HTML5 и CSS3 на примерах. Более 70 материалов охватывающих популярные темы по вёрстке. Кое-что из них уже публиковалось ранее, но часть написана специально для этого сайта, особенно это касается новых тем вроде анимации, переходов и трансформации. Из-за большого объёма пришлось выбросить ряд тем, они будут оформлены позже в виде отдельных руководств. Потому что под формат сайта больше подходят небольшие руководства охватывающие узкую тему.

Руководство ориентировано на тех, кто уже знаком с основами HTML и CSS и теперь хочет знать, что с этим делать дальше. Читать можно как последовательно, так и по отдельным интересующим темам.

Также вы можете купить руководство за 40 рублей в формате CHM. Удобно тем, что не требует выхода в сеть и всё хранится в одном файле. Заодно поддержите тем самым сайт.

Купить HTML5 и CSS3 на примерах

В этом уроке мы расскажем о Snap.svg — библиотеке JavaScript, которая помогает при анимации и манипуляции содержимым SVG. Для демонстрации некоторых доступных возможностей мы сделаем анимацию глаза на SVG.