Видеоурок по применению CSS Grid

Видеоурок по применению CSS Grid

Привет! Тема CSS Grid уже долгое время не даёт покоя frontend сообществу. В этом видео мы решили перейти от теории к практике и рассмотреть пример применения этой технологии для построения макета. Это пробный вариант и мы будем пристально следить за вашей активностью, чтобы стало понятно: стоит ли сделать цикл видео по гридам или нет. Приятного просмотра. UPD. Ссылка на финальный код — codepen.io/mcslayer/pen/XBNXyX

Подробнее
[Из песочницы] Создание несимметричной сетки с помощью Grid Layout

[Из песочницы] Создание несимметричной сетки с помощью Grid Layout

На данный момент, по данным Can I Use, 84% браузеров поддерживает Grid Layout. С каждым месяцем это число растет. А ведь буквально недавно этот модуль находился за флагом. Поэтому если Вы еще не знакомы с теми возможностями, которые он предоставляет, то самое время это исправить. В качестве примера я выбрал галерею изображений с сайта Кинопоиск, которая создана с помощью относительного позиционирования. При реализации мы будем руководствоваться принципом «воруй, но улучшай», поэтому наша…

Подробнее
[Из песочницы] Sublime Text 3 жив. (Настройка и работа)

[Из песочницы] Sublime Text 3 жив. (Настройка и работа)

Sublime Text 3 — кроссплатформенный текстовый редактор. Краткий гайд для начинающих работать в sublime и в сфере вёрстки. Тут собрано всё самое необходимое и важное. (По ссылкам найдёте больше, если это нужно) Будем рассматривать его для Вёрстки на Pug / Less, где нам не нужен огромный функционал отладки. Поэтому именно этот редактор (по моему мнению) побеждает своих конкурентов как в скорости работы так и в функционале. 1. Установка программы и контроль за дополнениями (Package…

Подробнее
Ищем поддержку hover на css

Ищем поддержку hover на css

Доброго времени суток, дорогие хабрахабровцы! При создании адаптивной версии сайта, часто бывают ситуации, когда надо знать: поддерживает ли браузер пользователя hover, или нет. К примеру, выпадающее при наведении подменю, или же различные анимации, привязанные к событию hover — все это нужно только на ПК. На touch-устройствах поведение элементов должно меняться. Так как же задать определенные стили только для устройств с поддержкой hover на css, не забывая о кроссбраузерности? Читать дальше →

Подробнее
[Из песочницы] Задачка про страницу в три столбца, один из них в сто пикселей

[Из песочницы] Задачка про страницу в три столбца, один из них в сто пикселей

Эта статья задумывалась как небольшое руководство к выполнению лабораторной работы для студентов, начинающих изучать веб-технологии. Разработать страницу, состоящую из трех разноцветных столбцов. Левый столбец шириной 100 пикселей, центральный и правый занимают все оставшееся до края страницы место равномерно. Высота всех трех 100% страницы. Не должно быть скроллбара и белых полос вокруг страницы. После нескольких лет работы во фронтенд-разработке, задачи подобные этой классифицируются как

Подробнее
[Из песочницы] Организация отступов в верстке (margin/padding)

[Из песочницы] Организация отступов в верстке (margin/padding)

Цель этой статьи не усложнить простые вещи, а акцентировать внимание на известных стандартах, о которых почему-то забывают. Важно соблюдать осмысленную структуру во всех аспектах верстки, и не менее важно придерживаться ее в отступах. И одним из основных принципов верстки является гибкость. А именно, возможность легко вносить какие-либо изменения и ничего при этом не сломать. Правильное обращение с margin и padding играет очень большую роль в этом деле. Ниже перечисленные принципы

Подробнее
[Из песочницы] Простая валидация формы без JS

[Из песочницы] Простая валидация формы без JS

В данной статье я бы хотел поделиться методом быстрой валидации полей с помощью разметки и стилей. Данный метод не является кроссбраузерным и рекомендуется к использованию только как дополнительная фича. По ходу статьи мы будем уменьшать наши шансы на кроссбраузерность, но повышать функциональность. Давайте попробуем собрать стандартную форму, которая будет включать в себя: Имя, E-Mail, Телефон, Ссылку на сайт и допустим Ваш рост, чтобы поэксперементировать с числовым полем. Читать дальше →

Подробнее
Canvas & SVG: работаем с графикой

Canvas & SVG: работаем с графикой

В HTML5 представлено два элемента для работы с web графикой: Canvas и SVG. Две эти технологии достаточно сильно отличаются друг от друга. Важно знать об их преимуществах и недостатках, чтобы выбрать наиболее подходящую для конкретной задачи технологию. Элемент SVG позволяет создавать векторную графику, а элемент Canvas предназначен для создания растровых изображений. Элемент Сanvas также используется технологией WebGL для аппаратного ускорения 3D-графики. Читать дальше →

Подробнее
Нативные переменные в CSS. Уже пора…

Нативные переменные в CSS. Уже пора…

Всем привет, тема переменных в CSS давно ходит по интернету, однако не все знают о том, что это такое, да и сама технология не так давно вышла в релиз. И хоть использовать её во многих случаях рановато, уже пора понимать что она из себя представляет и как ею пользоваться. Давайте попробуем разобраться с технологией вместе. Обращу ваше внимание, что эта статья для тех, кто не знает о CSS переменных (кастомных свойствах) или только слышал о них. Если вы знакомы и умеете работать с данной

Подробнее
5 возможностей LESS, о которых вы могли не знать

5 возможностей LESS, о которых вы могли не знать

При разработке интерфейсов я уделяю значительное время работе со стилями, написанными на LESS или SCSS. И часто я замечаю, что разработчики используют только ограниченный набор возможностей препроцессора. В этой статье я хочу рассказать о тех возможностях препроцессора LESS, которые редко используются, но при этом могут значительно упростить написание стилей. Читать дальше →

Подробнее
[Из песочницы] Слайдер на CSS

[Из песочницы] Слайдер на CSS

Хочу рассказать простой способ создания слайдера, без использования JS, при помощи анимации CSS. 1) Для начала напишем HTML, предположим что в слайдере будут сменять друг друга 4 изображения. Читать дальше →

Подробнее
[Перевод] Знакомство с Styled components 

[Перевод] Знакомство с Styled components 

Предлагаем вашему вниманию перевод свежей ознакомительной статьи Cаши Грифа (Sacha Greif), соавтора книги «Discover Meteor», о специфике работы с библиотекой Styled components. «СSS – странная штука. Его основам можно обучиться за 15 минут, но на то, чтобы найти хороший способ организации стилей, могут уйти годы. Отчасти это объясняется особенностями самого языка. В своем исходном виде CSS довольно ограничен — никаких переменных, циклов или функций. В то же время, он развязывает вам…

Подробнее