Главная → Программирование → by

Современные макеты CSS, часть 2: The Essential методы

В Современные макеты CSS, Part 1: The Essential Characteristics вы узнали, что современная, CSS основе веб-сайты должны быть постепенно усиливается, адаптивных к разнообразным пользователям, модульных, эффективных и типографским богатых.

Теперь вы знаете, what характеризует современный веб-сайт CSS, how Как построить один?Здесь десятки основные методы и инструменты для изучения и использования для достижения характеристик today’ самые успешные CSS на основе веб-ы pages.

Так же, как и в предыдущей статье, we’ повторно не буду говорить о тенденции дизайна и стиля; эти стили постоянно меняются.Вместо этого, we’ Re упором на конкретные методы, которые вы должны знать, чтобы создать современные CSS на основе веб-страниц любого стиля.Для каждого метода или инструмента, we’ будете указать, какой из пяти характеристик она помогает встретиться.Чтобы сохранить этот короче, чем энциклопедии, we’ VL также просто рассмотрим основы каждого метода, а затем указать Вам на некоторые полезные, подобранных ресурсы, чтобы узнать полную details.

Вы можете перейти прямо к:

CSS3

CSS3, новейшей версии CSS, что в настоящее время частично поддерживается большинством браузеров, является основным, что вам нужно знать, чтобы создать современный веб-сайтов CSS, конечно.CSS является стиль языка, так it’ не удивительно, что большинство из what’ нового в CSS3 это все о визуальных эффектах.Но CSS3 это больше, чем постепенное повышение и довольно типографии.Она также может помочь юзабилити, сделав содержание более удобным для чтения, а также повышению эффективности разработки и страницы performance.

Есть слишком много CSS3 методы, чтобы охватить в одной статье, не говоря уже о статье, которая isn’ т только о CSS3!Таким образом, we’ пойдем по основам из наиболее важных или не поддерживается CSS3 техники и указать Вам на некоторые большие ресурсы, чтобы узнать больше в depth.

CSS3 Визуальный Effects

Полупрозрачные Color
СПИД в: постепенное повышение, efficiency

RGBA позволяет указать цвет не только установка значения красного, зеленого и синего, что it’ S состоит из, но и уровень непрозрачности он должен иметь.Альтернативой является RGBA HSLA, который работает точно так же, но позволяет установить значения оттенка, насыщенности и яркости, а значения красного, зеленого и синего.В статье Цвет в Opera 10 — HSL, RGB и альфа Transparency объясняет, как HSLA может быть более интуитивным в использовании, чем RGBA.

Screenshot
24 способов веб-site широко используется RGBA к слою полу-прозрачные урны и текста над каждым other.

RGBA или HSLA isn’ т только о том, чтобы все выглядело круто, она также может улучшить ваш веб-site’ с эффективностью.Вы don’ т придется взять время, чтобы сделать альфа-прозрачных PNG-изображений для использования в качестве фона, так как вы можете просто использовать цвет в CSS, а агент пользователя doesn’ т придется загружать эти изображения при загрузке site.

Более подробную информацию о том, как использовать RGBA и HSLA, в том числе резервные методы для браузеров, которые don’ T поддерживает, см.:

Styling стола и Borders
СПИД в: постепенное повышение, efficiency

CSS3 предлагает целый ряд новых способов стиль фона и границы, часто без использования изображений или добавить дополнительные div с.Большинство из этих новых методов уже есть хорошая поддержка браузера, а с they’ повторно используется в основном для чисто косметических изменений, they’ Re хороший способ получить некоторые прогрессивные добра повышение происходит в ваших сайтов прямо away.

Вот некоторые из новых вещей CSS3 позволяет делатьс фоном:

  • Несколько фонов на одном элементе: Теперь Вы можете добавить более одного фоне image к элементу путем перечисления каждого изображения, разделенных запятыми, в background-image собственность.Нет больше вложения дополнительных div просто, чтобы иметь больше элементов придают фоновые изображения на
  • Больше контроля над тем, где фоном размещены: новые background-clip и background-origin свойства позволяют управлять, если фон отображаются в границах, обивка, или просто содержание, а такжегде, как исходную точку для background-position должен be.
  • Фон размеров: Вы можете масштабировать фоновых изображений с использованием новых background-size property.В то время как масштабирование won’ T хорошо выглядеть на много фоновых изображений, это может быть очень удобно на абстрактные, гранж типа фонов, где плитка может быть трудным и где некоторые искажения изображения будет unnoticeable.
  • Градиенты: В то время как всего лишь часть CSS3 Проект spec, Safari, Chrome и Firefox поддерживает объявлении нескольких цветов и размещение значений в background-image собственности для создания градиентов без изображений.Это позволяет масштабировать градиенты с контейнером — изображение в отличие от градиентов — и устраняет необходимость странице пользователям загружать еще одно изображение при просмотре site.

CSS3 позволяет выполнять следующие границы:

  • закругленные углы: С помощью border-radius-property получить закругленные углы на div ы, кнопки, и все, что вашей душе угодно — Все без использования изображений или JavaScript.
  • изображение за границы: С CSS 2.1, единственный путь к созданию графических границы было фальсифицировать это с фоновыми изображениями, часто несколько из них собрана на несколько div с.Теперь Вы можете добавить уникальное границы без использования фоновых изображений путем добавления изображений к границам напрямую, используя новые border-image property, которая также позволяет вам контролировать, как изображение масштаба и tile.

Screenshot
border-radius свойство может быть использовано для скругленные углы и даже создавать круги из чистого CSS, без изображений необходимы.( Stunning CSS3 веб-site)

Эти фона и границы методы уже были освещены также в много хороших статей и руководств, так что проверить это за детали:

Выпадение Shadows
СПИД в: постепенное повышение, адаптивность, efficiency

Тени могут обеспечить некоторую визуальную польский дизайн, и теперь they’ повторно можно достичь без картинок, как на коробках и на text.

box-shadow property был временно отстранен от CSS3 спецификации, но, как предполагается, делает его повторное появление в ближайшее время.В то же время, it’ все еще возможно получить изображение без тени падают на коробках и в FirefoxSafari / Chrome помощью -moz-box-shadow и -webkit-box-shadow свойства, соответственно, и в Opera 10.5 с использованием регулярных box-shadow собственность без префикса.В собственности, вы устанавливаете shadow’ с горизонтальными и вертикальными смещениями из окна, цвет и может дополнительно задать радиус размытия и / или распространению radius.

Screenshot
Вишневый веб-site использует тени, созданные с box-shadow на много ящиков и buttons.

text-shadow property добавляет тени на — вы уже догадались — текста.It’ S поддерживается всеми основными браузерами, кроме — вы уже догадались — Internet Explorer.Это делает его идеальным кандидатом прогрессивного повышения — it’ ы просто визуальный эффект, никакого вреда, если некоторые пользователи don’ T увидеть его.Точно так же до box-shadow, он принимает горизонтальное смещение, вертикальное смещение, радиус размытия и color.

Использование text-shadow удерживает вас от обращения к флэш-памяти или изображения для вашего текста.Это может ускорить время, необходимое вам для разработки сайта, а также ускорения ваших страниц.Как избежать вспышки и изображение текста может также помочь доступности и удобства использования;! Просто убедитесь, что ваш текст еще разборчивой с тенью за ним, так что вы don’ T случайно hurt юзабилити, а не

Более подробная информация о тени окна и текст капли, см.:

Transforms
СПИД в: прогрессивнаяУлучшение, адаптивность, efficiency

CSS3 позволяет делать вещи, как поворот, масштабирование и наклон объектов в ваших страниц, не прибегая к изображений, Flash или JavaScript.Все эти эффекты называются “ transforms.” They’ Re поддерживается в Firefox, Safari, Chrome и Опера 10.5.

Вы примените преобразование с помощью transform собственность, естественно (хотя на данный момент you’ должны будете использовать браузер конкретные эквиваленты: -moz-transform -webkit-transform, и -o-transform).Вы также можете использовать transform-origin свойство служит для указания места происхождения, из которых преобразование имеет место, например, в центре или в правом верхнем углу object.

В transform собственности, необходимо указать тип преобразования (так называемый “ преобразование functions”), а затем в скобках написать измерений, необходимых для данного преобразования.Например, значение translate(10px, 20px) сдвинет элемент 10 пикселей вправо и 20 пикселов вниз от своего первоначального местоположения в потоке.Другие поддерживаемые функции преобразования составляют scale rotate, а skew.

Screenshot
BeerCamp SXSW 2010 site Весы и вращается логотипы спонсоров на hover.

Полный синтаксис этих функций преобразования, а также примеры того, как их использовать, см.:

Анимация и Transitions
СПИД в: постепенное повышение, efficiency

Анимация теперь уже не только область флэш-памяти или наличие — теперь вы можете создавать анимацию в чистом HTML и CSS.К сожалению, CSS3 анимации и переходов не очень хорошая поддержка браузера, но, как и большинство эффектов we’ ве говорили о до сих пор, they’ Re отлично подходит для добавления немного несущественные flair.

CSS3 transitions, по сути, простой тип анимации.Они плавно облегчить изменение от одного CSS значения к другому в течение определенного периода времени.They’ повторно вызвана изменением элемента государства, такие как зависания.They’ Re поддерживает Safari, Chrome и Опера 10.5.

Чтобы создать переход, все, что вам нужно сделать, это указать, какие элементы вы хотите применить переход к которой и CSS свойств будет переход, используя transition-property собственность.You’ будем также необходимо добавить transition-duration значение в секундах (“ s” является блок), так как по умолчанию время перехода принимает значение 0 секунд.Вы можете добавить их обоих в transition собственность стенографии.Вы также можете указать задержку или временные функции более тонко настроить как два значения переключателя.

Переходов легче всего понять с живыми примерами, так что проверить:

За переходы, полноценный animations с несколькими ключевыми кадрами также возможны с CSS3 (но в настоящее время поддерживается только в Safari / Chrome).Во-первых, вы даете анимации имя и определить, что анимация будет делать в разных точках (ключевые кадры, указаны с процентами) через его продолжительность.Далее, вы применить эту анимацию элемента с помощью animation-name animation-duration, а animation-interation-count свойства.Кроме того, можно установить задержку и сроков функции, как с переходами.Для получения дополнительной информации см.:

CSS3 Юзабилити / Читаемость Enhancements

Самые CSS3 методы we’ ве перешли до сих пор были чисто косметический эффект, что помощь прогрессивного улучшения.Но CSS3 также может быть использован для улучшения юзабилити вашего pages.

Создание нескольких Колонны Text
СПИД в: постепенное повышение, adaptability

Некоторые куски текста более удобным для чтения в узком, бок-о-бок колоннами, похожими на традиционные макет газеты.Вы можете сказать, браузер организовать свой текст в columns либо определении ширины для каждого столбца (column-width собственности) или путем определения числа столбцов (column-count собственности).Другие новые свойства, позволяющие управлять желоба / пробелы, правила линий, нарушая между колоннами и распределить между колоннами.(На данный момент, вы должны использовать браузер конкретных префиксы -moz и -webkit). Это еще один из тех методов, которые могут нанести вред вместо помощи удобство при неправильном использовании, как описано в “ CSS3 несколькихколонками считается harmful, ” так что используйте его judiciously.

Подробнее см.:

Управление Перенос текста и Breaking
СПИД в: adaptability

CSS3 дает вам больший контроль над тем, как блоки текста и отдельных слов сломать и обернуть, если they’ повторно слишком длинное и не помещается в контейнеры.Установка word-wrap до break-word сломается длинное слово и обернуть ее на новую строку (особенно удобно для длинные ссылки в тексте). text-wrap собственность дает вам ряд вариантов, где перерывы могут и не могут возникать между словами в тексте.CSS2 white-space собственности имеет в настоящее время в CSS3 стать сокращенное свойство для нового white-space-collapse и text-wrap свойствами, что дает вам больший контроль над тем, что пробелы и разрывы строк сохраняется от вашей разметки отображаются на странице.Еще одно свойство стоит упомянуть, хотяit’ S в настоящее время не в спецификацию CSS3, составляет text-overflow, которое позволяет браузеру добавлять многоточие характера (…) в конце длинной строки текста вместо того, чтобы оно overflow.

Подробнее см.:

Медиа Queries
СПИД в: адаптивность, efficiency

CSS2 позволяют применять различные стили для разных типов носителей — экран, печати и так далее.CSS3′ S СМИ queries принять это еще один шаг вперед, позволяя настроить стиль основан на user’ шириной с просмотра, пропорции дисплея, или нет его дисплей отображает цвета, и многое другое.Например, вы можете обнаружить user’ S ширина окна и изменить турнике NAV в вертикальное меню на широких окнах, где есть место для дополнительных столбцов.Или вы могли бы изменить цвет текста и фона на не-цвета displays.

Screenshot

Screenshot
Этот демо-файл из Opera использует средства массовой информацииЗапросы переставить элементы и изменять размер текста и изображений на основе просмотра size.

Медиа запросов couldn’ т прийти в лучшее время — есть больше разнообразия в устройствах и настройках люди используют, чтобы просматривать веб-страницы, чем когда-либо прежде.Теперь вы можете оптимизировать свои проекты точнее, для этих изменений, чтобы обеспечить более удобный и привлекательный дизайн, но без того, чтобы написать совершенно отдельные таблицы стилей, использование JavaScript редиректов, и других, менее эффективных методов развития.

Медиа запросов поддерживается до некоторой степени все основные браузеры, кроме IE, и есть много больших статей и руководств, объясняющие, как использовать их прямо сейчас:

Медиа-запросы особенно полезным в служении альтернативные стили для маленького экрана мобильного устройства, так как эти статьи и учебники объяснить:

Для других вариантов, как иметь дело с мобильными устройствами см. Мобильный Веб-дизайн Тенденции 2009.

Повышение эффективности путем CSS3

Многие из визуальных свойств CSS3 эффект, что we’ ве перешли есть большой бонус в дополнение к вашему дизайну выглядят: они могут повысить эффективность, как в процессе развития и в исполнении страниц themselves.

Любое свойство CSS3, который держит вас от необходимости создавать и добавлять дополнительные изображения собирается сократить время, необходимое вам для создания новых страниц, а также повторное кожи существующих.Менее изображения также означать меньше материала для серверов, чтобы отправить и меньше материала для пользователей загружать, оба из которых увеличение скорости загрузки страниц.

CSS3 свойства, которые держат вас от того, чтобы добавить дополнительную div S или дополнительные занятия могут также уменьшить время разработки, а также размер файла.We’ ве уже перешли некоторые большие приемов, которые помогут с этим, но есть еще несколько стоит упомянуть.

box-sizing Property
СПИД в: efficiency

В дополнение к div с сохранением свойств we’ ве уже говорили, box-sizing собственности также может помочь ограничить div использования в определенных situations.

В традиционной модели окна W3C из CSS 2.1, значение вы объявляете для ширины или высоты контролирует ширину или высоту Содержание area только, а затем отступы и границы, added на него.(Это называется контент-окна модели.) Если you’ ве работал с CSS на некоторое время, you’ Re вероятно, использовались для содержания коробке модели и don’ т действительно много думать об этом.Но, это может привести вас, чтобы добавить дополнительную div S время от времени.Например, если вы хотите установить box’ ширину и обивка в различных единицах измерения друг от друга, как EMS для ширины и пикселей для заполнения, it’ S часто легче всего гнездятся еще div и применять обивкак этому вместо того, чтобы убедиться, что вы знаете, сколько общая площадь окна будет занимать.В малых дозах вложения дополнительных div ы просто добавить обивка или границ не является большим грехом.Но в сложных конструкций, количество дополнительных div S действительно может добавить вверх, который добавляет к обеим развития вашегоВремя и размер файлов HTML и CSS.

Установка нового box-sizing собственность border-box вместо content-box решает эту проблему, так что вы можете избавиться от всех лишних div с.Когда окно используется границу коробке модели, браузер subtract отступы и границы от ширины окна, а не добавлять его.Вы всегда знаете, что общая площадь окна занимает равна ширине значение you’ веdeclared.

Screenshot
В традиционной модели коробки (нижний рисунок), отступы и границы добавляются на заявленную ширину.Путем установки box-sizing до border-box (верхний рисунок), отступы и границы вычитается из заявленных width.

box-sizing собственности имеет хорошие браузере support, за исключением IE 6 и IE 7.В отличие от более декоративными свойствами CSS3, однако, отсутствие поддержки box-sizing могут привести весь макет разваливаться.You’ будете иметь, чтобы определить, насколько серьезна эта проблема будет в вашем конкретном случае, будь it’ S стоит жить с или взлома, или же вы должны избегать использования box-sizing для now.

Подробнее см.:

CSS3 псевдо-классов и атрибутов Selectors
СПИД в: постепенное повышение, эффективность, модульность, богатые typography

CSS имеет несколько действительно полезных selectors, которые только сейчас вступает в общем пользовании.Многие из них являются новыми в CSS3, а другие были вокруг с CSS2, просто не поддерживается всеми браузерами (читай: IE) до недавнего времени, и таким образом в значительной степени игнорируются.IE по-прежнему doesn’ T поддерживает их все, но они могут быть использованы для добавления несущественным визуальное effects.

Используя эти новые, более продвинутые селекторы могут улучшить свою эффективность и сделать страницы более модульным, потому что они могут уменьшить необходимость много дополнительных классов, div S и span S, чтобы создать эффекты, которые вы хотитевидеть.Некоторые селекторы даже сделать определенные эффекты возможно, что вы can’ т делать с классами, такие как укладка первой строке текстового блока по-разному.Эти типы визуальных эффектов может улучшить типографику вашего сайта и помочь прогрессивному enhancement.

Подробнее см.:

Читать эти статьи и учебники для примера, как поставить передовые селекторы для практического использования прямо сейчас:

HTML5

Хотя эта статья ориентирована на современные технологии CSS, вы can’ T имеют большой CSS основе веб-страниц без больших разметки позади них.Хотя HTML5 еще находится в разработке, и, хотя продолжаются споры о ее сильные и слабые стороны, некоторые веб-разработчики уже используют ее в своих веб-страницах.В то время как HTML 4.01 и XHTML 1.0 все еще лучший выбор для разметки веб-страниц, it’ хорошая идея, чтобы начать изучать то, что HTML5 может предложить, чтобы вы могли работать с ней удобно в будущем и, возможно, начать воспользоваться некоторые из его особенностейс …

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

Главная → Программирование → by

Comments are closed.