Сss3 свойства

От автора: я приветствую вас на нашем блоге Webformyself, посвященном созданию сайтов. Сегодня мы говорим о технологии CSS3, а именно хотелось бы рассмотреть, что нового в ней появилось. Итак, сегодня я опишу некоторые css3 свойства.

Небольшое отступление

Работу всех свойств, которые мы сегодня рассмотрим, я буду демонстрировать на простом блочном элементе. Я задал ему ширину 300 пикселей и высоту 200.

Закругление углов

Итак, начнем с этого очень полезного параметра, которое позволяет закруглить углы и блоков. Ведь по умолчанию они прямоугольные, а это не всегда нужно по дизайну. Раньше подобные закругления реализовывались с помощью дополнительных фоновых картинок. Что ж, теперь можем радоваться, что все так заметно упростилось. Теперь достаточно записать следующее:

Соответственно, чем больше значение, тем больше закругление. Его необязательно задавать в пикселях – можно также в процентах или em-единицах. Также зависит от размеров блока. Если элемент квадратный, то его можно превратить в круг. Для этого нужно задать закругление в 50% или в половину пикселей от его ширины.

Закруглять можно для каждой отдельной стороны. Для этого используются правила border-top-left-radius, border-bottom-right-radius и т.д. Лично мне не нравится ими пользоваться, потому что запись получается громоздкой, хотя когда нужно определить закругление только с одной стороны, это может быть уместно.

Другой вариант определить значения отдельно для каждого угла, это записать четыре значения в border-radius. Значения поочередно устанавливаются для верхнего левого, верхнего правого, нижних левого и правого углов. Пожалуй, это единственное, что вам следует запомнить.

Конечно, поскольку свойство является частью спецификации CSS3, для кроссбраузерности разумно использовать его с вендорными префиксами. Возможно, вы сами знаете их. Это –moz, -o, -ms и –webkit. Соответственно, для поддержки в мозилле, опере, IE и Хроме, а точнее, в старых версиях этих веб-обозревателей, потому что новые браузеры уже понимают свойство и без префиксов. Эти же самые префиксы можно использовать и со всеми другими свойствами из версии CSS3, поэтому дальше я на этом вопросе останавливаться не буду.

Градиенты: линейные и радиальные

Еще одно большое нововведение CSS3, о котором можно было бы написать отдельную книгу, потому у градиентов очень много разных параметров. Но они не создаются каким-то новым свойством, они всего лишь расширяют возможности фона. Чтобы их использовать, достаточно в свойстве background или background-image написать: linear-gradient() или radial-gradient().

В общем, вот пример простейшего градиента:

Соответственно, мы тут задали направление градиента (вправо) и также два цвета. Переход происходит от голубого к желтому, что мы и видим на данном примере. Обычно цвет задаются hex-кодом или в режиме rgb. Если использовать rgba, то градиент можно сделать полупрозрачным. Кстати, полупрозрачность является еще одной особенностью css3.

Прозрачность

Свойство opacity позволяет задать прозрачность нужного элемента. Принимаются значения от 0 до 1, где 1 – полная непрозрачность. При значении 0, соответственно, элемент не виден на странице, но он остается на своем месте и занимает его. Применим к блоку это свойство:

Теперь его едва видно. Нужно сказать, opacity действует на весь элемент в целом, а не только на фон. То есть, если бы в нашем блоке был текст, то он тоже стал бы нечитаемым, а этого допускать нельзя. Поэтому в текстовых блоках обычно используют цветовой режим rgba как альтернативу. Opacity же удобно применять для скрытия/появления элементов.

Тени

Конечно, нужно упомянуть также тени, потому что для их добавления в css3 предусматривается аж 3 свойства, и каждое имеет свои особенности. Все тени имеют общие параметры, такие, как смещение по горизонтали, по вертикали, размытие и цвет. Растяжение задается только для box-shadow. Ах да, а теперь я перечислю все:

Тут я прописал префикс –webkit и теперь в Хроме все работает. Без префикса ничего не отображало. Drop-shadow также не поддерживает растяжение. Как видим, никаких отличий в этом случае с box-shadow нет, но если вы попробуете применить этот фильтр к png-изображениям, то сможете получить тень, идентичную им по контурам, а не просто квадратную. Вот здесь и заключается основное преимущество, остается дождаться нормальной поддержки.

Трансформации

Да, это еще одна отдельная группа новых css3 свойств. Вернее, даже параметров, а не свойство, потому что оно-то используется одно (transform), а вот возможностей дает много. Работает transform примерно так же, как и filter, но имеет более полную поддержку. Основные возможности трансформаций:

Смещение элемента по горизонтали, вертикали, с помощью transform: translateX (translateY для смещения по вертикали). Поворот элементов на нужное количество градусов – transform: rotate(45deg). Принимаются значения от 0 до 360 и отрицательные.

Наклон элементов с помощью skew. Тоже задается в градусах.

Возможность управления размерами блоков с помощью scale. Можно задавать только ScaleX или scaleY для увеличения элемента только по ширине или высоте соответственно. Обычно используется в сочетании с плавными переходами.

Плавные переходы

Раз уж мы их затронули, то скажу, что для их реализации достаточно использовать одно свойство – transition, которому указать время, в течении которого произойдет изменение стилей. Обычно ставят 0.5-2 секунды, хотя можно и в миллисекундах.

На самом деле transition поддерживает гораздо больше параметров, которые можно определить, но об этом я не буду вам сегодня рассказывать, уж слишком много текста это может занять.

Итак, мы рассмотрели если не все, то большинство основных свойств. Помимо них, в CSS3 появились и новые селекторы. Обо всем этом более подробно вы можете узнать в нашем премиум курсе по CSS3, где также поднимается вопрос о кроссбраузерности новых свойств.

Комментарии Вконтакте: