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

В этой облавы мы представляем свежие полезные статьи о менее известных CSS 2.1 и CSS 3 свойства, а также обзор Недавно опубликованные CSS методы, инструменты и tips для дизайнеров и веб-разработчиков.Пожалуйста, следите за обновлениями: На следующей неделе мы представим вторую часть этой статьи, показывая свежие CSS3 методы, инструменты и resources.

Узнать о Obscure CSS Properties

Малоизвестные размер шрифта, настроить Property
Всегда хотел использовать резервный шрифтов на вашем CSS с различными форматами без них смотрит огромный (или крошечные)?Сверкающие новые CSS3 font-size-adjust собственность может сделать только that.

Прояснение CSS-правил на
CSS на-правила (или правил @) являются так назвали потому, что они используют ‘ @ ’-символ.Они aren’ T использоваться так часто, как другие элементы CSS, и поэтому она может быть легко упустить из виду их функции.Если you’ когда-либо были смущены о CSS на-правил, here’ SA быстро guide.

CSS пробел недвижимости Explained
CSS имеет очень полезное свойство называется white-space, который часто остается незамеченным среди новичков CSS.Можно, наверное, жить без этого свойства в течение достаточно долгого времени, но как только вы узнаете, как использовать его, он придет в очень удобно, и вы найдете себе вернуться к нему снова и снова again.

Как п-го ребенка Работы
nth-child является одним из тех несчастных, а атрибуты CSS, который зажат между почти полную совместимость с различными браузерами, за исключением полностью нулевая поддержка в IE, даже IE 8.Крис Coyier.

CSS3: цель Псевдо-класс и CSS Animations
Есть очень много методов недостаточно, чтобы мы могли подавать заявление на наши проекты как расширение слоя.Let’ возьмем беглый взгляд на :target псевдо-класса и очень простой CSS animation.

пространства комбинатора
Комбинаторы являются забывают часть CSS развития.Большинство юниоров don’ даже не знают, что они делают их использования, а другие не знают своего полного потенциала и let’ правде в глаза, даже большинство профессионалов don’ т действительно знают о тонкостях комбинаторы CSS.It’ и все связанные с этим маленький кусочек пустоты между именами классов, так let’ начнем, взяв хороший взгляд на пространство (потомок) combinator.

Cross-Browser Inline-блока
Ах, встроенный блок, который неуловим и, о, так заманчиво дисплей декларации, которая обещает так много, но дает так мало.Статья объясняя, что встроенный блок, как она работает и что это хорошо for.

