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

Влад Мержевич

На сайте 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.

Анимация фона

Влад Мержевич

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

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

HTML-вёрстка: с нуля до первого макета

Влад Мержевич

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

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

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

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

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

HTML5 и CSS3 на примерах

Влад Мержевич

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

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

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

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

Как манипулировать и анимировать SVG через Snap.svg

Каталин Мирон

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

Font Awesome

Влад Мержевич

На сайте WebReference.ru добавлено небольшое руководство по Font Awesome. Это шрифт с иконками и набор стилей для их применения на сайте. Кстати, частично добавил на сайт эти иконки, так что вы можете посмотреть как это работает в действии.

Гибкие SVG элементы

Мери Лу

Сегодня мы хотели бы поделиться некоторыми мыслями по добавлению гибкости к элементам. Идея в том, чтобы интегрировать SVG элемент в компонент, а затем оживить переход одной кривой в другую с помощью анимации. Использование SVG для таких вещей как меню, кнопки и другие элементы делает их более интересными, а взаимодействие с ними естественным и органичным. Конечно, важно сохранить в них изящество без чрезмерной упругости. Приятно то, что мы можем дать более «реалистичную» интерактивную обратную связь с пользователем. Особую выгоду от такого эффекта можно извлечь при взаимодействии с сенсорным экраном. Опираясь на эту идею мы создали несколько впечатляющих примеров, в которых анимированное изменение формы имеет смысл.

Страницы