Мы публикуем статьи о CSS3 то время как сейчас, и мы продолжаем получать сердитесь электронной почте от некоторых разработчиков, которые жалуются, что doesn’ T имеет смысл использовать CSS3 сегодня.
Да, Internet Explorer doesn’ T поддерживает большинство свойств CSS3.И да, префиксы CSS3 поставщика плохо для ремонтопригодность (и именно поэтому мы рекомендуем извлечения префиксы в отдельном файле CSS3)
Но it’ с ОК, чтобы подтвердить, что Интернет представляет собой динамическую среду, и it’ с ОК, чтобы создать богатый, интерактивный, красивый дизайн для тех, кто уже использует современный браузер или будете использовать одно в ближайшее время.Это просто doesn’ T смысла держать оглядываясь назад, beiDang боялся взглянуть вперед и, следовательно, избежать экспериментировать и узнавать о новых свойств CSS3 сегодня.И именно поэтому мы продолжаем публикацию статей о CSS3.
В этой статье мы представляем обширной облавы на CSS3 методы, инструменты и resources, которые помогут вам узнать, как использовать CSS3 в своих проектах сразу.Мы сгруппировали наиболее полезные статьи соответствующие свойства, описанные какие браузеры поддерживают то, что свойства, представлены альтернативные наличие подходов и обходные пути для Internet Explorer и добавил пару ссылок на полезные CSS3 генераторы и инструментов в конце post.
Вы можете быть заинтересованы в следующих статей:
- 50 Brilliant CSS3/JavaScript кодирования Techniques
В этой статье мы приводим 50 полезных и мощных CSS3/jQuery-techniques, что может сильно улучшить пользовательский опыт, улучшить рабочий процесс дизайнера и заменить старые грязные обходные пути, которые мы использовали в Internet Explorer 6& Co. - Take Your Design To The Next Level с CSS3
В данной статье рассматриваются важные того, что вы должны знать о CSS3 с примерами и полезными links. - CSS3 решения для интернет Explorer
В данной статье показано количество вариантов, которые разработчики могут рассмотреть для тех случаев, когда поддержка функций CSS3 является обязательным для всех версий Internet Explorer (IE6, IE7, & IE8 —все из которых в настоящее время еще в значительной использования)
What’? Ей можно с CSS3
Let’ начнем с обзора некоторых действительно замечательных методов проектирования и экспериментов, которые показывают, что можно сделать с немного кодирования, терпения и творчества с помощью простого CSS3 properties.
Чистая CSS3 Page Flip Effect
С помощью CSS3 градиенты, переходы, 2D преобразований и отсечения, римские Кортеса достигли этого чистого CSS3 страницы листатьэффект (не используется JavaScript).Тем не менее, он работает в браузерах Webkit только (Safari и Chrome)
Создать Vibrant Digital Design Плакат с CSS3
CSS прошла долгий путь за последние годы, и с новыми браузер поддержки для рук полный свойств CSS3 мы можем начать копировать дизайн стили непосредственно в браузере, который заранееНедавно были возможны только в наших приложениях дизайна.Следите этого пошагового руководства о заключении Circlicious, яркие и абстрактного цифрового дизайна сайт сделан исключительно из HTML и CSS.
CSS3 Leopard стиль Stacks
Чистая CSS3 (и экспериментальных CSS).Нет JavaScript.Эксперимент Гордон Brander.
Злой CSS3 3D Bar Chart
попыткой создать 3D-графике бар с помощью CSS3.Этот пример работает только в последних версиях Firefox, Chrome, Safari и Opera.
Новости Выбор цвета с переходной экономикой (CSS3)
CSS3 цветовой переход применяться к выбору текста с CSS3.Работает только в Safari и Google Chrome.
Наша Солнечная система в CSS3
Это попытка воссоздать нашу солнечную систему, используя CSS3 функций, таких как границы радиуса, транс-формы и анимации.Результат удивителен и вполне interesting.
Fun With CSS Gradients
Это похожие дисплей, что и iPhone в альбоме используется радиальный градиент (в отличие от линейных) в качестве фона для названий треков.Общий эффект заключается в тусклом свете.Нечетные треки также использовать градиент, чтобы воспользоваться-WebKit-градиент поддержку в альфа values.
CSS3 Bookshelf
Очень интересная идея, которая doesn’ T выглядит очень хорошо, потому вращения рендеринга, но стоит экспериментировать nevertheless.
Чистый CSS Twitter нормально Whale
Кривые выполнены с использованием различных неравномерно границе радиуса свойства, чужим углам (например, строк) маскируется использованием контейнеров с переполнения: скрытый; установлен на them.
CSS мира Clocks
Еще один интересный эксперимент, который использует CSS3 и немного PHP для создания интерактивных clock.
3D Text Tower
Что произойдет, если вы лежали пару текстовых тени снова и снова?Интересные наведении-effect.
Создание реалистичной кнопки с CSS3
“ Я ранее созданных Cadmus “ post” кнопки в Photoshop, и это было по существу три изображения для различных состояний.Я хотел использовать этот стиль для всех наших кнопок, но делает это с одного изображения не является хорошей идеей.Таким образом, я приступил к созданию тот же стиль кнопки с CSS3.”
CSS3 Spotlight
Включите свет!Работает с Webkit & Firefox.
Чистая CSS3 анимированные AT-AT Walker из Звездных Войн
В этой статье вы, кк проходных процесс создания CSS3 анимации AT-AT Walker из Империя наносит ответный удар.Автор начинает с рассмотрения некоторых свойств CSS3, которые сделали это возможным анимации.Затем он следует составить список из разделов требуется построить AT-AT и CSS3 код для перемещения каждого section.
Чистый CSS Icons
эксперимент Zander Мартино.с большим шариком границы радиуса, Zander созданы различные ‘ common’ значки, которые можно было бы использовать в веб-apps.
Создать Содержимое Slider Использование Pure CSS
Идея заключалась в том, чтобы создать рабочую например, без помощи JavaScript, с помощью слоев в CSS и использованием CSS3 переходы, чтобы дать слайдер необходимые animation.
Sexy подсказки с Только CSS
В то время как многие инновационные решения существуют использованием CSS и JavaScript (с и без JavaScript рамки, как JQuery), it’ S иногда полезно смотреть в сторону новых технологий, чтобы изучить влияние они могут оказать на нашусовременные методы.Этот урок посвящен тому, как развивается помощью CSS стандартные может улучшить некоторые прекрасные кросс-браузерный tooltips.
Создание Polaroid просмотра фотографий с помощью CSS3 и jQuery
Этот пример с использованием CSS3 и JQuery, просто чтобы показать эффект при объединении двух мощных методов.CSS3 впрыскивается JQuery, сохранив файл CSS clean.
Анимированные выбора Photoshop использованием CSS3
Когда часть изображения, выбранного в Photoshop, области выделен анимированный пунктирной линией.Мэтью Джеймс Тейлор придумал способ, чтобы получить точно такой же эффект, используя CSS3.
Sexy изображение Hover эффекты с помощью CSS3
Это сообщение показывает, как создать сексуальный эффект CSS на изображение hover.
CSS3 Выпадающий Menu
многоуровневого выпадающего меню, который был создан с помощью border-radius box-shadow, и text-shadow.Это делает совершенным на Firefox, Safari и Chrome.В выпадающем также работает на не-CSS3 совместимых браузеров, таких как IE7, но закругленные углы и тени не будет rendered.
Ближний ссылки Box
То, что мы имеем здесь дело несколько ящиков содержание.Цель состоит в том, что при наведении указателя мыши на них, они темнеют и появляется ссылка в точном центре them.
Контекстная Советы выдвижной с JQuery & CSS3
В настоящее время you’ наверное, слышали о Adobe’ Новый программный пакет CS5.Кроме того, you’ ве, наверное, видели своих страницах продукт, где они представляютновых возможностей пакета.Помимо великолепного дизайна, they’ ве также реализована интересная решение для демонстрации новых возможностей их продукция способна — с помощью контекстной выдвижной tips.
Красивый стиль пользовательского интерфейса с помощью CSS3 текст-тень, коробка-тень, и граница радиуса
Эта статья берет вещи дальше, показывающий, как использовать свойства для создания красивых элементов пользовательского интерфейса, без использования любых изображений, JavaScript, или Flash.Эта последняя линия подчеркивает истинную красоту CSS3 — многие его функции предназначены для экономии времени провел в противном случае создание и обновление графики в Photoshop.Это делает такие методы, как тени и анимированные элементы пользовательского интерфейса доступна для веб-разработчиков и дизайнеров без СМАРТС сценариев или сумасшедший Photoshop skills.
Обучение CSS3 Properties
Данный раздел предоставляет вам общее представление о вступительной статьи о CSS3.Это хорошая отправная точка, чтобы узнать, что CSS3 есть, какие свойства имеет и то, как дизайнеры применяют их на веб-designs.
Основы CSS3
Вот пост по основам новых свойства: текст-тень, коробка-тень, и границы радиуса.Эти свойства CSS3, как правило, используются для улучшения планировки и хорошо know.
Введение в CSS3
большую серию статей Дэвида Appleyard которая охватывает большинство новых возможностей CSS3, включая границы, текстовые эффекты, особенности пользовательского интерфейса, несколько столбцов и фонов.Серия также содержит много примеров и фрагментов кода.Очень useful.
CSS3 примеры и лучшие Practices
тенденция CSS3становится все более и более популярным.На самом деле CSS3 новых возможностей открыть для себя массу новых возможностей.Проверьте мой предыдущий пост о “ CSS3 анимации Demos” чтобы увидеть вещи, которые вы можете делать с ним.Тем не менее, don’ т получить слишком взволнован, так скоро, потому что она не полностью поддерживается всеми браузерами пока нет.Но это doesn’ означает, что вы shouldn’ т использовать его на всех.Итак, когда вы должны использовать CSS3 новые возможности?Ну, продолжать на эту должность, чтобы увидеть некоторые отличные examples.
CSS будущего: как CSS3 можно оптимизировать дизайн
дизайн блогосфера была гудит об улучшениях 3-го уровня каскадных таблиц стилей принесет.Хотя все еще пути прочь от официального статуса рекомендацию W3C, некоторые браузеры уже поддерживают в ожидании возможности.Я хочу, чтобы выделить несколько функций CSS3 I’ м рад, что не только добавят гибкости в процессе проектирования, но это будет помочь с поиском и преобразования оптимизации, как well.
практического применения CSS3
пользователь не собирается тянуть свой сайт в двух разных браузеров для сравнения опыта, поэтому они won’ даже не знают, что они пропали без вести.Просто потому, что что-то поддерживается не полностью, это не значит, что мы can’ т использовать его до такой степени.В этой статье I’ покажу вам некоторые практические применения для CSS3.
Вы можете использовать CSS3 прямо сейчас
CSS3 делает designer’ работа легче, потому что they’ Re возможность тратить меньше времени на взлом своих CSS и HTML кода для работы в IE и больше времени разработке их дизайна.Это будущее веб-дизайн и могут быть использованы сегодня.В этой статье мы надеемся показать вам заботиться немного меньше о том, чтобы все пикселя в IE.Это будет вдохновлять вас проводить больше времени делает ваши проекты изысканных в остальных браузерах, находясь на службе до рабочего и совершенно доступный веб-сайт для IE.
CSS3 прогрессивного улучшения = Smart Design
Прогрессивное улучшение является хорошей вещью, и CSS3 еще лучше.В совокупности онипозволяют дизайнерам создавать легкие, чистые сайты быстрее и проще, чем когда-либо before.
CSS3 Selectors
Расширенный селекторы CSS в CSS3 сделать это намного проще для разработчиков, чтобы применить стиль к конкретным элементам конструкции без использования ненужных классов CSS или < div>-контейнеров.К сожалению, Internet Explorer будет поддерживать большинство CSS3 селекторы только в IE 9 ( подробным поддержки table), поэтому мы должны использовать JavaScript-решения для старых версий.Поддержка Firefox 3.5, Safari 3.2 и многие селекторы поддерживаются Chrome и Opera, тоже (используйте ссылку выше)
Укрощение Advanced CSS Selectors
лучший способ избежать этих язв распространение в разметке и держать его в чистоте и семантическая, заключается в использовании более сложных CSS селекторов, те, которые могут ориентироваться на конкретные элементы без необходимости класса илиID, и, делая это сохранить наш код и наши стили flexible.
Тощий на атрибутов CSS Selectors
Каждый элемент CSS имеет три атрибута: ID, класс и отн.Для выбора элемента в CSS, вы можете использовать и ID селектора (# первое название) или селектор класса (. Магического).Но знаете ли вы, вы можете выбрать его на основе этого атрибута отн, а?Это то, что известно как атрибут selector.
Познакомьтесь с псевдо-класс Selectors
Псевдо-селекторы класса являются очень полезными в различных ситуациях.Некоторые из них являются CSS3, некоторые CSS2 … это зависит от каждого конкретного один.Вне IE, они имеют большую поддержку браузера.В землю IE, даже IE8, поддержка довольно бесплодной.Тем не менее, версию IE9 имеет полную поддержку от них.
Посмотрите на некоторые из новых селекторов Введенный в CSS3
очень практично статью, представляя конкретные примеры и фрагменты кода для использования CSS3 в вашей конструкции (например, альтернативный стиль строки, определенный стиль строки, первый и последний стиль элементаа также укладка включается и выключается поля ввода)
селекторы CSS3 браузер Support
Ниже приводится ряд тестов CSS из наиболее распространенных browsers’ поддержку селекторов и псевдо-селекторы.Тесты включает в себя основные вещи из хорошихстарые времена CSS1 и фанки вещи из будущего (CSS3)
JavaScript Solutions
IE-CSS3.js: CSS3 псевдо-селектора класса эмуляции для IE
Эта библиотека позволяет Internet Explorer для определения CSS3 псевдо-селекторов класса и сделать любой стиль правилам, определенным с them.
Sizzle — наличие выбора Library
чистого JavaScript CSS селектора двигатель, который поддерживает все CSS3 селекторы, включая дополнительные, такие как избежать выбора поддержки (# ID \: значение),: содержит (текст), имеет селектор (:есть (DIV)), положение селектора (: во-первых,: в прошлом,: даже: странно,: GT,: л,: экв), форма селекторы и селекторы заголовка.Инструментов также предоставляет значимые сообщения об ошибках синтаксиса problems.
Sly — наличие выбора Engine
быстрая, кросс-браузерный JavaScript класс для запроса DOM документов с помощью CSS3 селекторы.Это позволяет настраиваемый псевдо-классов, атрибутов операторов и комбинаторы и содержит дополнительные оптимизации для часто используемых селекторов и последней версии браузера features.
Offspring.js
Offspring это библиотека JavaScript, которая применяется CSS классы, соответствующие некоторые продвинутые селекторы CSS, открывая двери для более точного селекторы в ранее неспособными браузеров.Легкие библиотека, которая в режиме полной поддерживает только first-child, last-child, only-child, nth-child-odd, nth-child-even, и nth-child-##.
YUI Selector Utility
YUI CSS3 Selector Утилита, обеспечивая компактное сокращение для сбора, фильтрации и тестирования HTMLElements.
Получение Багги Селекторы CSS для работы кросс-браузер через jQuery
простую таблицу, которая описывает количество селекторы CSS, которые не являются кросс-браузерная совместимость, наряду с JQuery синтаксис для each.
CSS3 границ и Backgrounds
CSS3′ S border-radius, безусловно, находка для разработчиков.Реализация закругленные углы с 4 изображения фиксированного размера, используя их с CSS собственности фоновое изображение и добавив пару ненужных div‘ Просто, чтобы заставить все это работать звучит как кошмар, да и вообще это был кошмар.CSS3 позволяет использовать стандартные свойства CSS для достижения того же эффекта.Кроме того, мы можем использовать некоторые классные расширенными возможностями фон, чтобы добавить границы изображения или нескольких фонов для наших проектов.Расширенные границы и фона функций не работает в IE, поэтому мы должны обходные пути again.
Ode To границ radius
границ радиуса возлюбленной веб-дизайнера и (к сожалению), тот, что IE8 забыл, уничтожив многие мечты веб-дизайнера.Это сообщение объясняет, как она работает, что некоторые из кросс-браузерный альтернативы, и демонстрирует некоторые сайты, которые сделал шаг вперед и реализованы it.
CSS3 границы, фон и окна-shadows
Это общая статья демонстрирует примеры сделаны с использованием новых свойств в W3C’ S CSS3 фон и рамки спецификации.Это объясняет свойства фон-клип, фон происхождения, границы радиуса, несколько фоновых изображений, фон привязанности, коробка-тень и границы image.
CSS3 границы image
CSS3 проект представляет один, который может быть очень мощным: границы изображения.Эта статья объясняет, что он может сделать сегодня, как вы можете использовать его и как заставить его работать в Internet Explorer 7 (наличие библиотеки)
Несколько стола и CSS Gradients
Среди дизайнеров CSS, есть те, кто рискуют вперед с CSS3 и, вероятно, столкнуться с миром интересных причуд между различными платформами.Несколько фонов само по себе является достаточно простым, как и CSS градиенты, но объединение двух, где все становится interesting.
CSS Три — Подключение Dots
Эта статья описывает, как Вы можете использовать background-clip имущество, вместе с другими свойствами CSS3 для создания экспериментальной design.
CSS3 фон-Clip и @ Font-Face
экспериментировать с фоном-клип: текст и @ шрифт лицу через Typekit.Когда я закончил Том 2 в моем Цитируя Лебовски серии первое, что пришло на ум, было то, что я держал пари, я мог CSS this.
фоны в CSS:. Все, что нужно Know
Эта статья показывает некоторые общие приемы, которые можно сделать с фоном, а также то, что в магазине для фона в CSS 3 (в том числе четыре новые свойства фона)
JavaScript Solutions
Cross-Browser Multi-фоновых изображений, в том числе IE
Одна из самых больших проблем с использованием CSS3 Multi-фонов том, что она не используется в Internet Explorer, однако с помощью: ‘ AlphaImageLoader IEFilter’,можно разместить два фоновых изображений в element.
Несколько фонов с холста drawing
Все современные браузеры, совместимые с холста-теги, рядом из Internet Explorer, но Google создал превосходный кусок JavaScript, что перенес на холст IE.Этот маленький кусочек JavaScript рисует несколько фонов в графический элемент позади HTML elements.
cssSandpaper — CSS3 JavaScript Library
библиотека cssSandpaper JavaScript смотрит на таблицы стилей в HTML-документ и, где это возможно, сглаживает браузера различия между CSS3 свойства, как transform opacity box-shadowи другие.Этот сценарий является не только полезным для разработчиков, которые хотят поддерживать CSS3 в IE.
Имитация CSS3 границы радиуса и коробки тень в IE7/8
темы на StackOverflow, которая объясняет, как эмулировать border-radius и box-shadow на IE7/8.
CSS3 решения для Internet Explorer
Smashing Magazine’ S статью, описывающую, как сделать border-radius box-shadow,несколько фонов, gradients CSS и преобразования работы в Интернете Explorer.
CSS3 Media Queries
Веб-дизайн сообщества экспериментировали с адаптивным макеты для while сейчас, и с CSS запросы средств массовой информации, мы теперь, наконец, есть очень простой и мощный инструмент для реализации адаптивных макетов без использования JavaScript.Поддержка: Firefox 3.5, Safari 4.0, Chrome 3.0, Opera 9.6, Internet Explorer 9.0.Еще раз: мы должны будем JavaScript-решение для интернет-Explorer.
CSS3 Media Queries
подробные слайд-шоу выступления Русь Weakley.
Как использовать CSS3 Media Queries Ориентация
В течение долгого времени мы смогли задать стили для различных типов носителей с помощью CSS, печати и экран является наиболее узнаваемым.С CSS3 эти типы носителей были расширены, чтобы позволить дополнительные выражения, иначе запросы средств массовой информации, что дает нам больше контроля, когда конкретный стиль должен быть применен.В этой статье я остановлюсь на запрос ориентация средств массовой информации и весело провести демонстрацию показывающий, как использовать it.
Определение размера устройства & ориентация в CSS
Прошли те времена, когда мы могли бы с уверенностью предположить, что большинство посетителей нашего сайта будет иметь по крайней мере 1024px всей разрешение экрана.С смартфонов и планшетных компьютеров на подъеме, вы посетители могут также просмотр веб-страниц с экраном шириной от 320px вверх.Имеет ли ваш сайт хорошо выглядеть на 768px всей холсте?That’ с, как люди будут видеть его с помощью портрета ориентированных iPad.
Как использовать CSS3 Ориентация СМИ Queries
Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров