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

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

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

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

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

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

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

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

Дирк Шульц

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

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

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

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

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

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

Изящный эффект обратной связи при щелчке

Мери Лу

В последнее время новые классные интерактивные эффекты были созданы, чтобы следовать принципам Google Material Design. Один из таких великолепных небольших эффектов похож на расходящиеся кругами волны при щелчке. Пока эти эффекты связаны с тем местом, куда щёлкнули или нажали, но сама идея добавить небольшой эффект обратной связи довольна интересна. Как правило, едва заметные индикаторы используются в приложениях, чтобы визуально показать место прикосновения к экрану мобильного устройства. Но подобные эффекты в действительности могут оказаться полезными, когда задействуется любой щелчок или прикосновение. Индикатор означает, что действующий элемент был нажат и, если это сделано правильно, то время отклика кажется меньшим.

Стильные вдохновляющие всплывающие подсказки

Мери Лу

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

Элементы figure и figcaption

Ричард Кларк

Оригинал: http://html5doctor.com/the-figure-figcaption-elements/

Перевод: Влад Мержевич

В традиционных печатных материалах вроде книг и журналов изображения, графики или примеры кода сопровождаются заголовками. До сегодняшнего дня у нас не было способа семантически верстать такого рода контент непосредственно в нашем HTML, вместо использования классов CSS. HTML5 надеется решить эту проблему путём введения элементов <figure> и <figcaption>. Давайте разбираться с ними!

Локальный справочник CSS

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

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

Также вы можете купить справочник за 30 рублей, деньги пойдут на развитие сайта, считайте это формой поддержки.

Скачать в формате CHM

Купить в формате CHM

Скачать в виде набора html-файлов

Купить в виде набора html-файлов

Также экспериментирую с другими форматами, так что этот список, возможно, расширится.

Textolite

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

Мне как-то понадобилось сделать небольшой сайт и возник вопрос — что для этого использовать? Универсальные системы такие как WordPress и Drupal требуют доступ к базе данных, много места, всяческих настроек и явно громоздки для маленького сайта; по этой же причине отпали фреймворки вроде CodeIgniter. Чистый HTML или PHP тоже брать не хотелось, не современно уже как-то. В общем, требовалось что-то промежуточное — простое, компактное, но выполняющее типовые задачи. Выяснил, что таких решений не много, но они определённо есть и называются обобщённо мини-фреймворками.

Компоненты Bootstrap

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

Расширил руководство по Bootstrap, продолжение посвящено разным компонентам. Планируется ещё одна часть, где будет рассказано о вёрстке.

http://webref.ru/layout/bootstrap/component

Справочник CSS

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

На сайте WebReference обновился справочник CSS по адресу http://webref.ru/css

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

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

http://jsfiddle.net/user/webref/fiddles/

Bootstrap

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

Если вас всегда интересовало, что такое Bootstrap и что он даёт для веб-разработки, то вот вам небольшое руководство по этому фреймворку.

http://webref.ru/layout/bootstrap

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

Страницы