Хочу поделиться с вами опытом написания компонента выбора даты для текстового поля.
Результат работы можно посмотреть здесь: Air Datepicker.
Введение
Работая над последним проектом, возникла необходимость добавить в приложение календарь с возможностью выбрать конкретный месяц. Все популярные плагины такую возможность предоставляют, мой выбор остановился на Zebra Datepicker — маленький, функциональный, все здорово. Но некоторых вещей все же не хватало:
передача объектов Date() в параметры вместо строк
менее громоздкая разметка
гибкое позиционирование элемента
анимация при появлении Читать дальше...
Css Дизайнер (designer)
В CSS3 имеются параметры (свойства), посредством которых можно трансформировать (поворачивать, масштабировать и т.д.) элементы страницы, а также анимировать (плавно изменять во времени) их свойства. При этом можно обойтись без сценариев на JavaScript и SVG. В браузерах (Opera 18 и Chrome 31) в именах CSS-свойств пока требуется указывать специальные (вендорные) префиксы -o- и -webkit- соответственно (например, -o-transform и -webkit-transform).
CSS-трансформация
Трансформации в CSS3 задаются посредством свойства transform. Выберите в списках вид трансформации (значение свойства transform) и ее центр (значение свойства transform-origin) и посмотрите результат ее применения к элементу <div>, содержащему текст и картинку. Под списками отображаются CSS-свойства (без вендорных префиксов), соответствующее выбранной трансформации. Каждая трансформация здесь применяется к исходному элементу, а не к результату предыдущей трансформации. Читать дальше...
Css Дизайнер (designer)
Вот уже на протяжении четырёх лет, с сентября 2011 г. W3C занимается разработкой CSS4. Модули четвёртой версии каскадных таблиц стилей проектируются на базе CSS3 и дополняют их новыми свойствами и значениями. В этой статье я хотел бы рассказать о том, как использовать возможности CSS4 уже сегодня, о cssnext.
Итак, cssnext — это CSS компилятор, позволяющий использовать последний синтаксис CSS уже сегодня. Он преобразует новые CSS спецификации в более современный код так, что вам не придётся ждать поддержки новых возможностей в вашем браузере. Читать дальше...
Css Дизайнер (designer)
Эффект Glitch Лукаса Беббера выглядит очень круто — как будто вы смотрите на текст на старом мониторе, который слишком часто роняли на пол и у него «плавает» вертикальная синхронизация и сведение.
Реализация этого эффекта на CSS выглядит вполне убедительно. Мне пришлось немного поломать голову, чтобы выяснить, как он работает, и теперь я хочу объяснить это вам. Кроме того, я воспроизвёл этот эффект не только для текста, но и для растровых изображений и SVG, а так же написал несколько примесей Sass, чтобы облегчить работу с ним. Читать дальше...
Css Дизайнер (designer)
Клепал тут меню для сайта на 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)
Ранее