Пишу про разработку вообще и в частности про: JavaScript, HTML5, CSS3, AngularJS, ReactJS, Agile.

Новый css псевдокласс – :placeholder-shown

Продолжаем разговор о новых фичах в css. На повестке дня псевдокласс, который симафорит о том показан ли плейсхолдер в инпуте или нет. Новые возможности для оформления формочек, ае-е-е! See the Pen Pop up labels when Typing with :placeholder-shown by Artem Demo (@artemdemo) on CodePen. Разумеется работать не везде, но все современные браузеры понимают и поддерживают

CSS Grid – CSS разметка

Воу, воу, воу – мы приближаемся к невероятным изменениям. В браузерах появится CSS разметка. Казалось бы – что мы там не видели? Ан нет, ничего мы там не видели! И для затравки немного синтаксиса: Наверное, это пример не дает общей картины, давайте посмотрим визуально. Итак, у нас есть вот такой код: Новый css-grid позволит

CSS фреймворки – tachyons

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

Прозрачный треугольник при помощи css

Существует несколько способов для того чтобы сделать прозрачный треугольник исключительно используя CSS. И это уже очень круто, потому что не так давно этого можно было добиться только используя прозрачные png. SkewX() JS Bin on jsbin.com border JS Bin on jsbin.com

Рисуем специфичные тени на CSS

Тени бывают разные, дизайнеры бывают настойчивые (с) народно изречение Итак, с приходом CSS3 у нас появились новые возможности по отрисовке тенюшек под объектами. Приведу несколько примеров создания различных теней только средствами CSS Тень только с одной стороны объекта JS Bin on jsbin.com Изогнутая тень снизу JS Bin on jsbin.com Тень сверху и снизу JS Bin

Вертикальное позиционирование в верстке

Вертикальное позиционирование до сих пор остается непростым маневром для многих верстальщиков. А все потому что нет явного решения! Мы уже десятки лет запускаем космические корабли, а вертикальное позиционирование по-прежнему не имеет явного решения. Давайте посмотрим как можно это порешать разными способами. translate(-50%, -50%) Хорошо поддерживается брузерами (от IE9). Не очень грамостко JS Bin on jsbin.com

CSS библиотека спиннеров – анимации ожидания

Css-loaders – это библиотека спиннеров для анимации ожидания. Это может быть как загрузка данных, обработка запросов, да все что угодно. Картинки вообще не используются (ни гифки, ни svg), вся анимация на css3, соответственно не все браузеры поддерживаются: IE 10+ ✔ Chrome 4.0+ ✔ Firefox 16.0+ ✔ Opera 15.0+ ✔ Safari 4.0+ ✔ Однако, если ваш

Шпаргалка по CSS

Развернутая шпаргалка по различным стилям, псевдоклассам и функциям CSS. Очень подробно и глазу приятно. http://tympanus.net/codrops/css_reference/

Размытие в движении на CSS3 – Motion blur

Порой очень хочется использовать графические эффекты, вроде размытия движения, которого вроде бы нету в CSS3 фильтрах. Можно это дело сымитировать используя тени и анимацию движения. Например вот так: See the Pen Motion Blur by Artem Demo (@artemdemo) on CodePen.

Порядок псевдо классов

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