Тощий на селекторы CSS атрибутов
Одноместный элемент имеет три атрибута: ID, класс и отн.Для выбора элемента в CSS, вы можете использовать и ID селектора (# первое название) или селектор класса (. Магического).Но знаете ли вы, вы можете выбрать его на основе этого атрибута отн, а?Это то, что известно как атрибут selector.

Таинственный псевдо-класс в CSS
псевдо-классы позволяют управлять CSS материала в различных формах, состояния и места легко и эффективно,, не занимая слишком много места.CSS3 собирается внедрить много новых псевдо-классы и they’ Re собираемся сделать нашу жизнь намного легче (если вы берете совместимость браузера из уравнения).Они помогают как эстетика и удобство в использовании и может делать вещи, которые когда-то были жесткие легче, чем когда-либо before.

CSS Opacity: Всеобъемлющее Reference
Эта ссылка будет предоставлять подробный обзор CSS прозрачность, наряду с некоторыми примерами кода и объяснения, чтобы помочь вам реализовать эту полезную технику CSS в ваших проектах одинаково во всех браузерах.Одна вещь, которую следует отметить о CSS прозрачность в том, что, хотя it’ S используется уже в течение нескольких лет, она никогда не была, и в настоящее время не является стандартным свойством.It’ SA нестандартной техникой, которая должна быть частью CSS3 specification.

Visual пошаговое @ шрифт лицу CSS Code
В шаг за шагом визуальном формате, в этой статье мы покажем вам, что код делает и как использовать его с собственных fonts.

Укрощение Расширенный Селекторы CSS
лучший способ избежать бедствия распространение в разметке и держать его в чистоте и семантическая, заключается в использовании более сложных CSS селекторов, те, которые могут ориентироваться на конкретные элементы без необходимости класса илиID, и, делая это сохранить наш код и наши стили flexible.

Посмотрите на некоторые из новых селекторов Введенный в CSS3
Вот краткое изложение лишь некоторые из вещей, которые можно с CSS3 селекторы.Конечно, CSS3 isn’ T поддерживается на всех любыми браузерами IE, включая IE8, но все последние версии Safari, Firefox и Опера поддержку большинства, если не всех them.

Полезные CSS Techniques

испортить проблемы с CSS3 мульти-columns
“ I’ ве играл с новой нескольких столбцов свойств CSS3 (колонка счетом,столбца шириной, и так далее), и I’ ве пришли к выводу, что they’ повторно к сожалению, не готовы реально использовать.Я обнаружил, что there’ не достаточно контроля над тем, как содержимое распределяется между колоннами, чтобы сделать их надежными.I’ не уверен, если поведение браузера I’ посетили видим, это правильно или нет, спецификации, к сожалению, не определены достаточно, чтобы сделать его clear— по крайней мере, me— о том, как браузеры должны быть обработку некоторых из проблем, я побежалacross.”

Исправление сирот с Overflow
“ overflow недвижимость в CSS можно использовать по-разному и очень удобно, когда исправлять ошибки.Ниже приведены некоторые уроки, которые демонстрируют, как прояснить некоторые общие вопросы, используя переполнение property.”

CSS Sprites без использования фона Images
” Первый подход, на мой взгляд было сделать типичный Спрайты CSS, но это требует CSS работа, которую мой клиент не знал много.Я хотел дать ему доступ к обновлению своих партнерских баннеров использованием WordPress, и самое простое, что было позволить ему просто загрузить свои фотографии и поместить URL в пользовательской области.No CSS хитрости участие, только то, что он needed.”

Центр Несколько DIVs с CSS
В какой-то момент у вас может быть ситуация, когда вы хотите центре нескольких элементов (возможно, < div> элементов или других элементов блоков) на одной линии с фиксированной ширинойобласти.Центрирование одного элемента в фиксированной области легко.Просто добавьте поле: авто и фиксированной ширины элемента, который вы хотите центра, и края заставит элемент center.

Разные таблицы стилей для разных размеров браузера Windows
В противном случае известно как “зависит от разрешения макетов”.Единый веб-сайт, различные файлы CSS для перестройки сайт, чтобывоспользоваться размер в наличии.Существует стандарт W3C способ объявления them.

Новый Clearfix Method
взломать Clearfix, или “легкая очистка” взломать, это полезный метод очистки поплавки.Оригинальный взломать Clearfix прекрасно работает, но браузеры, что цели либо устарели, либо хорошо на их пути.

Preload изображения с CSS, JavaScript, или Ajax
“ Предварительная загрузка изображений определенно помогает пользователям без широкополосного насладиться лучшее впечатление при просмотре контента.В этой статье мы рассмотрим три различных предварительной методы повышения производительности и удобства использования вашего site.”

Как Центре абсолютно позиционируемых элементов с помощью CSS
“ Центрирование абсолютно позиционируемых элементов является проблемой, CSS, что происходит сейчас и потом.Решение кажется очевидным раз I’ сделали это, но я все еще прибегая к помощи проблемой каждые несколько months.”

переноса длинных URL-адреса и текстовое содержимое с CSS
переносить длинные URL-адреса, строки текста и другой контент, просто применить это тщательно продуманная кусок кода CSS для любого блочного элемента (например, идеально подходит для <pre> теги)

Нетрадиционная: CSS3 Link Проверка
интересное решение нахождения пустых ссылок на веб-страницы.Только CSS3 в use.

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

“ Checkmark” Ваш Посещенные ссылки с чистого CSS
Целью данного учебника, чтобы получить галочку предшествующих посещенные ссылки на хороший визуальный индикатор.Статья будет таргетинга: посещаемым псевдо-класс, но она также включает в себя информацию о других псевдо якорь classes.

Реорганизация посетил связи с CSS3 гибкие окна model
интересная техника, которая использует гибкую модель коробки (коробки, ящики-Flex, коробка-порядковый-группы), генерируемый контент (: прежде,: после), и: не и: первый в тип селектора по реорганизации посещенных ссылок на странице.

Вертикальное центрирование
Вертикальное центрирование с CSS, кажется, большой obsticle в мире веб-дизайна, и я замечаю много людей пользу < table> основе макетов, когда потребность в вертикальном центре возникает.That’ слишком плохо.Несмотря на то, CSS вертикального центра может получить [очень] сложна время от времени, я считаю, что изучение различных методов для архивирования это выгодно, и как только вы получите повесить ее, you’ сделаю это так же, как что-нибудь еще с CSS.

Прочный вертикальный текст Layout
Немного системы форматирования сегодня может обрабатывать вертикальное расположение текста, и большинство из них только выложить текст в праве на левой колонны.Этот документ описывает систему, которая может не только обрабатывать общие сценарии в вертикальном право-налево колонны, но это может корректно принимать необычные сочетания сценария и слева на право столбцов текста.Модель описывается здесь как система CSS, но понятия можно применить к не-CSS систем well.

Ipad Ориентация CSS
По большей части, Mobile Safari на Ipad то же самое, что и на iPhone.Одно из отличий является то, что Webkit на Ipad отличием деклараций CSS СМИ запроса на основе orientation.

Как сохранить нижние колонтитулы в нижней части page
Когда HTML-страница содержит небольшое количество контента, подвал иногда может сидеть на полпути вверх по странице, оставляя пустое пространство под ним.Это может выглядеть плохо, особенно на большом экране.Веб-дизайнеры часто просят нажать нижние колонтитулы в нижнюю часть экрана, но it’ ы не очевидно, как это может быть done.

Sexy Кнопки CSS
CSS становится достаточно мощным в эти дни.Он даже может взять на себяМесто изображений во многих отношениях, давая вам более гибкий дизайн и меньшее количество файлов для работы.Представьте, что вы в состоянии сделать ультра-сексуальный кнопки только с CSS, что дает вам полный контроль с помощью кода.Ну, вы можете!И it’ не слишком сложно, really.

CSS Image Maps: Beginner’ S Guide
Пока они не могут использоваться так часто, как они когда-то были в период расцвета таблицы на основе веб-дизайн, изображение карты может все еще быть весьма полезны в ситуациях, которые требуют за него.К сожалению, для начинающих, достигая эт …

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