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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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