Reg.ru: домены и хостинг
Крупнейший регистратор и хостинг-провайдер в России.
Более 2 миллионов доменных имен на обслуживании.
Продвижение, почта для домена, решения для бизнеса.
Более 700 тыс. клиентов по всему миру уже сделали свой выбор.
Бесплатный Курс "Практика HTML5 и CSS3"
Освойте бесплатно пошаговый видеокурс
по основам адаптивной верстки
на HTML5 и CSS3 с полного нуля.
Фреймворк Bootstrap: быстрая адаптивная вёрстка
Пошаговый видеокурс по основам адаптивной верстки в фреймворке Bootstrap.
Научитесь верстать просто, быстро и качественно, используя мощный и практичный инструмент.
Верстайте на заказ и получайте деньги.
Бесплатный курс "Сайт на WordPress"
Хотите освоить CMS WordPress?
Получите уроки по дизайну и верстке сайта на WordPress.
Научитесь работать с темами и нарезать макет.
Бесплатный видеокурс по рисованию дизайна сайта, его верстке и установке на CMS WordPress!
*Наведите курсор мыши для приостановки прокрутки.
CSS 3 на полную катушку
В данной статье мы познакомимся с возможностями новой технологии оформления HTML документов - CSS 3. Данная технология еще находится на стадии разработки, но, тем не менее, уже давно активно используется многими разработчиками.
Следовательно, напрашивается первый вопрос: технология новая, значит не кроссбраузерная? Стоит ли мне ее использовать?
Это пара из множества других вопросов, которые может задать себе каждый. Отвечу я Вам следующее: прогресс не стоит на месте, и новые технологии нужно знать, внедрять в свои проекты.
Пользователей со старыми версиями браузеров по статистике очень маленький процент, и совсем не рационально подстраиваться именно под них.
Для них же это лишний повод обновить свой браузер до новой версии. Я думаю, единственным важным критерием в принятии решения использования нового подхода может стать ТЗ на Ваш проект, которое будет требовать от Вас поддержки его в старых браузерах, но, как показывает практика, большинство заказчиков и разработчиков активно ориентируются на новую технологию CSS 3. Выбор за Вами!
Подробнее о CSS 3…
Использование технологии CSS 3 значительно упрощает стилизацию и сам подход к стилизации любого веб-сайта. В данную версию были включены новые свойства, которые позволят Вам:
1. Создавать элементы со скругленными углами;
2. Разнообразно стилизовать элементы, текст, надписи на веб-странице, применяя к ним тени;
3. Задавать цвета в новом формате;
4. Использовать любые шрифты, которые буду успешно отображаться, даже если их нет на компьютере конечного пользователя;
5. Устанавливать прозрачность элементам на странице;
6. Создавать всевозможные фоновые градиенты;
7. Применять переходы к свойствам элементов, достигая плавного отображения различных свойств (изменение цвета, позиции и т.д.);
8. Применять анимацию к элементам;
9. Применять трансформацию к элементам;
10. Разбивать большой текст на необходимое количество столбцов, подобно газетному варианту.
Итак, рассмотрим каждый пункт.
1. Скругленные углы
Часто, в оформлении дизайна сайта используются скругленные углы у различных элементов. CSS 3 предоставляет удобное свойство border-radius, которое позволяет скруглять углы любого блока по заданному параметру. Свойство принимает единственный параметр - радиус скругления в px. Например:
div{
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
}
Для поддержки свойства border-radius браузеры FireFox, Chrome, Safari используют специальные префиксы, подставляемые к данному свойству: -webkit-, -moz-. Не забывайте.
Что же касается IE ниже 9 версии, есть хорошее решение - border-radius.htc. Для его использования скачиваем себе данный фикс и подключаем к нашим свойствам блока таким образом:
div{
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
behaviol: url(border-radius.htc);
}
Также мы может задать нужное скругление каждому из четырех углов блока. Делается это таким вот образом:
div{
border-top-left-radius: 8px;
border-top-right-radius: 40px;
border-bottom-left-radius: 40px;
border-bottom-right-radius: 8px;
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 40px;
-webkit-border-bottom-left-radius: 40px;
-webkit-border-bottom-right-radius: 8px;
-moz-border-top-left-radius: 8px;
-moz-border-top-right-radius: 40px;
-moz-border-bottom-left-radius: 40px;
-moz-border-bottom-right-radius: 8px;
behaviol: url(border-radius.htc);
}
2. Тени
В CSS 3 тени можно применять как к тексту, используя свойство text-shadow, так и к другим блочным элементам, используя свойство box-shadow.
Text-shadow:
div{
text-shadow: 1px 2px 3px #000;
}
Данное свойство принимает 4 параметра: сдвиг тени по оси X, сдвиг тени по оси Y, размытие тени в px, цвет применяемой тени.
Дополнительно можно задавать несколько теней тексту. Это достигается путем перечисления всех значений свойств через запятую.
div{
text-shadow: 1px 2px 3px #000, 0px -2px 2px red;
}
Box-shadow:
Блоку можно задавать как внешнюю, так и внутреннюю тень, с помощью свойства box-shadow. Рассмотрим для начала добавление внешней тени к блоку:
div{
box-shadow: 0px 3px 6px #000;
}
Свойство принимает 4 параметра: сдвиг тени по оси X, сдвиг тени по оси Y, размытие тени в px, цвет применяемой тени. Принцип аналогичен добавлению тени к тексту, о котором я рассказывал выше.
Теперь рассмотрим добавление внутренней тени к блоку:
div{
box-shadow: inset 0px 3px 6px #000;
}
Как видите, чтобы добавить внутреннюю тень, необходимо указать дополнительный параметр inset в начале свойства.
Дополнительно можно задавать несколько теней одному и тому же элементу. Это достигается путем перечисления всех значений через запятую, как и в случае с текстовой тенью.
div{
box-shadow: inset 0px 3px 6px #000, inset 2px 0 3px red;
}
3. Цвета в новом формате HSL
HSL - формат цвета, с помощью которого Вы можете задавать оттенок, яркость, насыщенность.
div{
background-color: hsl(30,60%,50%);
}
Свойство принимает 3 параметра: hsl (градус положения цвета, насыщенность цвета, яркость цвета).
Параметр градус положения цвета задается в градусах относительно цветового круга, расположенного на рисунке ниже:
где красный - это 0 градусов, а оранжевый - 90 градусов. Относительно таких координат и выбирается цвет.
Параметр насыщенность цвета задается в процентах: чем ниже процент, тем цвет более блеклый. Параметр яркость цвета задается в процентах значением от 0% (темный) до 100% (светлый).
4. Используйте любые шрифты на Вашем сайте!
Когда мы применяем нестандартные шрифты для своего сайта, то беспокоимся о том, что у пользователя на компьютере их может просто не оказаться.
Конечно, можно указать альтернативный шрифт про замену, например, тот же Verdana или Tahoma. Но, бывают сайты, где нужно применять именно уникальные красивые шрифты, не подлежащие стандартной подмене.
Так вот, в CSS 3 свойство @font-face служит для уникальной загрузки необходимых шрифтов для вашего сайта, которые будут автоматически подгружены на странице у любого пользователя Вашего ресурса.
Выбранный шрифт нужно просто разместить на сервере и подключить таким образом:
@font-face{
font-family: 'romic';
src: url('romic.ttf'), url('romic.eof');
}
Шрифт подключается в двух форматах - .ttf и .eof для обеспечения кроссбраузерности данного свойства.
5. Прозрачность элементов
Любому элементу на веб-странице можно установить прозрачность с помощью свойства opacity, с параметром от 0 (невидимый) до 1 (исходная прозрачность, установленный цвет). Например, opacity: 0.5 сделает элемент полупрозрачным.
div{
opacity: 0.5;
}
Для решения проблемы с прозрачность в любимом IE, используется свойство filter c указанием значения прозрачности alpha в пределах от 0 до 100.
div{
opacity: 0.5;
filter: alpha(opacity=50);
}
6. Градиенты
CSS 3 позволяет нам создавать свои уникальные градиенты, без использования фоновых целых или дублированных изображений.
Градиент задается с помощью метода linear-gradient (линейный градиент) или radial-gradient (сферический градиент) свойства background-image.
Linear-gradient
div{
background-image: linear-gradient(left,#FFEFD5 0%,#FFEBCD 30%,#FFE4C4 60%);
background-image: -webkit-linear-gradient(left,#FFEFD5 0%,#FFEBCD 30%,#FFE4C4 60%);
background-image: -moz-linear-gradient(left,#FFEFD5 0%,#FFEBCD 30%,#FFE4C4 60%);
background-image: -o-linear-gradient(left,#FFEFD5 0%,#FFEBCD 30%,#FFE4C4 60%);
background-image: -ms-linear-gradient(left,#FFEFD5 0%,#FFEBCD 30%,#FFE4C4 60%);
}
Как видите, с помощью данного свойства мы получили такой легкий и приятный трехцветный линейный градиент.
Не забывайте указывать специальные префиксы методу linear-gradient для поддержки браузерами. Для создания градиента в браузере IE ниже 9 версии используется свойство filter:
div{
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFEFD5', endColorstr='#FFE4C4',GradientType=0 );
/*если GradientType равен 0, то это относится в линейному градиенту, если 1, то к радиальному.*/
}
Для IE 9 добавьте класс gradient элементу на странице, к которому применяется градиент, и в между тегами head добавьте следующее переопределение для полной поддержки свойства:
<!--[if gte IE 9]>
<style type="text/css">
.gradient {
filter: none;
}
</style>
<![endif]-->
Метод linear-gradient получает следующие параметры: направление градиента, цвет градиента и его положение.
Параметр направление градиента может принимать значения: left, right, top, bottom.
Цвет градиента задается в любом цветовом формате (мы задавали в формате HEX), а рядом указывается положение, где данный цвет вступит в отображение.
Скажем, если положение какого-либо цвета выставлено в 0%, это означает, что данный цвет начнет применяться с самого начала блока, а если, например, задано 50% для цвета, то это означает - с середины выбранного блока. Такова логика работы градиента.
Вы можете манипулировать как хотите и использовать столько цветов и положений, сколько Вам потребуется.
Radial-gradient
Радиальный градиент задается по тем же принципам, что и линейный, но только при помощи свойства radial-gradient. Радиальный градиент может быть эллипсной формы (ellipse) и круговой (circle).
Ellipse
div{
background-image: radial-gradient(ellipse,#8470FF 0%,#6A5ACD 20%,#6495ED 50%);
background-image: -webkit-radial-gradient(ellipse,#8470FF 0%,#6A5ACD 20%,#6495ED 50%);
background-image: -moz-radial-gradient(ellipse,#8470FF 0%,#6A5ACD 20%,#6495ED 50%);
background-image: -o-radial-gradient(ellipse,#8470FF 0%,#6A5ACD 20%,#6495ED 50%);
background-image: -ms-radial-gradient(ellipse,#8470FF 0%,#6A5ACD 20%,#6495ED 50%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8470FF', endColorstr='#6495ED',GradientType=1 );
}
Circle
div{
background-image: radial-gradient(circle,#8470FF 0%,#6A5ACD 20%,#6495ED 50%);
background-image: -webkit-radial-gradient(circle,#8470FF 0%,#6A5ACD 20%,#6495ED 50%);
background-image: -moz-radial-gradient(circle,#8470FF 0%,#6A5ACD 20%,#6495ED 50%);
background-image: -o-radial-gradient(circle,#8470FF 0%,#6A5ACD 20%,#6495ED 50%);
background-image: -ms-radial-gradient(circle,#8470FF 0%,#6A5ACD 20%,#6495ED 50%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8470FF', endColorstr='#6495ED',GradientType=1);
}
7. Переходы
Чтобы добиться плавного перехода цвета в другой при наведении на ссылку или плавно отобразить список меню и т.д., в CSS 3 используется свойство transition.
Рассмотрим пример, плавного изменения цвета блока, при наведении на него:
div{
background-color: #00BFFF;
transition: background-color 3s;
}
div:hover{
background-color: #6A5ACD;
}
Основными значениями данного свойства являются:
- имя свойства элемента для которого применяется переход;
- длительность применения перехода;
- тип перехода;
- время задержки перед началом.
В нашем случае, мы применяли переход для свойства backgroud-image с длительностью в 3 секунды.
Если Вы хотите применять переход ко всем свойствам элемента, то в параметре имя свойства элемента для которого применяется переход, следует указать all.
Дополнительныv функциональным параметром можно указать тип перехода. По умолчанию стоит linear и время задержки по умолчанию 0 секунд (запускается мгновенно).
div{
transition: background-color 3s linear 0s;
}
Но есть и другие типы переходов. Ниже я приведу Вам очень распространенную динамическую таблицу, по которой вы поймете, как работают типы переходов (наведите курсор на любой блок).
Можно указывать несколько переходов одновременно для разных свойств элемента. Например: изменить фон и цвет шрифта. Давайте попробует сделать это:
div{
background-color: #00BFFF;
color:#BEBEBE;
transition: background-color 3s ease-out, color 3s;
-webkit-transition: background-color 3s ease-out, color 3s;
-moz-transition: background-color 3s ease-out, color 3s;
-o-transition: background-color 3s ease-out, color 3s;
}
div:hover{
background-color: #7B68EE;
color: #E6E6FA;
}
Чтобы применить несколько переходов, просто указывайте их через запятую с необходимыми параметрами.
8. Анимация
В CSS 3 для создания анимации используется свойство @keyframes. Данное свойство представляет из себя инструкцию, которая содержит различные свойства, которые будут выполнять при запуске анимации.
@keyframes name{
from(css);
to(css);
}
В данном примере name - это имя нашей "инструкции" или анимации, а css - это css-свойства, которые будут выполняться при выполнении анимации от начала from до конца to.
Далее необходимо задать блоку, для которого хотим выполнить анимацию, свойство animation.
Данное свойство принимает значения:
- имя анимации;
- длительность выполнения;
- тип перехода;
- задержка перед выполнением;
- сколько раз должна выполниться анимация.
Свойство тип перехода по умолчанию установлен как ease, но при желании можно установить свой. Все типы переходов рассматривались в пункте Переходы (transition).
Свойство задержка перед выполнением по умолчанию установлено в 0 секунд (мгновенно).
Рассмотрим пример. Для начала создадим блок и, при наведении на него курсора, будет изменяться его ширина и добавляться тень.
@keyframes anim {
from {width:200px;} // 0% {width:200px;}
to {width:400px;box-shadow: 0 3px 4px #000;} // 100% {width:400px;box-shadow: 0 3px 4px #000;}
}
@-webkit-keyframes anim {
from {width:200px;} // 0% {width:200px;}
to {width:400px;box-shadow: 0 3px 4px #000;} // 100% {width:400px;box-shadow: 0 3px 4px #000;}
}
@-moz-keyframes anim {
from {width:200px;} // 0% {width:200px;}
to {width:400px;box-shadow: 0 3px 4px #000;} // 100% {width:400px;box-shadow: 0 3px 4px #000;}
}
div:hover{
animation: anim 4s 3;
-webkit-animation: anim 4s 3;
-moz-animation: anim 4s 3;
}
Не забывайте указывать дополнительные префиксы: -webkit, -moz.
Свойства from и to являются алиасами, под ними понимается аналогичное значение from - 0% и to - 100%. Исходя из этого, свойства анимации мы можем указывать в процентном виде, тем самым показывая, как и что на определенном отрезке анимации мы хотим выполнить с данным элементом. Например:
@keyframes anim2{
0% {width: 200px;}
30% {color: red;}
60% {color: orange;}
100% {width: 400px;}
}
@-webkit-keyframes anim2{
0% {width: 200px;}
30% {color: red;}
60% {color: orange;}
100% {width: 400px;}
}
@-moz-keyframes anim2{
0% {width: 200px;}
30% {color: red;}
60% {color: orange;}
100% {width: 400px;}
}
div:hover{
animation: anim2 3s linear;
-webkit-animation: anim2 3s linear;
-moz-animation: anim2 3s linear;
}
9. Трансформация
Трансформация в CSS 3 позволяет преобразовывать элементы, их вид, положение, но все в пределах 2D трансформации. За трансформацию отвечает свойство transform. В качестве параметра данное свойство принимает одну из функций трансформирования элементов:
- translate(x,y) - сдвигает элемент на X px влево и Y px вниз;
- rotate(X) - поворачивает элемент на X deg (градусов);
- scale(x,y) - растягивает элемент на коэффициент X в ширину и Y высоту;
- skew(x,y) - скосить элемент на X px по горизонтали и Y px по вертикали.
translate
div{
transform: translate(10px,20px);
-webkit-transform: translate(10px,-20px);
-moz-transform: translate(10px,-20px);
-o-transform: translate(10px,-20px);
-ms-transform: translate(10px,-20px);
}
Мы сдвинули элемент на указанное количество пикселей. Это видно по отношению к сестринскому блоку No translate.
rotate
div{
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
}
scale
Данная функция растягивает элемент на указанный коэффициент. Коэффициент ширины и высоты по умолчанию равен 1.
div{
transform: scale(1,1.4);
-webkit-transform: scale(1,1.4);
-moz-transform: scale(1,1.4);
-o-transform: scale(1,1.4);
-ms-transform: scale(1,1.4);
}
Высота была изменена с коэффициентом 1.4, ширина оставлена без изменений, т.е. равна коэффициенту 1.
skew
div.skew{
transform:skew(40deg,20deg);
-webkit-transform: skew(10deg,20deg);
-moz-transform: skew(10deg,20deg);
-o-transform: skew(10deg,20deg);
-ms-transform: skew(10deg,20deg);
}
Вы можете экспериментировать со значениями как хотите, так что пробуйте.
10. Многоколоночный текст
Свойство column-count позволяет разбить текст в выбранном элементе на определенное количество столбцов.
div{
column-count: 3;
-webkit-column-count: 3;
-moz-column-count: 3;
column-gap:10px;
-webkit-column-gap:30px;
-moz-column-gap:30px;
column-width:90px;
-webkit-column-width:90px;
-moz-column-width:90px;
column-rule: 2px double red;
-webkit-column-rule: 2px double red;
-moz-column-rule: 2px double red;
}
Свойство column-gap задает ширину между столбцами. Свойство column-width задает ширину каждого столбца. Свойство column-rule задает визуальную разделительную линию между столбцами.
Недостатком является тот факт, что IE не поддерживает данное свойство.
Вывод
Развитие CSS 3 дало новый толчок в стилизации HTML-документов. Новые свойства, более быстрый подход к стилизации документа и его компонентов. Используйте новые технологии, но не забывайте о старых.
Материал подготовил Сергей Губарев специально для сайта CodeHarmony.ru
P.S. Иизучаете CSS для того, чтобы освоить верстку сайтов? Рекомендую вам серию бесплатных видео по резиновой верстке сайта и бесплатный курс по основам адаптивной верстки. Эти материалы помогут вам продвинуться вперед гораздо быстрее:
Понравился материал и хотите отблагодарить?
Просто поделитесь с друзьями и коллегами!
Смотрите также:
