Это великое время для интерфейсных разработчиков.

После нескольких месяцев преувеличенными excitement о HTML5 и CSS3, сообщество веб-дизайна теперь начинает придумывать методы CSS, который фактически положил новых доступных технологий для практического использования, а не злоупотреблять ими для чистого эстетического purposes.Мы видим, меньше “ чистого CSS images” и более продвинутые, умные методы CSS, которые действительно могут улучшить опыт просмотра веб-страниц пользователей.И that’ А хорошо, что

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

CSS Techniques

Сейчас в программе: переходов и анимации с CSS
Тим Ван Дамм демонстрирует довольно простой CSS дизайн, который использует переходов, анимации и тонкие наведении эффектов для создания привлекательного пользовательского опыта.Кроме того, обратите внимание на использование в качестве фона значки-изображения для селекторы атрибутов.К сожалению, демо лучше всего работает в Webkit-браузерах, но он деградирует изящно и в других современных браузерах.К сожалению, мы didn’ т найти в документации по technique.

CSS3 диапазона слайдера, флажок радио button
демо HTML входных элементов производится с CSS3.Они включают в себя реалистичные ползунка диапазона, флажков и переключателей.Дизайнер использовал минимальное разметки, ни наличие, ни изображений.Нижняя сторона: есть тонны кода грязный CSS3, и Safari отображает страницу лучших.Chrome близко, но 3D перспективе doesn’ T вполне work.

CSS3 Media Queries
CSS2 позволяет указать таблицу стилей для конкретных типов носителей, таких как экран или печать.Теперь CSS3 делает его еще более эффективным, добавив запросы средств массовой информации.Вы можете добавить выражений типа носителя для проверки определенных условиях и применять различные стили.Например, вы можете иметь одинстилей для больших дисплеев и различных стилей специально для мобильных устройств.Это довольно мощная, поскольку она позволяет адаптировать к различным разрешением и устройства без изменения содержания.Продолжить на этот пост, чтобы читать учебник и посмотреть некоторые веб-сайты, которые делают хорошее использование средств массовой информации queries.

Пропорциональный лидирует с CSS3 Media Queries
жидкости макета должны учитывать ширину столбцов текста.Эта проблема, пропорциональной ведущей, то, что держит многих дизайнеров назад от принятия жидкости макетов.В этой статье, Энди Кларк объясняет, как можно добиться пропорционального ведущих для Вашего типографии использованием CSS3 Media Queries.

Отзывчивый веб-Design
Эта статья Итана Маркотт объясняет, как использовать жидкость сети, гибкие изображениями и медиа-запросов для создания элегантного опыта пользователей с чувствительным веб-дизайна.Проверьте demo — Конечно, don’ забудьте изменить размер браузера window.

всплывающее окно Подробности о Hover с CSS
Это руководство описывает метод, который представляет подробную информацию о содержании пункта при наведении курсора мыши.Решение очень простое и использует position: relative и z-index для достижения effect.

CSS3 границ Радиус и округлые Avatars
Trent Walton придумали умную технику для создания округлых изображений (в данном случае, округлые аватары) с border-radius собственность.Решение простое: создать рамки класса для вашего изображения, и дать ей границу.Тогда вокруг и фрейм, и изображение с border-radius имущества, и вы сделали: простую технику без дополнительных изображений или сценариев — просто дополнительная строка кода.Вы можете проверить Tim Van Damme’ с похожей CSS technique, too.

CSS3 Rounded изображения с jQuery
“ На днях я пытался стиле CSS3 границы радиуса элемент изображения, и я понял, что Firefox не отображает border-radius картинки.Тогда я понял способ обойти это — обертывание span. Теги вокруг с оригинального изображения в качестве background-image ”

простые CSS Grid
Зачем ограничивать вашего макета, так что он может вписаться в эту 960gs?Сетка должна помочь вам в дизайне, чтобы не ограничивать ваше творчество.978 сетки не только об увеличении ширины страницы, но чтобы ослабить средника, так что пользователи могут читать более comfortably.

Исправление сирот с CSS Overflow
Когда верстки, дизайнеры стараются избегать оставлять только одну или несколько слов висит на строки в конце абзаца.Это считается плохой типографии, поскольку она оставляет слишком много белого пространства между пунктами и прерывает движение глаз читателя (см. пример ниже).Простым решением является типографский переделать строку, добавив отступ окончаний пункта.Но проблема особенно раздражает, когда выравнивание пункте рядом с изображением которого превышает paragraph’ с высоты.Сох Танака придумала простое и быстрое решение этой проблемы с CSS.

Apple-подобный эффект с Retina jQuery
Этот учебник объяснить, как можно воссоздать эффект, изображенные на картинке ниже, с использованием JQuery и CSS.

Как создать Kick-Ass CSS3 прогресса bar
Новые возможности, представленные в CSS3 позволяет разработчикам создавать потрясающие визуальные эффекты: этот пост exaplains, как можно создать модный бар прогресса с использованием CSS3 и jQuery, без вспышки или изображений.

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

Расширенный столбцов с помощью: п-го ребенка (N)
Представьте себе такую ​​задачу: вы должны показать описание товаров в виде столбцов, изложенные в зигзаг шаблону.Первый инстинкт, чтобы разделить каждый раздел в свой список, но если сайт работает на CMS, все продукты должны быть выплюнуть в один гигантский список.Учитывая этот сценарий, вы можете использовать псевдо-селекторы :nth-child(N) и немного JQuery, чтобы помочь с IE support.

Напоминание World’ S Fairs
Trent Уолтон объясняет рабочего процесса и методов проектирования использованы для создания Напоминание World’ S Fairs сайт, чтобы отпраздновать запуск Internet Explorer 9.В результате действительно remarkable.

Новый дизайн Twitter с CSS и JQuery.
Это сообщениеобъясняет методы, используемые Twitter’ Новый веб-интерфейс и повторно создает интерактивные его использования CSS и jQuery.

Европа, CSS & JQuery интерактивными map
CSS преобразует простой список стран, в полностью интерактивные карты.Работает с инвалидами таблицы стилей и JavaScript, а также на мобильных устройствах.Простой код не требуется Flash Player или других плагинов

Простой Tooltip ж / JQuery & CSS
Есть много подсказки плагины там, но не многие из них объяснить, что именно происходит в логике всплывающей подсказке.Я хотел бы поделиться, как я создал мое сегодня, и я также открыты для любого критика и предложения для тех, JQuery ниндзя там.Давайте look.

Super Cool CSS флип-эффект с Webkit Animation
Webkit поддерживает некоторые фантазии преобразования и эффекты анимации, которые действительно могут оживить Ваш опыт для пользователей Safari или Chrome браузеры.Here’ SA быстрый взгляд на то, как собственность rotateY может производить флип-эффект, и как она может быть использована для создания Трансформеры тематические верхней козыри design.

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

Анимированные нечестивых CSS3 3D-баре chart
Создать красивый 3D графике бар.Но вместо создания “ stacked” одного, нескольких баров расположены друг под другом.При наведении, анимация показывает и бар растет в соответствующие size.

CSS пограничной Tricks
Так как я выпустил свой новый переработанный блог, много людей спрашивают меня, как я стиль нажатии влияние на мою категорию навигации.Я хотел бы поделиться некоторыми простыми приемами стиля границу для получения различных эффектов для Вашей следующей project.

Фон трюк с CSS
Эта страница содержит ссылки на пару примеров для уловка, используемая на Design Сделано в Германии 5 где несколько слоев используются и средний слой имеет фиксированный фон,в то время как другие слои имеют абсолютное позиционирование.Визуальный эффект является уникальным и интересным.К сожалению, объяснения на немецком, но демо самостоятельно explanatory.

Сноски С CSS
в своей простейшей реализации — с помощью sup теги и связи в пределах страницы — сноски aren’ T очень удобно.Они прерывают опытом, требуя от пользователя нажать на ссылку, ознакомьтесь с информацией, а затем вернуться на страницу с browser’ S “ Back” button.” Лукас Матис придумали элегантное решение для улучшения этой работы пользователей:его JQuery скрипт показывает содержание сноски, как только пользователь указывает, что они в этом заинтересованы — то есть, когда они наведите курсор на сноску symbol.

Почему и как создать Microsoft Office Мини-бар с JQuery и CSS3
Хотя многие будут утверждать, чтоMicrosoft продукты являются примером хорошего дизайна, Мини-бар был одним из дизайна напитки, которые вышли с Office 2007.Это изменение панели инструментов, которая предоставляет контекстно-связанной функциональности.В случае MS Word, контекст является выделение текста.С Мини-бар всегда всплывает рядом с указателем мыши она позволяет пользователям быстро выполнять действия, связанные с selection.

CSS замены изображения с псевдо-элементами (NIR)
доступный способ замены изображения с помощью псевдо-элементов и генерируемого содержания.Этот метод работает с изображениями и / или CSS выключен; работы с полупрозрачными изображениями; doesn’ T скрытый текст с экрана читателей и поисковых систем, а также предоставляет резервный для IE6 и IE7.

Диагональ Спрайты CSS – Аарон Barker
Так you’ ве получили спрайт создан, и it’ S работает прекрасно.30 икон в одном образе, и основные соединения HTTP сохранены.Вы сделали свой маленький уголок межсетях немного счастливее и быстрее.Стив Souders бы proud.

Глазок — Крепление фоне ‘ bleed’
Я недавно пришел с вопросом в Safari, где цвет фона элемента, казалось, “ bleed’ через край углы при применении обеих граници границы радиуса (см. изображение выше).Затем я нашел решение, и оно пришло в виде -webkit-background-clip property.

Zebra-чередование строк и columns
Zebra-разметки таблиц, конечно, не новая вещь, это было сделано и обсуждались в течение многих лет.Они (предположительно) помощь удобство при чтении табличных данных, предлагая пользователю цветные средства разделения и дифференциации строкдруг от друга.Мы можем создать зебры полосы помощью nth-of-type селектора, — но мы можем применить ее не только строки, но и columns.

Таблица функций Design
“ Я побежал в таблице параметров функции, и я был вдохновлен, чтобы попытаться повторить это.Первый в Photoshop, то в HTML / CSS.Воссоздание прикольных вещей вы найдете в Интернете, безусловно, акциз Я рекомендую (несколько дней после того, как я прочитал это — не могу не согласиться).Как правило, эти упражнения делать, это приводит меня некоторые интересные paths.”

ShineTime — JQuery & CSS3 галерея с анимированными обуви Effects
В этой статье показано, как можно создать эффект анимации обуви с JQuery & CSS3, а затем использовать его, чтобы создать свой собственный блестящий Галерея “ShineTime.Этот эффект полезен в создании Вашего элементы пользовательского интерфейса выглядят, как будто они реальные Polaroid фотографию (или из стекла) и лучшая часть, это не так уж трудно achieve.

Mac-стиле Skype меню приложения с помощью CSS3 и jQuery
Этот учебник воссоздает Skype меню приложений в веб-браузере.Окончательный дизайн имитирует не полный макет — только меню, в котором все ваши друзья в списке.Для отличная CSS3 макет используется и JQuery используется для дополнительной functionality.

Далее Интересные Techniques

объектно-ориентированного CSS
Все ресурсы, необходимые для начала работы связаны с левой навигации.Начните с загрузки файлов баз.Упражнения с одной и двумя могут быть завершены в Firebug, если вы знакомы с ним.Тогда вы можете скачать го� …

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