Разработка для Firefox OS

Добавилось новое руководство по разработке приложений для Firefox OS от Андре Гарсия. Это относительно новая мобильная платформа, для создания приложений к которой надо знать HTML, CSS и JavaScript. Благодаря нашему сайту две трети вы уже знаете. Так что это ваш шанс выйти на новый мобильный рынок!

Примеры в справочниках

На сайте webref.ru обновился справочник HTML и CSS. Исправлены мелкие ошибки, переделано большинство примеров, а главное — их теперь можно просматривать непосредственно в браузере. Для этого возле примеров есть вкладка «Результат», при щелчке по ней виден результат текущего примера. Технология используется та же, что и на htmlbook.ru, но на мой взгляд, сделана удобнее. Используйте и делитесь впечатлениями и предложениями по справочникам.

Подсветка кода через Rainbow

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

Less

По адресу webref.ru/layout/less добавилось небольшое руководство по Less. Если не знаете что это такое, читать обязательно, а если знаете, то продолжайте дальше использовать Sass.

Справочник HTML

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

Хостинг от Unihost к празднику

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

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

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

Курс по вёрстке

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

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

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

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

Направление текста

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

Google. Вид сзади

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

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

Полоски при наведении

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

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

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

Маскирование в CSS

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