Тяжелая работа интерфейсных дизайнеры не перестают удивлять нас.За последние месяцы, we’ видели веб-дизайнеры создания и представления множества поистине замечательные методы CSS и инструменты.Мы собраны, проанализированы, куратор и оснащены новейшим полезные ресурсы для вашего удобства, чтобы вы могли использовать их сразу или сохранить их для будущих reference.

Пожалуйста, не стесняйтесь комментировать это сообщение и дайте нам знать, как именно вы используете их в рабочий процесс.Однако, пожалуйста, избегайте ссылку снижается, но поделиться своими знаниями и своим опытом вместо этого.Кроме того, обратите внимание, что некоторые методы являются не только CSS основе, но и использовать HTML5, JavaScript, или JavaScript-библиотек.Спасибо всем признакам дизайнеров и разработчиков для вдохновляет, жесткий work.

CSS Techniques

вращения Sliders
Эрик Мейер акций шести своих анимированных преобразований, которые способны скользить к определенной степени с не-центре преобразование origins.

Генерация органических Случайность с простыми числами и CSS
Сначала, вы можете быть удивлены, почему, черт возьми, Алекс Уокер говорит о cicada’ S и веб-дизайна.После принятия пристальный взгляд, своего рода связь между двумя развивается и ‘ Цикада principle’ является born.

CSS3 3D Hologram
Вдохновившись голографические эффекты, которые могут быть достигнуты с HTML / CSS, Хаким эль-Хаттаб развил свой собственный 3D-окно, которое изменяет перспективу в зависимости от ориентации устройства.Обратите внимание, что для этого требуется браузер WebKit и был протестирован только на iPhone.Также не забудьте посетить больше Hakim’ S CSS/HTML5 experiments.

Шахматная доска, полосатые & другие модели фон с CSS3 gradients
You’ повторно, вероятно, знакомы с CSS3 градиенты в настоящее время, в том числе ближе кстандартный синтаксис Mozilla и Webkit подробный один.Я полагаю, вы знаете, как добавить несколько остановок цвета, градиенты сделать под углом или создайте радиальных градиентов.Что вы можете не знать, что CSS3 градиенты могут быть использованы для создания многих видов наиболее часто используемых шаблонов, в том числе клетчатые узоры, полоски и многое другое.Кроме того, проверьте Lea’ S CSS3 Patterns Gallery< / a.

CSS3 Keyboard
Нажмите в поле и начните печатать на computer’ клавиатура с.Умело разработанный Дастин Картрайт и Дастин Хоффман.You’ Тут надо уважать количество времени и усилий, которые пошли в производство этого demo.

CSS3 Прогресс Bars
пара хороших баров прогресс создал Крис Coyier, которые не используют образы — только CSS3 фантазии.В браузерах, которые не поддерживают CSS3, эти индикаторы будут выглядеть более simplified.

Hover на “Everything But”
учебник Криса Coyier, которая показывает нам, как легко добавить наведении на элемент может быть.В этом случае государство наведении применяется к все но элемент фактически завис over.

Создание сферы с 3D CSS
С 3D CSS3 автора превращает it’ S можно создать сферу, как объект, хотя и со многими элементами.Paul Hayes акций своей версии 3D сферы CSS (работает в последнее Safari и IOS) и дает нам кодирования needed.

CSS3 Planetarium
Этот пример подчеркивает передовые CSS3и HTML5 функций, Mozilla Firefox и открытые толчок сообщества Интернета в современном веб-browsers.

природного объекта Вращение с CSS3 3D
Учебник Дирк Вебер, которая учит нас, как построить 3D PackShot в HTML и CSS, применяя некоторые CSS 3D-преобразований.При добавлении некоторых Javascript, мы можем сделать объект свободно вращается в 3D пространстве.И как мы будем наращивать наши Javascript с некоторыми сенсорным интерактивности, PackShot также будет работать хорошо в Safari для IOS-платформ, таких как iPhone или iPad.

CSS Drop-тени без Images
Nicolas Gallagher акций представляет свой CSS отбрасывание тени, без images.

Incrementable значения длины в текстовом Fields
Lea Verou объясняет, как реализовать функцию, которая позволяет увеличивать или уменьшать < length> значение путем нажатия вверх и вниз клавиши со стрелками, когда курсор находится над it.

скошенными углами & Отрицательное границ радиуса с CSS3 Gradients
скошенными углами и моделировать отрицательный радиус границы без изображения, используя CSS3 градиенты еще раз — Lea Verou поражен тем, сколько CSS проблемы могут быть решены с градиентами только.Работает на Firefox 3.6, последней Webkit Ночные сборки, Chrome и Опера 11.10.

Гибкая высота вертикального центрирования с помощью CSS, BeyondIE7
Roger Johansson делится своими мыслями о том, как улучшить центрирование элемента по горизонтали и вертикали с display:table alternative.

Кодирование до семантические, постное timeline
Эта статья расскажет вам, как создать семантическое постное timeline.

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

Quick Tip: ненавязчивая текста CSS Gradients
Джеффри путь показывает некоторые способы для создания чистого текста CSS-градиентов с небольшим количеством обмана.Ключ в том, чтобы использовать комбинацию селекторов атрибутов, WebKit-определенные свойства, и пользовательские HTML attributes.

Bokeh с CSS3 Gradients
Дивья Manian использует CSS градиенты и показывает результаты его работы над проектом, который использует кучу кругах как декоративное background.

различные переходы для Hover On / Hover Off
Крис Coyier пытается acchieve “ различные переходы на MouseEnter и mouseleave”, но он isn’ T использованием JavaScript здесь, we’ говорим о CSS: наведите государства и CSS3переходы.Наведите указатель на некоторые свойства CSS оживляет себе новое значение; наведении выключен, различные CSSсобственности animates.

Стайлинг детей в зависимости от их числа, с CSS3
. Lea Verou показывает, как стиль детям элементов на основе их общего числа (то есть, их общее количество)

CSS Modal
Использование CSS3 методы модального окна может быть создан без JavaScript или изображений.С небольшим количеством анимации, переход и преобразование, это можно сделать, что немного более особенным.Проблема: когда вы нажмете “ Back” кнопки после модальных выскочил и был закрыт, you’ увидите модальных снова.Но, возможно, you’ приду с пути, чтобы исправить это

Вращающаяся Функция Boxes
полный эффект от него (с переходом анимация) будет работать в довольно новый WebKit и опера-браузеров и Firefox 4 (в режиме реального бета-версии на сегодняшний день).Любой другой браузер будет вращать блоки без перехода animation.

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

Как избежать общих CSS3 mistakes
Новые возможности CSS3 приносят с собой сложности и новые вещи для нас, чтобы испортить.ЭтоСтатья поможет держать нас в узде, как мы начнем использовать эти новые feature …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров