22 Незаменимые CSS3 учебники и уроки

Создание динамической кнопки с CSS3
Создание кнопок с CSS стало гораздо проще и комфортнее. Этот пример показывает, как создавать красивые динамические кнопки, которые можно с легкостью масштабировать, используя новые CSS3 свойства border-radius, box-shadow и RGBa.

Глянцевая кнопка с помощью CSS
Единственное, что вы заметите, это большую кнопку Notify Me. У этой кнопки есть фишка – это не графика, а простой стиль CSS.

CSS3 кнопки без графики и дополнительной разметки
Эти кнопки отображаются в Firefox, Safari и Google Chrome. Стиль кнопки создается с использованием радиуса границы, теней и градиентной заливки. Опять никакой графики и дополнительной разметки. Можно даже сделать эффект освещения для кнопки.

Кнопки с CSS3 и RGBA
Одна из наших любимых возможностей CSS3 это добавление RGBA – цветового режима, который добавляет alpha-blending к вашим любимым свойствам CSS. Мы несколько раз использовали его в наших проектах и обнаружили, что это свойство помогает упорядочить код CSS и легко масштабировать такие элементы, как кнопки. Тут несколько примеров таких чудо-кнопок.

Симпотичные CSS3 кнопки
Здесь создается набор стилей для кнопок, которые не только кросс-браузерные, но и не особо теряют вид, если браузер не поддерживает CSS3. Такие кнопки легко масштабируются, а это значит, что их можно сделать любых размеров и цветов.

3D анимация на чистом CSS3

CSS3 генератор градиента

Сумасшедшие CSS переходы (transform)
Использование CSS3 transform – много интересных примеров.

Интересный CSS3 трюк
Эти накладки используют ряд новых свойств CSS. Некоторые из них простые и многим хорошо знакомы – border-radius и использование RGBa цветов. Трюк может быть виден не сразу. В общем, в обведенных квадратах меняется прозрачность содержимого. Эффект этот создается с помощью border-image свойства.

Создание веб-формы с заполнением полей, используя только CSS3
CSS3 трюки стали довольно популярными в последнее время и не случайно. Вот пример веб-формы, использующий CSS3. Тут требуется немного Javascript для всплывающих подсказок.

Новые CSS3 селекторы
В CSS2 нет способов выборочного назначения стилей, например, только четным строкам. В CSS3 такая возможность добавилась. Теперь можно выбирать четные или нечетные строки, или даже накладывать стиль на каждую 3, 4 и т.д. строку. Можно, конечно, сделать это на JavaScript или средствами PHP на сервере, но с помощью CSS3 это гораздо проще и удобнее.

Шикарное CSS3 tab menu
Создание очень красивого tab меню средствами CSS3.

CSS3 и гибкий пользовательский интерфейс
Создание “on/off” переключателя. Исследование, что можно сделать на CSS3 in Firefox 3.5. Примеры использования -moz-border-radius, -moz-border-color, @font-face и непрозрачных стилей.

Создание красивого диалогового окна на jQuery и CSS3
Немного об этом диалоговом окне: здесь используется CSS3 тень и CSS3 кнопка. Последние версии chrome, firefox и safari без проблем это воспроизводят, а в IE6 и 7 этот скрипт будет выдавать обычное диалоговое окно без теней и закругленных углов (в ie8 не проверяли).

Классный эффект на CSS и jQuery

Как создать стильную выезжающую панель с помощью jQuery и CSS3
Все больше и больше появляется сайтов с выезжающими панелями. И в большинстве своем они выглядят ничего так. Некоторые запихивают в такие панели форму контакта или логина, другие еще какую-нибудь информацию о себе или о сайте.

Просмотр фотографий в стиле полароид на CSS3 и jQuery
Комбинируя CSS3 тень блока и свойство поворота rotate, этот эффект достаточно легко создается. При перетаскивании появляется тень, а когда снимок кладется, то он рандомно поворачивается вправо или влево.

Красивый текстовый эффект с помощью фотошопа и CSS
Стильный текстовый эффект, который хорошо будет смотреться на своременном веб-сайте. Используется Photoshop и свойство тени CSS.

Редактируемая CSS3 галерея изображений
Довольно привычный шаблон галереи фотографий, в котором каждое фото увеличивается, если на него кликнуть. Используется CSS3, jQuery и что-то там еще. Напишите в комментах, если реализуете это на своем сайте.

AJAX tab menu на jQuery 1.4 и CSS3
Прекрасное меню для случая, когда контента много, а заставлять посетителя мучать scroll мышки не хочется.

Пузыри с сообщениями на чистом CSS
Все примеры используют простую семантику HTML. Никаких пустых элементов, никаких дополнительных ненужных элементов, никакого JavaScript, никаких картинок.



CSS3 закругленные углы
С CSS3 делать закругленные углы стало гораздо проще. Это уже поддерживается практически всеми браузерами, т.ч. можно использовать и не париться.