Reg.ru: домены и хостинг

Крупнейший регистратор и хостинг-провайдер в России.

Более 2 миллионов доменных имен на обслуживании.

Продвижение, почта для домена, решения для бизнеса.

Более 700 тыс. клиентов по всему миру уже сделали свой выбор.

Перейти на сайт->

Бесплатный Курс "Основы работы с фреймворком CakePHP"

Хотите научиться создавать сайты любой сложности быстро?

Познакомьтесь ближе с одним из замечательных фреймворков - CakePHP.

Узнайте о его преимуществах, освойте основные функции и начните применять CakePHP на практике!

Получить в подарок->

Бесплатный Курс "Рисование дизайна сайта с нуля"

Обучающая система для полных новичков в дизайне.

Вы научитесь создавать дизайн любых сайтов - для себя и на заказ.

Вы сможете неплохо зарабатывать, применяя полученные знания на практике.

Получить в подарок->

Бесплатный тренинг "PHP для Создания Сайтов: Введение"

Что нужно знать для создания PHP-сайтов?

Ответ здесь. Только самое важное и полезное для начинающего веб-разработчика.

Узнайте, как создавать качественные сайты на PHP всего за 2 часа и 27 минут!

Записаться бесплатно->

Бесплатный курс "Сайт-Визитка За 15 уроков"

Создайте свой сайт за 3 часа и 30 минут.

После просмотра данного видеокурса у Вас на компьютере будет готовый к использованию сайт, который Вы сделали сами.

Вам останется лишь наполнить его нужной информацией и изменить дизайн (по желанию).

Получить в подарок->

Бесплатный курс "Основы HTML и CSS"

Изучите основы HTML и CSS менее чем за 4 часа.

После просмотра данного видеокурса Вы перестанете с ужасом смотреть на HTML-код и будете понимать, как он работает.

Вы сможете создать свои первые HTML-страницы и придать им нужный вид с помощью CSS.

Получить в подарок->

Бесплатный курс "Сайт на WordPress"

Хотите освоить CMS WordPress?

Получите уроки по дизайну и верстке сайта на WordPress.

Научитесь работать с темами и нарезать макет.

Бесплатный видеокурс по рисованию дизайна сайта, его верстке и установке на CMS WordPress!

Получить в подарок->

Бесплатный курс "Основы работы с JavaScript"

Хотите изучить JavaScript, но не знаете, как подступиться?

После прохождения видеокурса Вы освоите базовые моменты работы с JavaScript.

Развеются мифы о сложности работы с этим языком, и Вы будете готовы изучать JavaScript на более серьезном уровне.

Получить в подарок->

Воспламенитель Кода: Сайт-Визитка на CodeIgniter

Курс предназначен для тех, кто знает основы HTML и CSS.

Изучив его, Вы сможете разрабатывать гибкие и функциональные Сайты-Визитки с панелью администратора.

Все, что нужно для разработки Сайта-Визитки: от шаблона и до переноса на хостинг.

Подробнее->

JavaScript и jQuery с нуля

Курс предназначен для тех, кто хочет повысить интерактивность и удобство своего сайта для посетителей.

Изучив его, Вы сможете создавать более красивые и функциональные сайты.

104 видеоурока: от основ JavaScript до готовых решений на jQuery.

Подробнее->

Повелитель PHP: кратчайший путь к мастерству без толстых учебников.

Курс предназначен для тех, кто хочет освоить язык PHP и свободно с ним работать.

Изучив его, Вы сможете при разработке сайтов решать любые задачи, требующие знаний PHP.

Подробнее->

*Наведите курсор мыши для приостановки прокрутки.


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. Например:

border-radius


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);
}

Также мы может задать нужное скругление каждому из четырех углов блока. Делается это таким вот образом:

border-radius


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:

text-shadow


div{
	text-shadow: 1px 2px 3px #000;
}

Данное свойство принимает 4 параметра: сдвиг тени по оси X, сдвиг тени по оси Y, размытие тени в px, цвет применяемой тени.

Дополнительно можно задавать несколько теней тексту. Это достигается путем перечисления всех значений свойств через запятую.

double text-shadow


div{
	text-shadow: 1px 2px 3px #000, 0px -2px 2px red;
}

Box-shadow:

Блоку можно задавать как внешнюю, так и внутреннюю тень, с помощью свойства box-shadow. Рассмотрим для начала добавление внешней тени к блоку:

box-shadow


div{
	box-shadow: 0px 3px 6px #000;
}

Свойство принимает 4 параметра: сдвиг тени по оси X, сдвиг тени по оси Y, размытие тени в px, цвет применяемой тени. Принцип аналогичен добавлению тени к тексту, о котором я рассказывал выше.

Теперь рассмотрим добавление внутренней тени к блоку:

inset box-shadow


div{
	box-shadow: inset 0px 3px 6px #000;
}

Как видите, чтобы добавить внутреннюю тень, необходимо указать дополнительный параметр inset в начале свойства.

Хостинг

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

inset box-shadow


div{
	box-shadow: inset 0px 3px 6px #000, inset 2px 0 3px red;
}


3. Цвета в новом формате HSL

HSL - формат цвета, с помощью которого Вы можете задавать оттенок, яркость, насыщенность.

HSL color


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 сделает элемент полупрозрачным.

opacity 1
opactiy 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

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

Ellipse radial-gradient


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

Circle radial-gradient


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.

Рассмотрим пример, плавного изменения цвета блока, при наведении на него:

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;
}

Но есть и другие типы переходов. Ниже я приведу Вам очень распространенную динамическую таблицу, по которой вы поймете, как работают типы переходов (наведите курсор на любой блок).

Linear
Ease
Ease-in
Ease-out
Ease-in-out

Можно указывать несколько переходов одновременно для разных свойств элемента. Например: изменить фон и цвет шрифта. Давайте попробует сделать это:

Background and Color transition


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 секунд (мгновенно).

Рассмотрим пример. Для начала создадим блок и, при наведении на него курсора, будет изменяться его ширина и добавляться тень.

Animation


@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%. Исходя из этого, свойства анимации мы можем указывать в процентном виде, тем самым показывая, как и что на определенном отрезке анимации мы хотим выполнить с данным элементом. Например:

Animation #2


@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

No translate
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


Rotate 45deg



div{
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
}


scale

Данная функция растягивает элемент на указанный коэффициент. Коэффициент ширины и высоты по умолчанию равен 1.


No scale
Scale



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


Scew



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 позволяет разбить текст в выбранном элементе на определенное количество столбцов.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, atque numquam asperiores reprehenderit quidem commodi in error ullam et nostrum harum similique molestias autem voluptates ipsam possimus reiciendis. Alias, saepe.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum asperiores recusandae fugiat obcaecati aliquid voluptatibus commodi labore repudiandae eligendi porro. Quasi, earum aliquam voluptatem culpa voluptates in ducimus vero facere?.
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 для того, чтобы освоить верстку сайтов? Рекомендую вам серию бесплатных видео по резиновой верстке сайта и бесплатный курс по основам адаптивной верстки. Эти материалы помогут вам продвинуться вперед гораздо быстрее:

Понравился материал и хотите отблагодарить?
Просто поделитесь с друзьями и коллегами!


Смотрите также:

PHP: Получение информации об объекте или классе, методах, свойствах и наследовании

PHP: Получение информации об объекте или классе, методах, свойствах и наследовании

CodeIgniter: жив или мертв?

CodeIgniter: жив или мертв?

Функции обратного вызова, анонимные функции и механизм замыканий

Функции обратного вызова, анонимные функции и механизм замыканий

Применение функции к каждому элементу массива

Применение функции к каждому элементу массива

Слияние массивов. Преобразование массива в строку

Слияние массивов. Преобразование массива в строку

Деструктор и копирование объектов с помощью метода __clone()

Деструктор и копирование объектов с помощью метода __clone()

Эволюция веб-разработчика или Почему фреймворк - это хорошо?

Эволюция веб-разработчика или Почему фреймворк - это хорошо?

Магические методы в PHP или методы-перехватчики (сеттеры, геттеры и др.)

Магические методы в PHP или методы-перехватчики (сеттеры, геттеры и др.)

PHP: Удаление элементов массива

PHP: Удаление элементов массива

Ключевое слово final (завершенные классы и методы в PHP)

Ключевое слово final (завершенные классы и методы в PHP)

50 классных сервисов, программ и сайтов для веб-разработчиков

50 классных сервисов, программ и сайтов для веб-разработчиков

Наверх