Метка «css3» - 12

Последнее время все чаще можно встретить сайты с необычным дизайном и функциональностью, увидев которые, можно залипнуть на некоторое время. Увидев такие, у меня рука непроизвольно тянется к f12, чтобы открыть firebug и посмотреть, как же реализован тот или иной компонент. Таким образом можно открыть для себя интересные техники и в будущем реализовать их на своих проектах. Некоторые из них стали доступны с приходом новых технологий, например таких, как CSS 3 — то, что раньше было реализовано на флеше, теперь можно воплотить с помощью строк кода в таблице стилей. Дизайнеры тоже не теряют времени, создавая новые тренды и все плотнее взаимодействуя с верстальщиками. В этой статье я хотел бы показать 15 сайтов, которые так или иначе удивили и порадовали меня. Возможно, кого-то они вдохновят на собственный шедевр

Креативные сайты с нестандартными элементами

Читать полностью »

Добрый день. Наверняка многие видели приложение для iOS под названием Flipboard. При всех его достоинствах, лично меня оно в первую очередь порадовало своими забавными анимациями перелистывания. Родилась идея реализовать нечто подобное для своего сайта исключительно на Javascript и CSS3.

В данном случае я использовал CSS3 свойство transform: rotate3d(...), которое требует поддержки аппаратного ускорения графики и адекватно работает только в Chrome 16+, поэтому все нужyые свойства я ограничил префиксами -webkit-. В продакшене для пользователей с неподходящим параметрами я заменял анимацию на более простую.

Вот так выглядит готовый результат:

Живое демо

Читать полностью »

Все кто профессионально работают с CSS знают что означенный инструмент достаточно беден на предмет layout management. Например в современном CSS (2.1 и 3) технически невозможно воспрозвести все возможности HTML таблиц.

В Java/AWT/Swing например с самого начала были заложены всяко разны Layout Managers. В CSS такого в чистом виде нет. Непорядок.

Собственно это и явилось причиной нашего предложения в W3C CSS WG.

Читать полностью »

Под катом находится сравнительно небольшая подборка СSS3 и СSS3+JQuery меню. Некоторые из них уже могли встретится пользователям на просторах Интернета, некоторые-нет. Весь обзор представлен в виде скриншотов и демо-ссылок, а также ссылок на закачку сырцов, там, где это возможно.
Читать полностью »

Хочу поделиться с вами моим способом создания затухающих полосок без использования изображений. Дальше под катом описан метод создания таких элементов с комментариями и примером.

Затухающие полоски на CSS3 без изображений
Читать полностью »

CSS3 timer
Привет, читатель!
Я даже не знаю что хуже, что код для этого секундомера занимает ~ 1100 строк, или то что он работает только в половине браузеров.
Но если же тебе интересно как это работает, прошу под кат.

Вступление

Во-первых о браузерах. Работает этот код, из нынешних: в FireFox, Safari и Chrome. На подходе такие гиганты браузеры как IE10 и супер секретная новая Opera.
Во-вторых, хочу сразу отметить, что я буду описывать именно процесс анимации, а не рисования на CSS3. На будущее план как раз наоборот сделать очень красивыйЧитать полностью »

Веб-стандарты / В продолжение темы защиты котят
Итак, неподражаемая Лиа Виру с ее блистательным призывом не позволить браузерной отсебятине причинить вред беззащитным пушистым созданиям, была услышана и на Хабре (если кто-то пропустил — срочно ознакомьтесь c переводом lahmatiy чуть ниже или моим переводом на css-live.ru — не пропадать же труду). Мы уже наслышаны о панике последней недели из-за намерения браузеров поддерживать чужие префиксы. Кто-то, возможно, успел подписать петицию против этого безобразия (как я). Кто-то, напротив, прислушивается к доводам Тантека Челика (между прочим, создателя микроформатов) и других экспертов, убеждающих, что не так всё страшно и еще немного бардакаЧитать полностью »

Каскадные Таблицы Стилей / Поговорим про :checked
В последнее время сложилось ощущение, что много людей пишет про создание табов (вкладок) на CSS.
Сейчас я хочу рассказать про ещё один способ создания вкладок на CSS (Предупреждая выпады в свою сторону, упомяну, что без :target).
Но обо всём по порядку.
:checked или немного теории

Итак, в CSS3 (В модуле css3-selectors) появился новый псевдокласс :checked.
Вкратце, этот псевдокласс применяется к тем input'ам (checkbox или radiobutton), которые выставлены пользователем в состояние выбора (checked).
Табы, табы, табы

Довольно много реализаций табов было описано (Например, вот тут сделано через поле input type=«text»Читать полностью »

Блог компании Microsoft / CSS3. Работа с множественными фонами
Мы уже ранее затрагивали возможности модуля CSS3 Backgrounds and Borders, рассматривая работу с тенями (box-shadow). Сегодня мы немного поговорим о еще одной интересной возможности — использовании нескольких изображений в фоне.
Композиция фонов

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

необходимость независимого поведения отдельных слоев, например, при реализацииЧитать полностью »

Веб-разработка / CSS3: жизнь без префиксов
Префиксы вещь хорошая. Они помогают производителям браузеров в реализации новых возможностей. Но жизнь разработчиков от них становится только сложнее. Префиксов много, иногда наблюдаются различия в синтаксисе.
Проблема очевидна. Нужен способ облегчить работу с префиксами.
Естественно, перестать использовать префиксы было бы неразумно. Но переложить обязанность по их генерации на существующие специально для этого инструменты вполне возможно. Я попробовал перечислить возможные варианты.
1. Препроцессоры

Суть препроцессоров в том, что автор файла стилей может использовать дополнительныеЧитать полностью »


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js