Несмотря на то, CSS isn’ т that сложно, полезные приемы CSS не так легко найти.

Иногда найти кросс-браузерные решения может занять некоторое время, но вы don’ т придется изобретать колесо каждый раз.Другие дизайнеры, возможно, была такая же проблема в прошлом, и, таким образом, основная цель этой облавы, чтобы поделиться с вами кладезь новых методов, которые вы, надеюсь, найти очень полезные и ценные.Мы также надеемся, что эти учебники и статьи помогут вам решить общие проблемы разработки и находить новые подходы к сложным CSS issues.

Основной целью данной статьи является Настоящий новый мощный CSS techniques, поощрять эксперименты в дизайне сообщества и нажмите CSS вперед.Пожалуйста, обратите внимание, что мы есть как экспериментальные, так демонстраций и практических методов в этой статье.На следующей неделе мы представим еще более полезной новые инструменты и ресурсы для интерфейсных разработчиков.Мы искренне ценим усилия дизайнерского сообщества — спасибо, ребята

Интересные и оригинальные Techniques

Чудо-Webkit: 3D Transforms
Это замечательный пример того, что можно сделать с помощью CSS3 3D-преобразований.Интересное заключается в возможности манипулировать матрицы преобразования любого элемента DOM, в этом случае мы получим матрицу дается только четыре очка конца элемента.Don’ забывайте нажимать на элементы, тоже.Кто думал, что пару лет назад, что нечто подобное было бы возможно только с CSS

CSS Box Тень & Тень текста Experiments
CSS box-shadow и text-shadow позволит нам создать некоторые довольно интересные элементы дизайна, которые don’ даже не выглядят как тени.Ключ в том, чтобы думать о том, как работают CSS тени и использовать их, чтобы получить желаемый эффект.В статье есть три замечательных примеров использования box-shadow собственности творчески для достижения эффектов, которые don’ т есть много общего с shadows.

CSS3 Глубина Field
Сойер Hollenshead’ Эксперимент с попыткой создать “ Глубина Field” эффект с CSS.Размытым текстом осуществляется с помощью text-shadow, с множеством цветов текст transparent.Взгляните на demo и don’ забывайте нажимать‘ N’ Для переключения animation.

Art Deco Выбор Text
Это быстрый доказательства правильности концепции разделения типографии, основанной на Пьера Fix-Masseau’ стиль ар-деко.Задача состоит в том, чтобы иметь такую ​​‘ раскола letters’ как часть макета веб-страницы, сохранив при этом возможность выбора text.

CSS3: переключатель-кнопка без JavaScript
Этот пример представляет собой CSS3 переключатель-кнопка, которая работает без JavaScript.Если вы когда-нибудь понадобится: Вы сложить два <a> S друг на друга, а затем отключить указатель событий для топ <a> на :target

.

О войне и Bananas
Этот студенческий проект исследует новые способы укладки и проектирования веб-сайтов в художественном пути.Студенты из Merz Akademie в Германии использовались Picasso’ S “ Guernica” как кадры, разделяется изображение в разных слоях и анимированные их с помощью CSS.

WebKit Clock
Этот пример приводится в HTML5 Canvas, CSS3, JavaScript, Web Fonts, SVG и не графических файлов.CSS файл огромен, но результат вполне remarkable.

Чистый CSS Slideshow
Эта техника использует CSS преобразований и позиционирования для создания чистого CSS на основе слайд-шоу.К сожалению, документация (пока)

CSS Dock
Это быстрый CSS3 эксперимента пытаются повторить Док OS X, в комплекте с метками, анимации, отражения и показателей.Он использует CSS переходы для увеличения эффекта и:target псевдо-класса и CSS анимаций для подпрыгивая effect.

Андрей Hoyer
Интересный эксперимент Эндрю Хойер.Идущего человека осуществляется с использованием только CSS3 анимации и простым HTML.Основная идея всего этого заключается в том, что преобразование CSS применяется к элементу относится и ко всем ее детям.Работает в Webkit-браузерах only.

Тип исследования: все CSS button
Dan Cederholm объясняет, как с помощью box-shadow text-shadow, border-radius, и CSS градиенты, мы можем создать полированной трехмерные, отзывчивые кнопки, которые не требуют images.

3D Text
Эта техника использует несколько text-shadow ы для создания 3D-вид текста на любом элементе HTML.Без дополнительной наценки используются.Работает в последнее сборки Safari, Chrome, Firefox, и Opera.

Спиновые эти иконки с CSS3
Том Кенни имеет аккуратный эффекта, который раскручивает социальные иконки с помощью CSS преобразований и перехода при наведении на них.Очень хороший enhancement.

Формы CSS
В статье представлены различные геометрические формы, все созданные с помощью CSS и HTML одном элементе.Следующие формы представлены: квадрат, прямоугольник, круг, овал, треугольник, параллелограмм, трапеция, звезда, пятиугольник, шестиугольник, восьмиугольник, сердце и бесконечности — все с помощью CSS only.

CSS фоновое изображение hacks
Имитация фоновое изображение урожая, прозрачность фона, фон преобразований и улучшения позиционирования фона.В статье объясняется несколькими хаки, опираясь на CSS псевдо-элементы для эмуляции функции недоступны или пока широко не поддерживается современными browsers.

