Верстка \ HTML&CSS

Переход на CSS Flexbox с помощью метода обнаружения

От автора: для front-end разработчиков пришло время отказаться от использования свойства float в CSS и погрузиться в новый захватывающий мир flexbox. Поддержка Flexbox в CSS уже достаточно хороша, свойство flexbox поддерживают все современные браузеры. Float устаревший метод стилизации; он поддерживается в браузере IE, начиная с 4 версии, и часто требовались различные обходные пути для его полной работоспособности (такие как clearfix и использование псевдокласса nth-child для блока-обертки колонок).

Читать далее

Верстка \ HTML&CSS

Изучение Material Design Lite: Карточки

От автора: карточки быстро заняли свое место в пользовательских интерфейсах, особенно на мобильных устройствах. Спасибо можно сказать крупным известным сайтам, таким как Pinterest, Twitter и Google Now. На нашем сайте Tuts+ на главной странице вам также представлены различные курсы или просто последние статьи в карточном стиле.

Читать далее

Верстка \ HTML&CSS

Изучение Material Design Lite: Текстовые поля

От автора: следующим шагом в изучении плюсов и минусов Material Design Lite (MDL) будут Текстовые поля. Данные поля используются повсеместно: от форм поиска, форм комментариев до контактов. Часто вместе с текстовым полем идет кнопка.

Читать далее

Верстка \ HTML&CSS

Советы по Material Design

От автора: за последнее время Material Design вырос в довольно большое движение. Сегодня во многих приложениях уже можно встретить различные компоненты материал дизайна: от карточек до улучшенной анимации.

Читать далее

Верстка \ HTML&CSS

@font-face дилемма

От автора: еще совсем недавно в интернете было столько дискуссий по поводу производительности веб-шрифтов. Доля нестандартных, кастомных шрифтов продолжает расти, но никто не задумывается по поводу их производительности. Если бы вы посидели в интернете с медленным соединением, то вы бы поняли, о чем я говорю.

Читать далее

Верстка \ HTML&CSS

Изучение Material Design Lite: Сетка

От автора: меню является частью пользовательского интерфейса на любом сайте. Без разницы, какой ваш сайт – одностраничный или полномасштабный коммерческий проект, каждому веб-сайту необходимо меню, чтобы пользователи могли легко перемещаться по страницам или разделам. Вслед за Сеткой из предыдущего урока по Material Design Lite мы рассмотрим очередной компонент MDL: меню.

Читать далее

Верстка \ HTML&CSS

Изучение Material Design Lite: Сетка

От автора: недавно мы уже прошлись по новому front-end фреймворку от Google Material Design Lite (MDL). Мы уяснили, что для создания веб-сайтов в MDL присутствует достаточно много компонентов настройки пользовательского интерфейса (UI), использующих основные принципы шаблона Material Design.

В данной серии уроков мы протестируем эти компоненты MDL более подробно, а начнем мы с Сетки, так как она составляет основу любого front-end фреймворка.

Читать далее

Верстка \ HTML&CSS

Создание слоистой анимации на SVG

От автора: что если я скажу вам, что существует формат изображений, работающий как GIF, но только с векторной графикой? А что если я скажу вам, что в этом формате можно менять направление анимации? А если так, вы можете взять за основу одно изображение и анимировать различные его части отдельно и с разной скоростью? Да, такой формат уже существует и это SVG. Просто нужно проявить немного смелости.

Читать далее

Верстка \ HTML&CSS

Ленивая загрузка и появление изображений

От автора: Уменьшение времени загрузки изображений на данный момент один из самых быстрых и легких способов повышения производительности сайта. Время загрузки включает в себя много понятий: минификация изображений с помощью инструментов типа ImageOptim и TinyPNG, data URI, спрайты, а также ленивая загрузка изображений.

Читать далее

Верстка \ HTML&CSS

Другими словами: Использование кавычек, цитат и тега q

От автора: при правильном использовании часто игнорируемых, а с другой стороны часто злоупотребляемых тегов <blockquote>, <cite> и <q> можно создавать по-настоящему семантически и типографски богатые страницы.

Читать далее