Air Datepicker, легкий и красивый выбор даты

Хочу поделиться с вами опытом написания компонента выбора даты для текстового поля.

Air Datepicker, легкий и красивый выбор даты

Результат работы можно посмотреть здесь: Air Datepicker.

Введение

Работая над последним проектом, возникла необходимость добавить в приложение календарь с возможностью выбрать конкретный месяц. Все популярные плагины такую возможность предоставляют, мой выбор остановился на Zebra Datepicker — маленький, функциональный, все здорово. Но некоторых вещей все же не хватало:

передача объектов Date() в параметры вместо строк
менее громоздкая разметка
гибкое позиционирование элемента
анимация при появлении Читать дальше...

Css Дизайнер (designer)

CSS-трансформация и анимация

В CSS3 имеются параметры (свойства), посредством которых можно трансформировать (поворачивать, масштабировать и т.д.) элементы страницы, а также анимировать (плавно изменять во времени) их свойства. При этом можно обойтись без сценариев на JavaScript и SVG. В браузерах (Opera 18 и Chrome 31) в именах CSS-свойств пока требуется указывать специальные (вендорные) префиксы -o- и -webkit- соответственно (например, -o-transform и -webkit-transform).

CSS-трансформация
Трансформации в CSS3 задаются посредством свойства transform. Выберите в списках вид трансформации (значение свойства transform) и ее центр (значение свойства transform-origin) и посмотрите результат ее применения к элементу <div>, содержащему текст и картинку. Под списками отображаются CSS-свойства (без вендорных префиксов), соответствующее выбранной трансформации. Каждая трансформация здесь применяется к исходному элементу, а не к результату предыдущей трансформации. Читать дальше...

Css Дизайнер (designer)

Возможности CSS4 уже сегодня с cssnext

Вот уже на протяжении четырёх лет, с сентября 2011 г. W3C занимается разработкой CSS4. Модули четвёртой версии каскадных таблиц стилей проектируются на базе CSS3 и дополняют их новыми свойствами и значениями. В этой статье я хотел бы рассказать о том, как использовать возможности CSS4 уже сегодня, о cssnext.

Итак, cssnext — это CSS компилятор, позволяющий использовать последний синтаксис CSS уже сегодня. Он преобразует новые CSS спецификации в более современный код так, что вам не придётся ждать поддержки новых возможностей в вашем браузере. Читать дальше...

Css Дизайнер (designer)

GLITCH: Эффект неисправного монитора для текста, картинок и SVG

GLITCH: Эффект неисправного монитора для текста, картинок и SVG

Эффект Glitch Лукаса Беббера выглядит очень круто — как будто вы смотрите на текст на старом мониторе, который слишком часто роняли на пол и у него «плавает» вертикальная синхронизация и сведение.

Реализация этого эффекта на CSS выглядит вполне убедительно. Мне пришлось немного поломать голову, чтобы выяснить, как он работает, и теперь я хочу объяснить это вам. Кроме того, я воспроизвёл этот эффект не только для текста, но и для растровых изображений и SVG, а так же написал несколько примесей Sass, чтобы облегчить работу с ним. Читать дальше...

Css Дизайнер (designer)

CSS:hover для любого элемента в IE6 и ниже

Клепал тут меню для сайта на CSS. но т.к. в нем применяется псевдо-класс :hover, то нарисовалась маленькая проблема. дело в том, что в IE6 и ниже :hover поддерживается только для ссылок, но совершенно не работают с любыми другими элементами. А мне для меню необходимо было, чтоб :hover работал с рисунками.
Для себя я решил это нижеприведенным способом, может, кому пригодится также.

Существует так называемый whatever:hover способ, который дает возможность применять селектор :hover в IE6 и ниже. последняя версия 1.00.031224. примеры работы можно посмотреть там же, по ссылке выше. Читать дальше...

Css Дизайнер (designer)

Каскадные таблицы стилей (преимущества и недостатки)

Точное расположение объектов на странице относительно друг друга является, пожалуй, одной из самых сложных задач для веб-мастера. Написать HTML-код страницы так, чтобы все графические изображения и текстовые блоки были на своих местах не только на компьютере веб-мастера, но и у всех посетителей сайта, - настоящее искусство. Максимально крупный кегль, выставленный пользователем в своем браузере, может великолепное творение превратить в беспорядочное нагромождение теста и картинок. Читать дальше...

Css Дизайнер (designer)

Простой тултип или всплывающая подсказка

Довольно часто применяю этот простой прием, но еще о нем не рассказывал. Суть - при наведении мыши на определнный текст появляется краткое пояснение или расширенная информация рядом с текстом. Вот пример (и пример для оперы - оговорка одна - тултипы не должны перекрывать другие “тултипные” ссылки). Читать дальше...

Css Дизайнер (designer)

Анимационное подчеркивание

На самом деле задать в параметрах именно анимационное подчеркивание не представляется возможным, зато в качестве фона ссылки вполне можно задать анимационную картинку:
Читать дальше...

Css Дизайнер (designer)

Кроссбраузерное выравнивание по центру

Время от времени меня спрашивают, как заставить работать следующий код в Opera 7.0, а также в Internet Explorer 6 и Mozilla, когда страница в режиме Standards compliance mode:
Читать дальше...

Css Дизайнер (designer)

Изменение фона в таблице

С помощью стилей можно творить даже такие чудеса, как изменение цвета фона таблицы. Для этого необходимо написать небольшой обработчик соответствующего события, например, попадание курсора мышки в область таблицы: Читать дальше...

Css Дизайнер (designer)

Ранее


Рекламка в тему

Рубрики

Архив по месяцам

Друзья

Мета