Если вы хотите создавать визуально привлекательные и привлекательные веб-сайты , то освоение CSS3 — хороший первый шаг. Многие из новых функций упрощают дизайн и дают больше свободы творчества при выборе стилей. Используйте этот список руководств, ресурсов, советов и справочной информации, чтобы быстро изучить новые стандарты CSS3,
Знакомство с CSS3
В некотором смысле CSS3 представляет собой изменение в том, как вводятся, определяются и реализуются веб-стандарты. Однако в основе своей цель CSS3 такая же, как и цель CSS в целом — улучшить внешний вид и макет веб-страницы, чтобы повысить удобство работы пользователя.
Связь CSS3 с HTML 5
Основная концепция HTML5 заключается в том, что веб-стандарты развиваются, и язык разметки тоже должен развиваться — вместо того, чтобы использовать более строгий подход к определению того, какими должны быть веб-стандарты . Поскольку Интернет перешел к большему количеству визуальных и звуковых элементов, HTML5 и его аналог CSS3 по стилю попытались не отставать от этой тенденции, добавив в язык больше тегов «реального мира». С введением в HTML5 таких тегов, как <nav> или <audio> в HTML5, дизайнерам стало проще создавать стили CSS3, полностью использующие возможности тега и его атрибутов.
Представленные ключевые концепции
- Размещение нескольких вариантов отображения. Теперь дисплей должен соответствовать более широкому спектру устройств. Введение медиа-запросов во многом связано с огромным количеством вариантов отображения, для которых сайты должны быть разработаны — от смартфонов до больших HD-мониторов. Эта функция позволяет получить доступ к сайту и соответствующему стилю, чтобы сайт отображался в том виде, в котором он разработан, на любом данном устройстве.
- Тонкая настройка внешнего вида сайта: дизайнеры должны иметь возможность тонкой настройки внешнего вида сайта до необходимой им глубины. Концепция селекторов атрибутов основана на идее предоставления веб-дизайнеру дополнительных возможностей отображения. Теперь дизайнер может точно настроить внешний вид сайта, создав селекторы различных уровней с помощью функции селекторов атрибутов. Другим методом, который допускает эту возможность, являются псевдоклассы. Они существовали с самого начала CSS, но в CSS3 появилось 16 новых, основанных на идее динамического стиля содержимого.
Модули
Одно из наиболее важных изменений, внесенных в CSS3, больше связано с протоколом утверждения, чем с фактическими элементами дизайна. CSS3 ввел в процесс модули, разбив различные атрибуты CSS на логические блоки информации. Это изменение должно выполнить как минимум две важные вещи:
- Упростите утверждение текущих изменений в стандартах CSS
- Более систематическая поддержка браузеров (поскольку поставщики могут расставлять приоритеты, какие модули внедрять в первую очередь)
Ключевые изменения
Медиа-запросы
Идея типов мультимедиа была впервые представлена в CSS2 — и по большей части единственным типом, который действительно прижился, был тип мультимедиа print. Идея заключалась в том, чтобы нацелить конкретную таблицу стилей на тип носителя. Медиа-запросы расширяют эту концепцию, но вместо того, чтобы искать тип мультимедиа, например печать, он ищет возможности устройства. Например, он будет искать следующую информацию:
- Ширина и высота устройства
- Ширина и высота браузера
- Ориентация устройства (альбомная или портретная)
- Разрешение экрана
С помощью этой функции теперь вы можете создавать стили для устройства в зависимости от возможностей этого устройства. Если количество стилей, которые вы хотите изменить, минимально (для мобильного устройства по сравнению со стандартным сайтом), вы можете включить стили в свою основную таблицу стилей. Однако, если изменения существенны, лучше создать новый.
При использовании медиазапросов вам необходимо учитывать, как вы хотите, чтобы ваш сайт отображался на мобильном устройстве. Например, некоторые общие различия между основным сайтом и мобильным сайтом заключаются в размере заголовка. Размер должен быть значительно уменьшен для мобильного устройства. Навигация и контент, как правило, располагаются вертикально на мобильных устройствах, чтобы упростить доступ к контенту.
Если стиль вашего основного сайта выглядит так:
раздел # заголовок {
фоновое изображение: URL-адрес (большой-bg-image.jpg);
высота: 200 пикселей;
положение: родственник;
}
Вы можете создать особый стиль для мобильного устройства, исходя из его максимальной ширины, например так:
Экран @media и (max-device-width: 480px) {
раздел # заголовок {
фоновое изображение: URL-адрес (small-bg-image.jpg);
высота: 75 пикселей;
положение: родственник;
}
Переходы
Эта функция позволяет добавлять к элементу эффект, подобный Flash, без использования Flash или даже JavaScript. Чтобы использовать свойство Transition, вам сначала нужно указать свойство CSS, к которому вы хотите добавить эффект, и указать продолжительность (время) эффекта. В этом примере стиль блока прикреплен к тегу div. Стиль коробки сочетает в себе несколько типов перехода — ширина, высота, цвет фона и преобразование.
Чтобы увидеть, как это работает, поместите этот код между тегами <body> вашей HTML-страницы.
<div class=»box»></div>
Затем добавьте эти стили в свою таблицу стилей.
.коробка {
стиль границы: сплошной;
ширина границы: 5px;
дисплей: блок;
ширина: 100 пикселей;
высота: 100 пикселей;
цвет фона: #ff0000;
-webkit-transition: ширина 2 с, высота 2 с, цвет фона 2 с, -webkit-transform 2 с;
переход: ширина 2 с, высота 2 с, цвет фона 2 с, преобразование 2 с;
}
.box:наведите {
цвет фона: #00ffff;
стиль границы: сплошной;
ширина границы: 1px;
ширина: 200 пикселей;
высота: 200 пикселей;
-webkit-transform: поворот (270 градусов);
преобразование: поворот (270 градусов);
}
Когда вы наводите курсор на поле на своей HTML-странице, поле будет постепенно вращаться, в то же время медленно меняя цвета. Переходы можно использовать для создания мощных эффектов на вашем сайте, таких как привлекательное навигационное меню .
Расширенные селекторы
Одним из наиболее часто упоминаемых селекторов, представленных в CSS3, является селектор nth-child . Этот селектор позволяет нацеливать стили на определенный элемент, поэтому, если, например, вам нужны альтернативные цвета для элементов в упорядоченном списке, вы можете нацеливать их либо на четные, либо на нечетные — или путем выбора номера строки.
Чтобы создать упорядоченный список с чередующимися строками белого и серого цветов, вы должны просто оформить их следующим образом:
li: nth-child (нечетный) { цвет: #fff; }
li: nth-child (четный) { color: #ccc; }
или выбрать определенную строку, в данном случае строку 6, и изменить ее на красный цвет:
li:nth-of-type(6) { цвет: красный; }
Вы также можете стилизовать первый или последний элемент с помощью CSS3, используя первый тип {li:first-of-type} или последний тип {li:last-of-type}.
Границы и текст
CSS3 также упростил создание закругленных границ. То, что раньше требовало фоновых изображений, теперь можно выполнить с помощью свойства border-radius . Вы можете закруглить один или все углы коробки. Новый стандарт также делает хороший шаг вперед в сохранении шрифта, который вы выбрали для дизайна своего сайта. Используя правило @font-face , теперь вы можете убедиться, что ваш шрифт используется при отображении страницы в браузере вместо шрифта по умолчанию на компьютере пользователя.
Начало работы с CSS
Если вы новичок в CSS, а не являетесь опытным пользователем CSS, который хочет освоить новые функции CSS3, начните с общего руководства.
- В бесплатных учебниках , предлагаемые W3Schools являются отличным местом , чтобы начать. Эти уроки позволяют вам задать свой собственный темп, а с их опцией редактора «попробуйте сами» вы можете полностью освоить концепцию, прежде чем двигаться дальше.
- «Начало работы с CSS» от Mozilla Developer Network — еще один отличный бесплатный источник для обучения начального уровня. Их уроки рассчитаны на новичков.
Учебники по общим элементам веб-страницы
Если вы хотите узнать, как удивить посетителей вашего веб-сайта, есть ряд общих областей веб-страницы, которые вы можете улучшить с помощью CSS3. Ваши улучшения могут быть как простыми, так и сложными по вашему выбору, поскольку каждое из перечисленных ниже руководств предоставляет вам кодирование CSS3.
- Навигация : CSS3 открывает множество возможностей дизайна с навигацией по меню. Вы можете относительно легко усилить выпадающие меню или меню в плоском стиле. Создайте раскрывающееся меню в стиле Mac , используя свойства CSS3 box-shadow, text-shadow и border-radius. Меню также хорошо ухудшается для веб-браузеров, не совместимых с CSS3. Используйте селектор nth-child, появившийся в CSS3, чтобы создать стильное меню навигации в плоском стиле или оформить кнопки навигации в виде пиктограмм .
- Работа с изображениями . Фотографии являются неотъемлемой частью почти каждого веб-сайта, но слишком многие сайты попадают под влияние простого размещения изображения на странице. Вы можете оживить отображение изображений, используя такие методы, как наложение фотографий или создание галерей с изображениями, которые перемещаются, исчезают или вращаются . Раньше для этих методов требовался Flash или JavaScript, но теперь их можно обрабатывать с помощью таблицы стилей.
- Крутые трюки с текстом: скрытие и отображение текста в стиле аккордеона не обязательно является новой концепцией, но теперь с ним можно обращаться проще. Вы можете придать своему тексту трехмерный вид с помощью свойства text-shadow или сделать еще один шаг вперед с помощью свойства hover и создать текст, который кажется выскакивающим из страницы .
- Специальные эффекты : создавайте речевые пузыри, чтобы окружить часть текста на странице и создать интересный элемент дизайна . Если вы хотите в полной мере оценить, какие спецэффекты можно создать исключительно с помощью CSS3, посетите демонстрацию CSS3 Бена Листера, используя браузер без Internet Explorer, такой как Chrome, и нажмите «Тест совместимости с IE». За тем, как распадается страница, интересно наблюдать.
Дополнительные ресурсы
Один из самых быстрых способов освоить новые функции, помимо пошаговых руководств, — это читать экспертов или использовать инструменты, которые генерируют код, поэтому вы концентрируетесь на том, какое действие связано с определенным стилем.
Где найти помощь
- Книги : Несколько книг на рынке объясняют преимущества CSS3 и его возможности. Пара книг, на которые следует обратить внимание: Stunning CSS3 : проектное руководство по последним достижениям в CSS и The Book of CSS3 : A Developer’s Guide to the Future of Web Design. Если вы серьезно относитесь к освоению веб-дизайна, вы также можете заглянуть в книги, посвященные теории CSS и HTML.
- Курсы : W3Schools предлагает хороший бесплатный вводный курс по CSS3. На сайте также есть курсы по CSS, HTML и HTML5, а также по веб-дизайну и веб-стандартам. Ed2Go предлагает платный курс (89 долларов США), который сочетает в себе HTML5 и CSS3.
- Сообщества . Интернет-сообщества — отличные ресурсы для изучения веб-дизайна и/или CSS3. Попробуйте CSS Globe .
Уроки
- Mashable : узнайте, как улучшать или создавать гистограммы, кнопки и меню в списке семи крутых приемов Mashable.
- WDL : узнайте, как скрывать и отображать контент в стиле аккордеона, создавать слайдер изображений, календарь и многое другое в этом списке из 20 уроков.
- 1stWebDesigner : Используйте этот список из 50 уроков, если вы хотите узнать, как использовать различные функции CSS3, ориентированные на текст. Узнайте, как вращать и искривлять текст, создавать текстовый градиент или тень, создавать облака тегов или — просто для удовольствия — создавать эффект прыгающего мяча, используя только три функции CSS3.
Генераторы
- CSS3Gen : простая навигация делает его одним из лучших генераторов CSS3 в Интернете. Чтобы использовать этот инструмент, выберите нужную функцию на своем сайте, например тень блока. Вы будете перенаправлены на страницу с генератором, который позволит вам установить все свойства. Закончив работу над дизайном, вы можете скопировать код, отображаемый под инструментом, и вставить его в свою таблицу стилей.
- CSS 3.0 Maker : Преимущество этого инструмента в том, что все, что вам нужно для создания таблицы стилей, находится на одной странице. Вы выбираете функцию, которую хотите создать, настраиваете ее с помощью инструмента, отображаемого в верхнем левом углу страницы. Когда закончите, загрузите код, нажав на ссылку в правой части страницы.
Ссылка
- Справочник по CSS : на этой странице, созданной Mozilla Developer Network, перечислены все свойства, классы и функции CSS, на которые вам когда-либо понадобится ссылаться. Перечисленные в алфавитном порядке, просто нажмите на функцию, чтобы открыть страницу, содержащую определение, синтаксис, поддержку браузера, значения и (если применимо) примеры свойства.
Мощный инструмент
CSS3 — это мощный инструмент для веб-дизайнеров и разработчиков. Потратьте время на изучение общих руководств, а также уроков, посвященных конкретным функциям, — это лучший способ освоить и отточить свои навыки, узнать, как работают функции, и как их реализовать.