Руководство для начинающих по CSS3
С момента анонса в 2005 году многие дизайнеры и разработчики внимательно следили за разработкой 3-го уровня каскадной таблицы стилей или более известной как CSS3. Все мы рады получить новые возможности CSS3 - тени текста, границы с изображениями, непрозрачность, несколько фонов и т. Д., И это лишь некоторые из них..
На сегодняшний день не все селекторы CSS3 полностью поддерживаются. Но это не значит, что мы не можем повеселиться, тестируя новые CSS3. Этот пост посвящен всем дизайнерам и разработчикам, которые уже знакомы с CSS 2.1 и хотят испачкать руки на CSS3.0..
Это сборник полезных чтений CSS3, примеры кодов, советы, учебные пособия, шпаргалки и многое другое. Не стесняйтесь использовать их в своих проектах, просто убедитесь, что они изящно ложатся на несовместимые браузеры.
Начало работы с CSS3
Введение в CSS3
(Дорожная карта) официальное введение в CSS и CSS3. Этот документ дает вам общее представление о разработке CSS3.
CSS3: поднять дизайн на новый уровень
Преимущества CSS3 с пояснениями и примерами свойств и селекторов CSS3.
Несколько трюков с CSS3
Webmonkey предлагает вам несколько основных приемов в CSS3, в том числе скругленные границы, границы, тени и трюки с изображениями..
Интервью: шесть вопросов с Эриком Мейером о CSS3
Люди в Six Revision взяли интервью у Эрика Мейера с ценными знаниями и ответами по CSS3.
CSS3: прогрессивное улучшение
Как вы можете использовать изящные (или прогрессивные) методы улучшения, чтобы использовать функции CSS3 в браузерах, которые их поддерживают, при этом гарантируя, что ваш код будет по-прежнему обеспечивать удовлетворительное взаимодействие с пользователем в старых браузерах, которые еще не поддерживают эти функции.
CSS3: фон и границы
Закругленные границы (Граница радиуса)
Руководство по созданию скругленной границы с помощью CSS3 граница радиуса имущество.
Скругленные границы с изображением (граница-изображения)
Как использовать изображения в границах с границы изображения имущество.
CSS3 границы, фоны и рамки
Подробное объяснение с примерами новых свойств CSS3, таких как: фон-клип, фон-происхождения, фон-вложение, коробчатого тень, коробка-украшение-брейк, граница радиуса а также границы изображения.
CSS3: текст
Эффект высокой печати
Создайте простой эффект высокой печати с помощью CSS3.
Шесть текстовых эффектов с использованием тени текста
Текстовые эффекты включают в себя: винтаж / ретро, неон, вставка, анаглифическая, пожарная и настольная игра.
Красивая типография
Как взять базовую разметку и превратить ее в привлекательный и красивый типографский дизайн с помощью чистого CSS3.
Поворот текста
Использует спрайт изображения и немного CSS для правильного позиционирования.
Наброски текста
Как добавить контур или обводку к вашему тексту, используя CSS3 текст-тактный имущество.
Эффект маскировки текста
Интерактивный эффект маскировки текста с использованием текст-тень Свойство CSS.
Смещение ссылок (анимация) с помощью CSS3
Дитч Javascript и создать эффект подталкивания полностью с CSS3.
CSS Selection Styling
Изменить стиль выделения текста с помощью CSS3.
CSS3: Меню
Контент из нескольких столбцов
Использование CSS3 для создания набора столбцов на вашем сайте без необходимости назначать отдельные слои и (или) абзацы для каждого столбца.
Сексуальные подсказки с просто CSS
Как использовать развивающийся стандарт CSS может улучшить некоторые кросс-браузерные всплывающие подсказки.
Больше подсказок:
- Чистая подсказка CSS3
- Подсказки с CSS3.
Выпадающее меню
Как создать многоуровневое раскрывающееся меню Apple.com с помощью граница радиуса, коробчатого тень, а также текст-тень.
CSS3-Only Tabbed Area
Нажмите на вкладку, скройте все панели, покажите панель, соответствующую только что нажатой вкладке - все с CSS.
3D ленты с CSS3
Создавайте красивые 3D ленты только с CSS3.
CSS3: тень
Тень в изображении
Продемонстрируйте несколько приемов и некоторые возможные варианты появления теней без использования изображений..
Светящиеся вкладки с коробчатой тенью
Как создать интуитивно понятные и красивые вкладки в CSS3 без изображения.
CSS3: кнопки
Учебник: красивые кнопки
Как создать красивые кросс-браузерные CSS3-кнопки, которые изящно деградируют.
Речевые пузыри
Различные формы эффекта речевого пузыря, созданные с помощью CSS 2.1 и улучшенные с помощью CSS3.
Github как кнопки
Коллекция кнопок, которые показывают, что возможно с помощью CSS3, и в то же время поддерживают простейшую возможную разметку.
Вращающиеся, исчезающие иконки с CSS3 и MooTools
Как использовать CSS3 и MooTools для создания динамических вращающихся элементов.
Наложение изображения
Практическое применение свойства CSS3 border-image.
Больше
- CSS3 + Mootools. Пример экспериментов в mootools. Это добавляет свойства CSS3 в основную структуру фрейма MooTools.
- Взрыв логотипа с помощью CSS3 и MooTools или jQuery. Возьмите статическое изображение и сделайте его анимированным, взрывным эффектом при наведении мыши.
- Сила HTML 5 и CSS 3. HTML 5 и CSS 3 быстро набирают популярность. Perishable Press здесь, чтобы объяснить, как и почему.
- Вращающиеся лучи с CSS3-анимацией и примером JavaScript. Простой и тонкий эффект вращения луча на задней части изображения.
- CSS3 Polaroid Фотогалерея. Как создать классную стопку фотографий Polaroid с использованием стиля CSS.
- HTML 5 и CSS 3: методы, которые вы скоро будете использовать. Пошаговое руководство по созданию блога с нуля с использованием HTML5 и CSS3.
Шпаргалки и рекомендации
CSS3 шпаргалка (PDF)
Печатная шпаргалка с полным списком всех свойств, типов селекторов и разрешением значений в текущей спецификации CSS3 от W3C.
Поддержка CSS в Opera 9.5
Полный список поддерживаемых селекторов CSS в Opera 0.5.
Доступны шрифты для встраивания @ font-face
Полный список шрифтов, лицензированных в настоящее время для @ Шрифт-лицо вложения.
Селекторы CSS 3 - Объяснено
Руководство и ссылка на селекторы CSS3 и его шаблоны.
Кросс-браузерный генератор правил CSS3
Правила CSS3, которые вы можете скопировать и вставить в свою собственную таблицу стилей.
CSS3 График кликов
Получите CSS3-стили, такие как размер рамки, радиус границы, тень текста и многое другое в один клик.
CSS контент и браузер совместимость
Полный список таблиц селектора CSS и CSS3 с объявлением для проверки совместимости браузера.