Оформление Лучше выбирать элементы с помощью CSS3 и jQuery
Это руководство объясняет, как взять обычный select элемент, и заменить его лучше выглядит версия, сохраняя при этом все функциональные нетронутыми.Он использует CSS3 фон и несколько прозрачных изображений PNG в качестве спрайта.В настоящее время несколько фонов поддерживаются Firefox, Safari, Chrome и Opera.Для Internet Explorer и старых версий первых браузеров, резервный определено, что в основном только обычная версия фоне.При разборе документа CSS, браузеры, которые не понимают несколько фоне будет просто игнорировать правила и использовать простые one.

CSS только для 3D Slideshow
В этом учебнике показано, как создать 3D-слайд-шоу, используя только HTML и CSS.Не требуется JavaScript.You’ сможете имитировать события нажатия с использованием CSS :focus псевдо-класса и элемента HTML5 <figcaption>, но идея та же.Как автор допускает, этот метод не обязательно “лучше”, чем с помощью JavaScript, а просто аккуратно альтернатива, которая позволяет воспользоваться преимуществами новейших HTML5 elements.

Have Fun с Borders
Этот урок показывает три простую технику, чтобы добавить света тень, “ pressed” и “ beveled” государств текстовых блоков и изображений.По Сох Tanaka.

Анимированные CSS3 Owl“ Что о том, совы, которые двигались глаза так часто, и когда завис над поднимет свои крылья в то время как несколько лучей света будет вращаться в фоновом режиме.Немного чрезмерными?Возможно.Необходимые?Вовсе нет.Тем не менее, that’ именно то, что я искал, чтобы сделать с CSS3 преобразований, переходы и animations.” интересный эксперимент, лучше всего рассматривать в Safari или Chrome.

CSS социальной Вход в Buttons
Это сообщение в блоге описывается достаточно простой метод для создания хорошей реагировать CSS-кнопок с помощью CSS спрайтов, border-radius, тени и CSS gradients.

вращающегося цветового куба окно с анимацией CSS3, преобразует и gradients
еще один замечательный эксперимент, который представляет собой вращающиеся цвета куба с помощью CSS3 анимации и преобразований.Помните, что браузер может замедлить немного при загрузке demo.

CSS3 Demo: 3D Interactive Galaxy
демо CSS3, где вы можете взаимодействовать с процедурно-созданную 3D галактики.Для того, чтобы создать эффект, дизайнер использовал 3D CSS свойств, доступных в Safari 5 и на iPhone и iPad.

Получение Hardboiled с CSS3 2D Transforms
Энди Кларк объясняет, как использовать CSS3 двумерные преобразования, чтобы добавить реализма к ряду карт вкрутую частных детективов бизнеса. рабочая демо-available как well.

Как создать Microsoft Office Мини-бар с JQuery и CSS3
Янко Йованович объясняет, как создать мини-баром Microsoft Office, который предоставляет контекстно-связанной функциональности.В случае MS Word, контекст является выделение текста.С Мини-бар всегда всплывает рядом с указателем мыши она позволяет пользователям быстро выполнять действия, связанные с selection.

Угловой маски содержимого с CSS
Эта статья объясняет, как создать угловой содержание CSS “ masks”.Идея довольно проста и использует CSS преобразования собственности (вращение, если быть более точным)

Вращающаяся Функция Boxes
Все анимации здесь CSS3 переходы.Наличие только наблюдает за клики и применяется и удаляет классы по мере необходимости.Поэтому, когда вы нажимаете на блоке, что block’ S class’ регулируется.Новые классы имеют различные размеры и положение значений.Поскольку блок имеет переход CSS прикладной, эти новые размеры и постион значения анимированными well.

Чистая CSS3 окно тень страницу локон effect
Хорошо, кода CSS3 здесь изворотливый и может показаться немного раздутой первый, но it’ SA хороший пример использования различных функций CSS3 вместе, чтобы создать эффект, который, как правило,требуют images.

Чистый CSS сложенном-Corner Effect
Узнайте, как создать простой CSS сложенном углу эффекта без изображений или дополнительной разметки.Он хорошо работает во всех современных браузерах, и лучше всего подходит для конструкций с простым фоном цвета;. Поддержку Firefox 3.5, Chrome 4, Safari 4, Opera 10, IE 8

Полезные практические Techniques

Гладкий выцветания изображения подписи с чистого CSS3
Узнайте, как использовать CSS3 переходы создавать красивые, анимированные, полупрозрачные подписи изображения.Полный пример и код для загрузки included.

Fade изображение в Another
Узнайте, как создать образ опрокидывание, давая элемента фонового изображения.Есть три способа, чтобы исчезнуть в непрозрачности.Кликните здесь, чтобы узнать больше:

Новый @ Font-Face Синтаксис: простые, Easier
С IE9 и FF4 близится релиз, Ethan Dunham от Font Squirrel пересмотрела проблема кросс-браузерные CSS @ шрифт лицу синтаксиса и нашел новый и более простойрешение.В этой статье, Ричард Финк объясняет новый синтаксис и его вариации, и предлагает самый разумный синтаксис использовать.Кроме того, проверьте FontSpring’ S Новый Bulletproof @ шрифт лицу Syntax.Пожалуйста, обратите внимание, что этот метод не работает в Internet Explorer 9.

Новый Clearfix Method
взломать Clearfix, или “ простой clearing” взломать, это полезный метод очистки поплавки.Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров