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

CSS трюки и секреты

Каскадный таблицы стилей обладают огромным функционалом и скрывают много интересных особенностей, а порой и подводных камней. За время работы у меня накопилось (и продолжает накапливаться) библиотека связанных с CSS трюков и секретов. Что-то забывается, что-то кажется сегодня ненужным, но может пригодится в будущем. Поэтому самое правильное, это записывать и делиться и самому проще потом найти и кому-то еще может оказаться полезно.

Скорость выборки css селекторов

Разные селекторы по-разному обрабатываются браузером (капитан очевидность). Как следствие одни работают быстрее чем другие. Имеет смысл внимательно подходить к работе с селекторами с самого начала, потому что когда уже нужно решать проблему с перформансом написано столько кода, что мама не горюй. Разные селекторы по скорости работы. Чем ниже, тем хуже. ID, например Класс, например

Коллеция веб демок – анимация, скрипты

Очень приятная коллеция примеров визуальных веб решений – анимация, скрипты. Аж больше 300 штук, собранных отовсюду в сети. Автор конечно проделал большую работу, разумеется большая часть этих примеров так и останется на полках фронтендеров, но для вдохнавления все равно стоит посмотреть 😉 Ссылки по теме: https://github.com/airen/DemoHouse https://airen.github.io/DemoHouse/ Update По какой-то причине автор удалили этот репозиторий,

Меняем в path атрибут “d” через css

Если кто не в курсе, то в SVG для описания некоей кривой используется строка, которая добавляется через атрибут “d”. Если нужно было его поменять то делали это при помощи JS. Оказывается, что уже можно и через CSS. Правде вопрос с поддержкой остается открытым 🙄 А теперь поясним коротеньким видео: sooooo this is new! 😳 pic.twitter.com/vjQneEno6h

Ограничиваем ширину элемента количеством символов

Ширину элемента можно выставлять не только стандартными размерами в пикселях или в процентах, но и в ширине символов шрифта. В некоторых случаях это может быть очень удобно. Однако, тут есть одно “но” (как же без этого, верно?) – это не работает с любым шрифтом. Точнее даже не так – это будет работать только с моношрифтами.

Новый 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