Верстка \ CSS 3

Функция Calc() и примеры ее применения в CSS

От автора: я уверен, что каждый фронтенд-разработчик знаком с функцией calc() или, по крайней мере, хоть раз о ней слышал. Функция CSS Calc является не самым новым, но все же уникальным инструментом. Сначала я понятия не имел, как она работает и для чего нужна. Конечно же, я узнал это и изучил основные принципы ее использования, но конкретное ее применение я осваивал в ходе работы.

Продолжить чтение

Верстка \ CSS 3

Создание дуплекс эффекта на изображениях с помощью SVG

От автора: с SVG изображения могут стать какими угодно, так ведь? Спустя год совместной работы с дизайнерами и экспериментов с визуальными эффектами можно сказать, что у меня получилось. Быстрый поиск SVG на CodePen покажет вам результат моей работы. Тиснение, фигуры, спрайты, анимации и манипуляции с изображениями – с щепоткой SVG все лучше. Когда в том году в веб ворвался новый визуальный тренд, неудивительно, что SVG смог и его реализовать.

Продолжить чтение

Верстка \ CSS 3

Объяснение CSS переходов

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

Продолжить чтение

Верстка \ CSS 3

Использование calc(), vw, брейкпоинтов и  линейных уравнений в CSS Poly Fluid Sizing — калибруем размеры

От автора: сегодня мы поговорим о том, как откалибровать в CSS размер элементов. При работе с креативными дизайнерами над дизайнами веб-страниц довольно часто приходится получать несколько набросков или макетов Sketch или Photoshop, по одному на каждый брейкпоинт.

Продолжить чтение

Верстка \ CSS 3

Понятие CSS переменных

От автора: CSS переменные или пользовательские свойства CSS позволяют работать с переменными прямо в CSS. Они отлично помогают в сокращении повторяющегося кода CSS, а также это мощный инструмент таких эффектов, как переключение темы. У CSS переменных есть функции полифилов. Они работают по принципу DRY – не повторяйся. С помощью CSS переменных вы можете локализовывать значения и упрощать первичную разработку, итерационное тестирование и в последствии обслуживание. Они официально включены в CSS спецификацию. Перейдем к деталям.

Продолжить чтение

Верстка \ CSS 3

Подумайте об использовании инлайна CSS в вашем следующем email проекте

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

Продолжить чтение

Верстка \ CSS 3

ABEM. Более полезная адаптация BEM CSS

От автора: BEM CSS — популярное соглашение об именах классов CSS, упрощающее CSS. В этой статье предполагается, что вы уже знакомы с данным соглашением. Если нет, больше об этом можно найти на сайте getbem.com, чтобы получить базовые знания.

Продолжить чтение

Верстка \ CSS 3

Введение в Web Animations API

От автора: недавно я узнал про Web Animations API – функцию в современных браузерах для создания анимации, которую обычно вы создаете в CSS и JS. Для сложной анимации вы, скорее всего, захотите использовать мощный инструмент, однако простые затемнения и движения можно делать и с помощью базового web API.

Продолжить чтение

Верстка \ CSS 3

Анимация border в CSS

От автора: как делается анимация border CSS по состоянию hover? Просто, так ведь? Вы удивитесь. Задача проста – создать кнопку с расширяющейся рамкой при наведении мыши. В сегодняшней статье обсудим реальные CSS советы, которые легко внедрить в любой проект без вмешательства в DOM и подключения JS. Описываемые методы следуют следующим правилам.

Продолжить чтение

Верстка \ CSS 3

Как сохранить видимость родительского элемента, когда дочерний элемент выделен :focus

От автора: видимость родительского элемента в CSS при выделенном дочернем. Использование focus-within. Применение JavaScript в случае отсутствия поддержки фокуса браузерами — об этом в данной статье.

Продолжить чтение