img
Основы CSS Grid
Верстка

Наконец-то в последних версиях Firefox и Chrome был запущен CSS Grid без дополнительных флажков. Да-да, теперь можно поиграть с гридом в двух самых популярных браузерах.

05.10.2017
837
0
img
Сколько живет сайт?
Верстка

Сайт – это инвестиция, но о каком конкретно времени мы говорим? Когда и как инвестировать в сайт и чем руководствоваться?

21.08.2017
686
0
img
Новая адаптивка - единицы вьюпорта
Верстка

Иногда для правильной адаптации страницы media querie и процентов не достаточно, нужно больше контроля. И решение есть – единицы вьюпорта!

21.08.2017
746
0
img
Перестаньте использовать контрольные точки устройств
Верстка

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

08.05.2017
575
0
img
Адаптивный дизайн
Верстка

При использовании медиа запросов CSS значения изменяются очень резко, но можно добиться более плавного результата.

28.04.2017
928
0
img
Вариабельные шрифты
Верстка

В октябре 2016 появилась новая технология: OpenType Font Variations, более известная как вариабельные шрифты. Эта технология позволяет одному шрифтовому файлу вести себя как несколько шрифтов.

13.03.2017
710
0
img
CSS Grid: верстка макета разными способами
Верстка

У CSS Grid очень гибкий синтаксис. Чтобы продемонстрировать это, мы создадим один и тот же макет тремя разными способами.

13.03.2017
865
0
img
CSS псевдо-классы: стилизация элементов на основе их индексов
Верстка

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

14.03.2017
671
0
img
Небольшой пример использования `vmin`
Верстка

Иногда единицы viewport’a очень полезны, так как зависят только от его размерa. Никакого каскада и влияния родительских элементов. Давайте рассмотрим небольшой пример использования vmin.

14.03.2017
349
0
img
Понимание и применение рекурсии в CSS
Верстка

В веб программировании рекурсией называется функция, которая вызывает сама себя, как же добиться подобного эффекта в CSS?

03.03.2017
1253
0
img
Сила единиц viewport’a
Верстка

Проценты дают много способов настроить вид контента, но они подходят не во всех случаях. Единицы viewport’a предлагают альтернативные «гибкие» значения.

02.03.2017
444
0
img
Адаптивная типографика
Верстка

Вместо того, чтобы всегда использовать один и тот же размер шрифта, или прыгать от одного размера к другому, как в media queries, можно сделать его гибким.

27.02.2017
908
0
img
nth-child vs nth-of-type
Верстка

Псевдоклассы nth-child и nth-of-type очень похожи, но все же работают совершенно по-разному. Давайте разбираться.

04.02.2017
440
0
img
новые CSS свойства
Верстка

С приходом нового года появился целый набор новых вещей для изучения. Среди них много новых свойств, 3 из которых мне бы хотелось поскорее применить в этом году.

30.01.2017
626
0
img
Верстка макета с помощью CSS Grid
Верстка

CSS Grid довольно сложный, в нем 17 новых свойств и много новых концепций на счет написания CSS. Пытаясь разобраться в спецификации, я создала простой макет.

01.02.2017
1230
0
img
CSS @supports
Верстка

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

01.02.2017
457
0
img
СКОШЕННЫЕ ЭЛЕМЕНТЫ НА CSS
Верстка

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

04.02.2017
1981
0
img
Использование CSS переменных в разработке сайтов
Верстка

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

01.02.2017
494
0
img
CSS Grid уже близко!
Верстка

С приходом нового года в браузерах появляется CSS Grid, и сразу без префиксов. Этот пост будет ответом на вопросы, которые мне задавали о CSS Grid и его поддержке браузерами.

30.01.2017
732
0
img
Что нужно знать о градиентах и "прозрачном черном"?
Верстка

Допустим, у вас есть градиент на CSS, который идет от красного к прозрачному. Вроде бы все просто, да? Но на самом деле тут есть подвох.

30.01.2017
840
0
img
Будущее веб форм
Верстка

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

23.12.2016
328
0
img
переменные CSS против переменных препроцессоров
Верстка

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

20.12.2016
619
0
img
SVG. Руководство по синтаксису <path>
Верстка

<path> выглядит довольно неразборчиво. В нем куча цифр и буков, смешанных в одну длинную строку. Компьютерная поэзия! Я не эксперт, но думаю, что будет интересно покопаться в нем.

21.10.2016
1157
0
img
SVG на практике
Верстка

Отрывок из 6 главы книги Криса Койера «Practical SVG». Хотелось бы Вам получить контроль над размерами всей графики, которую вы используете на сайте? «Эй, ты! Лого! Ты должно быть вот такого размера!» И так все и происходит.

18.10.2016
1222
0
img
Разработка расширяемых HTML и CSS компонентов
Верстка

Мы пришли к пониманию важности модулей и того, как они помогают с адаптивностью.

14.10.2016
562
0
img
Война браузеров закончилась?
Верстка

Изменения в годовой статистике использования браузеров едва-едва заметны. Война браузеров закончилась?

06.10.2016
570
0
img
CSS4: Что нового, о чем стоит знать
Верстка

Основные пункты новых модулей: переменные, новые селекторы, сетка и Snap Points.

28.09.2016
502
0
img
Hover мертв
Верстка

С появлением устройств с сенсорными экранами в формате ноутбука hover эффект стал не надежным.

28.09.2016
436
0
img
На сколько быстрой должна быть анимация?
Верстка

Статья поднимает важную тему тайминга UI анимации. Правильный тайминг необходим для создания правильной анимации.

20.05.2016
440
0
img
"front end" или "front-end"?
Верстка

Как вы предпочитаете писать название работы, которой мы занимаемся: frontend? front end? Front-End? Есть ли среди этих вариантов правильный?

03.05.2016
571
0