Последнее время все чаще можно встретить сайты с необычным дизайном и функциональностью, увидев которые, можно залипнуть на некоторое время. Увидев такие, у меня рука непроизвольно тянется к f12, чтобы открыть firebug и посмотреть, как же реализован тот или иной компонент. Таким образом можно открыть для себя интересные техники и в будущем реализовать их на своих проектах. Некоторые из них стали доступны с приходом новых технологий, например таких, как CSS 3 — то, что раньше было реализовано на флеше, теперь можно воплотить с помощью строк кода в таблице стилей. Дизайнеры тоже не теряют времени, создавая новые тренды и все плотнее взаимодействуя с верстальщиками. В этой статье я хотел бы показать 15 сайтов, которые так или иначе удивили и порадовали меня. Возможно, кого-то они вдохновят на собственный шедевр
Метка «css3» - 12
Креативные сайты с нестандартными элементами
2012-03-25 в 22:05, admin, рубрики: css3, веб-дизайн, параллакс, сайты, тренды, метки: css3, веб-дизайн, параллакс, сайты, трендыFlipboard-анимация средствами CSS3 и JavaScript
2012-03-22 в 16:58, admin, рубрики: animation, css3, flipboard, javascript, Веб-разработка, Песочница, метки: animation, css3, flipboard, javascriptДобрый день. Наверняка многие видели приложение для iOS под названием Flipboard. При всех его достоинствах, лично меня оно в первую очередь порадовало своими забавными анимациями перелистывания. Родилась идея реализовать нечто подобное для своего сайта исключительно на Javascript и CSS3.
В данном случае я использовал CSS3 свойство transform: rotate3d(...), которое требует поддержки аппаратного ускорения графики и адекватно работает только в Chrome 16+, поэтому все нужyые свойства я ограничил префиксами -webkit-. В продакшене для пользователей с неподходящим параметрами я заменял анимацию на более простую.
Вот так выглядит готовый результат:
Новое предложение в W3C/CSS — Flexible Flow Module
2012-03-21 в 5:35, admin, рубрики: css, css3, html, метки: css, css3Все кто профессионально работают с CSS знают что означенный инструмент достаточно беден на предмет layout management. Например в современном CSS (2.1 и 3) технически невозможно воспрозвести все возможности HTML таблиц.
В Java/AWT/Swing например с самого начала были заложены всяко разны Layout Managers. В CSS такого в чистом виде нет. Непорядок.
Собственно это и явилось причиной нашего предложения в W3C CSS WG.
Затухающие полоски на CSS3 без изображений
2012-03-18 в 20:45, admin, рубрики: css, css3, linear-gradient, веб-дизайн, метки: css3, linear-gradientХочу поделиться с вами моим способом создания затухающих полосок без использования изображений. Дальше под катом описан метод создания таких элементов с комментариями и примером.
Каскадные Таблицы Стилей / [Из песочницы] Секундомер на CSS3 без картинок, скриптов и SMS
2012-03-05 в 7:13, admin, рубрики: css3, CSS3 animation, без SMS, красота, метки: css3, CSS3 animation, без SMS, красота
Привет, читатель!
Я даже не знаю что хуже, что код для этого секундомера занимает ~ 1100 строк, или то что он работает только в половине браузеров.
Но если же тебе интересно как это работает, прошу под кат.
Вступление
Во-первых о браузерах. Работает этот код, из нынешних: в FireFox, Safari и Chrome. На подходе такие гиганты браузеры как IE10 и супер секретная новая Opera.
Во-вторых, хочу сразу отметить, что я буду описывать именно процесс анимации, а не рисования на CSS3. На будущее план как раз наоборот сделать очень красивыйЧитать полностью »
Веб-стандарты / В продолжение темы защиты котят
2012-02-16 в 3:53, admin, рубрики: css, css2.1, css3, css4, w3c, webkit, браузеры, версии, интриги, котята, модули, пиар, префиксы, расследования, скандалы, стандарты, статусы, утопия, метки: css, css2.1, css3, css4, w3c, webkit, браузеры, версии, интриги, котята, модули, пиар, префиксы, расследования, скандалы, стандарты, статусы, утопия
Итак, неподражаемая Лиа Виру с ее блистательным призывом не позволить браузерной отсебятине причинить вред беззащитным пушистым созданиям, была услышана и на Хабре (если кто-то пропустил — срочно ознакомьтесь c переводом lahmatiy чуть ниже или моим переводом на css-live.ru — не пропадать же труду). Мы уже наслышаны о панике последней недели из-за намерения браузеров поддерживать чужие префиксы. Кто-то, возможно, успел подписать петицию против этого безобразия (как я). Кто-то, напротив, прислушивается к доводам Тантека Челика (между прочим, создателя микроформатов) и других экспертов, убеждающих, что не так всё страшно и еще немного бардакаЧитать полностью »
Каскадные Таблицы Стилей / Поговорим про :checked
2012-02-12 в 5:07, admin, рубрики: css, css3, бред, метки: css, css3, бред
В последнее время сложилось ощущение, что много людей пишет про создание табов (вкладок) на CSS.
Сейчас я хочу рассказать про ещё один способ создания вкладок на CSS (Предупреждая выпады в свою сторону, упомяну, что без :target).
Но обо всём по порядку.
:checked или немного теории
Итак, в CSS3 (В модуле css3-selectors) появился новый псевдокласс :checked.
Вкратце, этот псевдокласс применяется к тем input'ам (checkbox или radiobutton), которые выставлены пользователем в состояние выбора (checked).
Табы, табы, табы
Довольно много реализаций табов было описано (Например, вот тут сделано через поле input type=«text»Читать полностью »
Блог компании Microsoft / CSS3. Работа с множественными фонами
2012-02-06 в 15:05, admin, рубрики: css3, multiple backgrounds, метки: css3, multiple backgrounds
Мы уже ранее затрагивали возможности модуля CSS3 Backgrounds and Borders, рассматривая работу с тенями (box-shadow). Сегодня мы немного поговорим о еще одной интересной возможности — использовании нескольких изображений в фоне.
Композиция фонов
Существует множество причин, по которым, вам вообще может потребоваться композиция нескольких изображений в фоне, среди них наиболее важные — это:экономия трафика на размере изображений, если отдельные изображения в сумме весят меньше, чем изображение со сведенными слоями, и
необходимость независимого поведения отдельных слоев, например, при реализацииЧитать полностью »
Веб-разработка / CSS3: жизнь без префиксов
2012-02-06 в 10:14, admin, рубрики: css3, less, sass, метки: css3, less, sass
Префиксы вещь хорошая. Они помогают производителям браузеров в реализации новых возможностей. Но жизнь разработчиков от них становится только сложнее. Префиксов много, иногда наблюдаются различия в синтаксисе.
Проблема очевидна. Нужен способ облегчить работу с префиксами.
Естественно, перестать использовать префиксы было бы неразумно. Но переложить обязанность по их генерации на существующие специально для этого инструменты вполне возможно. Я попробовал перечислить возможные варианты.
1. Препроцессоры
Суть препроцессоров в том, что автор файла стилей может использовать дополнительныеЧитать полностью »