Сегодня мы хотели бы поделиться некоторыми мыслями по добавлению гибкости к элементам. Идея в том, чтобы интегрировать 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

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

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

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

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

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

http://webref.ru/layout/bootstrap

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

Topcoat — это маленькая и шустрая CSS-библиотека для веб-разработчиков от компании Adobe. Всё сделано красиво и аккуратно, дизайнеры явно постарались при работе над темой.

Скачать и посмотреть примеры можно по адресу http://topcoat.io

Что вообще такое CSS-библиотека? Фактически это один или несколько стилевых файлов, которые содержат готовое оформление множества элементов. Вам достаточно подключить стиль к себе на страницу, вставить желаемый элемент и добавить к нему определённый класс. После этого элемент будет выглядеть как на картинке. Не надо нанимать дизайнера для рисования отдельных кнопок, не надо вспоминать какие стилевые свойства за что отвечают, не надо тестировать в разных браузерах на предмет совместимости. Всё это берёт на себя библиотека.

В HTML 4 крайне не хватало возможности создавать свои собственные атрибуты для хранения значений. Зачем это надо? Вот несколько задач, где это может потребоваться.

• Создание всплывающих подсказок без применения скриптов.
• Определение стиля элемента на основе значения атрибута.
• Получение и изменение значений через скрипты.

В HTML5 появился новый универсальный атрибут, который можно добавлять к любому тегу. Правила написания атрибута простые:

• всегда начинаем с data-;
• используем только латинские буквы, дефис (-), двоеточие (:) и подчёркивание (_).
  

CSS и JavaScript немного по разному обращаются к таким атрибутам, так что разберём примеры для них отдельно.

Не забыли меня ещё, надеюсь? Много раз меня просили расширить тематику htmlbook.ru, добавив JavaScript и даже PHP, на что я всегда отвечал твёрдым отказом. Это сайт в первую очередь об HTML, CSS и вёрстке, так будет и дальше. Поэтому параллельно задумал ещё один проект, где таких ограничений нет — WebReference.ru, доступен также по короткому адресу webref.ru.

Завершился приём работ на мини-конкурс «Новогодняя открытка». Приняло участие девять авторов, они подали 12 работ, одна не засчитана. Посмотреть открытки и проголосовать за понравившиеся можно в этой теме. Смотрите, голосуйте и начинайте радоваться наступающему Новому году.

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

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

Для тех, кто уже работает или собирается работать с InSales, 5 декабря в 12 часов начнётся бесплатный онлайн-вебинар посвящённый шаблонам. Что такое «12 часов» в пределах нашей обширной родины, наверное надо спросить у москвичей.

6 декабря состоится встреча уже в реале разработчиков приложений для InSales. Она также бесплатна, но требует предварительной регистрации.

Регистрация на мероприятия и знакомство с программой на сайте techdays.insales.ru.

На форуме часто задают вопросы какой хостинг выбрать. В преддверии новогодних праздников htmlbook и «Первый хостинг сервис» предлагают совместную акцию для всех посетителей сайта и форума. До конца года вы можете получить качественный хостинг со скидкой 20%. Для этого надо зарегистрироваться на сайте 1hs.ru и при заказе услуги в поле «Код скидки» указать htmlbook. При заказе хостинга на один год в подарок также даётся домен.