Шпаргалка по CSS3: основные компоненты
Development | Комментировать запись
В веб-дизайне и разработке (впрочем, как и в практически любой области знания), нужно развиваться, идти в ногу со временем. Особенно важно следить за новыми функциями наиболее часто используемых инструментов, например CSS. CSS3, последняя спецификация CSS, имеет несколько новых функций, которыми дизайнеры должны научиться пользоваться.
Самым большим и важным изменением в CSS3, безусловно, является модульность процесса утверждения спецификации. Это подразумевает, что каждая секция в CSS3 (границы, тень блока, изображения и т.д.) имеет свой собственный модуль. Следовательно, их можно утверждать индивидуально и разрабатывать отдельно.
Таким образом, актуальные обновления выходят чаще, они быстрее удовлетворяют потребности сообщества и разработчиков браузеров. Кроме того, браузерам проще отслеживать новые стандарты, потому что они выходят по частям, а не сразу – а это меньше беспокойства о том, как контент выглядит в разных браузерах и на разных платформах.
В данной области есть ряд специалистов, которые сегодня уже больше похожи на динозавров, чем на дизайнеров. Не будьте динозавром, застрявшим в устаревших и скучных методах. Усовершенствуйте свои проекты и воспользуйтесь преимуществами новейших технологий. Здесь мы расскажем о новых возможностях CSS3.
Анимация переходов
Долгое время дизайнеры были вынуждены использовать Adobe Flash и JavaScript для анимации переходов между изображениями. Больше этого делать не надо: прошли времена уродливых, часто безвкусных переходов Flash и сложных JS-анимаций. Благодаря CSS3 дизайнеры могут использовать чистое и легкое решение на стороне браузера (вместо массивного метода на стороне сервера). Существует два основных способа создать переход. Первый и наиболее простой способ: создать объявление перехода и запускать эффекты при помощи движения или наведения мыши, а также запускать анимацию с помощью простого изменения JS. В качестве альтернативы вы можете использовать правило @keyframe, оно позволяет указать определенные изменения в анимации, которые не требуют ввода пользовательских данных. Подробнее о переходах CSS3 можно прочитать здесь.
Градиенты
Устали возиться в Photoshop, пытаясь получить правильный градиент для кнопок? Вы не одиноки. К счастью, теперь и этого делать больше не нужно! Теперь CSS позволяет дизайнерам создавать красивые градиенты, которые отлично смотрятся на любом дисплее. А самое приятное – это то, что все это находится в красивом, легком CSS-файле, который поддерживается всеми браузерами и не требует тяжелых, ресурсоемких изображений. На самом деле градиенты в CSS существуют уже некоторое время, но только сейчас они стали поддерживаться всеми браузерами. Сегодня в CSS доступны радиальные и линейные повторяющиеся и неповторяющиеся градиенты, и, вероятно, скоро их станет больше.
Читайте также:
3D-преобразования
Давайте будем честными, иногда люди делают что-то только ради того, чтобы показать свое превосходство над менее опытными коллегами, и дизайнеры – не исключение. Если вы узнали себя, обратитесь к 3D-преобразованиям CSS3 – они помогут вашей работе выделиться на фоне остальных. Не стоит недооценивать легкий блеск в дизайне, особенно если вы хотите выделиться из толпы других дизайнеров.
Закругленные края кнопок
Закругленные углы кнопок смотрятся отлично. Они выглядят естественно. И они исторически были занозой для любого дизайнера. Кроме того, использование изображений могло быстро увеличить размер файла. Наконец-то кнопкам можно придать естественные закругленные края без лишнего кода! Используйте свойство CSS3 border-radius для создания простых закругленных краев, которые не влекут за собой лишней возни со свойствами высоты и ширины и не ломаются при изменении контента или местоположения. Давайте взглянем на пример.
CSS:
.box {
border: 2px solid orange;
border-radius : 25px;
width: 100px;
padding: 10px;
text-align:center;
}
HTML:
`<div class='box'>Submit</div>`
Свойство border-image
Наверняка вы часами просиживали в Photoshop и еще больше времени тратили на то, чтобы сделать рамку отзывчивой, потому что все стандартные варианты были непривлекательны, а вам хотелось сделать красивую рамку вокруг div или изображения. Теперь вы ограничены только вашим воображением и навыками Photoshop/Illustrator: в CSS3 вы можете легко создавать спрайты и применять их с помощью свойства border-image. Это позволит вам быстро и легко создавать красивые рамки, не тратя часы на их настройку.
Веб-шрифты
Кажется, еще вчера дизайнеры были вынуждены сверяться с таблицами и списками «безопасных» шрифтов. К счастью, те дни уже позади. Правило @font-face позволяет использовать сервисы типа Google Web Fonts и typekit для включения любого шрифта, который вы могли себе представить. Для этого достаточно просто включить новую таблицу стилей. Это означает, что ваш выбор типографики больше не ограничивается шрифтами, к которым может иметь доступ ваш конечный пользователь. Кроме того, больше не нужно указывать 12 различных семейств шрифтов, чтобы убедиться, что ваш текст не отображается уродливым стандартным шрифтом.
Столбцы CSS
Хотите сверстать текст в адаптивном макете со столбцами? Не так давно для этого было несколько вариантов. Во-первых, можно было использовать таблицу (и тем самым вызвать на себя гнев и ненависть всех других дизайнеров в мире). Во-вторых, можно было использовать JS для переноса вашего контента в div (и ненавидеть себя, ведь этот мучительный процесс займет невозможное количество времени). Однако теперь нам не нужны никакие таблицы или компромиссы! Вы можете просто использовать правило columns – и все. Единственная проблема, с которой вы можете столкнуться: такой текст может по-разному отображаться в разных браузерах (но поскольку Internet Explorer уходит в прошлое, похоже, эта проблема также скоро перестанет существовать).
Селекторы
Возможно, самое главное обновление – это новые селекторы CSS. Подробно рассказать о них всех в рамках маленькой шпаргалки невозможно, поэтому мы выделим только основные моменты (а с полным списком вы можете ознакомиться самостоятельно здесь). Мы по-прежнему можем использовать старые селекторы CSS2, но теперь у нас есть несколько новых правил. Все они сводятся к возможности выбирать элементы DOM на основе значений их атрибутов вместо указания идентификаторов и классов для каждого элемента. То есть теперь вы можете стилизовать их, просто основываясь на поле их атрибута.
Читайте также: Шпаргалка по CSS: основные селекторы
Tags: CSS, CSS3