Индивидуальное задание — Черняев Антон Андреевич

HTML5 и CSS3: будущее интернета

Второй темой, которая будет рассмотрена в данном разделе, это «HTML5 и CSS3: будущее интернета». Для меня эта тема еще интересней, чем предыдущая, т.к. я интересуюсь веб-технологиями. Эти два стандарта еще не поддерживаются всеми браузера и работа над ними идет полным ходом, но уже сейчас они могут похвастаться хорошими результами.

HTML5 и CSS3 — не просто два новых стандарта, предложенных комитетом W3C (World Wide Web Consortium) и его рабочими группами. Это следующее поколение ежедневно используемых технологий, созданное для того, чтобы Вам было проще и удобнее строить современные веб-приложения. Многие новые возможности HTML направлены на совершенствование платформы для построения веб-приложений. HTML5 предоставляет в расположение разработчика много новых инструментов для улучшения пользовательского интерфейса, от более содержательных тегов и улучшенных средств межсайтовых и межоконных коммуникаций до анимации и улучшенной мультимедийной поддержки.

Работа над HTML5 и CSS3 продолжается. Спецификации еще не утверждены, а это значит, что все еще может измениться. На данный момент HTML5 и CSS3 поддерживают такие браузеры, как Firefox, Chrome, Safari. IE в этом плане как всегда отстает. Правда уже сообщают, что IE9 уже поддерживает эти две спецификации, но девятая версия не получила еще такой популярности, а популярные седьмая и восьмая версии можно уже считать устаревшими.

В старых версиях HTML необходимо было указывать строку типа: <DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> . Вместо этого в пятой версии объявление выглядит намного проще: <!DOCTYPE html>

Кроме того пришли изменения в сами теги. Часть тегов, которые были популярными, теперь считаются устаревшими, т.к. тот функционал, который выполняет каждый из следующих тегов легко заменить средствами CSS: basefont, big, center, font, s, strike, tt, u.

Еще некоторые элементы исчезают из-за появления более совершенных заменителей:

acronym заменяется на abbr
applet заменяется на object
dir заменяется на ul

Кроме устаревших элементов, недействительными стали многие атрибуты:

align
атрибуты link, vlink, alink, text тега body
bgcolor
height, width
атрибут scrolling элемента iframe
valign
hspace, vspace
атрибуты cellpadding, cellspacing, border тега table

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

header — Определение заголовка страницы или раздела
footer — Определение завершителя страницы или раздела
nav — Определение области навигации страницы или раздела
section — Определение логической области страницы или группировка контента
article — Определение статьи (логически завешенного блока контента)
aside — Определение вторичного или связанного контента

Изначально, страница может выглядеть так:
<html lang = "en-US">
<head>
<meta http-equiv = "Content-Type" content = "text/html; charset = utf-8" />
</head>
<body>
</body>
</html>

Тег header может содержать любой контент, от логотипа фирмы до поля поиска. Кроме того, можно использовать неограниченное количество заголовков на странице, т.к. любой раздел или статья на Вашей странице тоже может иметь заголовок.

Элемент footer определяет завершающую область документа или раздела. Завершители встречаются на многих сайтах, обычно в них содержится дата установления авторского права и информация о владельце сайта. В спецификации говорится, что документ может содержать несколько завершителей.

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

Раздел представляет собой логическую область страницы. Для описания логических разделов вместо тега div, которым злоупотребляли многие разработчики, следует использовать элемент section.

Тег article идеально подходит для описания основного информационного наполнения веб-страницы. В статьях могут использоваться элементы header и footer, что значительно упрощает логического разбития статей.

Чем отличается раздел от статьи? Раздел определяет логическую часть документа, а статья — его фактическое содержание. Раздел может содержать несколько статей, а статья может состоять из нескольких разделов.

Иногда на странице размещается информация, дополняющая основной контент, — выносные цитаты, диаграммы, сопутствующие ссылки. Для пометки таких элементов может использоваться новый тег aside. Выносная цитата размещается в элементе aside.

Если Вам когда-нибудь потребуется реализовать числовую шкалу или индикатор процесса загрузки файла в веб-приложении, следует обратить внимание на новые элементы meter и progress. Элемент meter предназначен для семантического описания положения фиксированной точки на отрезке между минимальным и максимальным значением. Если Вы хотите, чтобы элемент meter соответствовал рекомендациям в спецификации, то не следует использовать их для отображения с неопределенными минимальными и максимальными значениями. Индикатор прогресса имеет много общего со шкалой, но он предназначен для активного отображения хода выполняемой операции — наподобие тех, которые отображаются при загрузке файлов. Шкала, напротив, предназначена для вывода статической информации.

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

<input type="email"> поле для ввода адреса электронной почты
<input type="url"> поля для url-адреса
<input type="tel"> поле для ввода телефонного номера
<input type="search"> поле для ввода ключевых слов поиска
<input type="range"> ползунок
<input type="number"> поле для ввода числовых данных, часто в виде элемента-счетчика
<input type="date"> поле для ввода даты. Поддерживаются типы date, month и week
<input type="datetime"> поле для ввода даты со временем. Поддерживаются типы datetime, datetime-local и time
<input type="color"> поле выбора цвета
<input type="text" autofocus> поддержка передачи фокуса конкретному элементу формы
<input type="email" placeholder = "me@example.com"> поддержка автоматического включения текста в поле формы
<p contenteditable>lorem ipsum </p> поддержка редактирования контента «на месте» в браузере.

Ползунок

Ползунки используются для увеличения или уменьшения числовых значений. Для создания ползунков используется тег с типом range.
<input type = "range" min = "0" max = "10" name="range" value = "0" id = range>

В результате получится следующий ползунок: Поле ползунок

Работа с числовыми данными

Счетчики представляют собой поле, справа от которого находятся две кнопки со стрелками — для увеличения и уменьшения хранимого значения.
<input type = "number" name = "numbers" min = "0" max = "100"> Поле для работы с чилами

В поле по умолчанию разрешен прямой ввод с клавиатуры. Как и в случае с ползунками, для поля можно задать минимальное и максимальное значение. Также следует обратить внимание на возможность управления приращением, которое определяется параметром step. По умолчанию приращение равно 1, но ему также можно присвоить любое числовое значение.

Дата

Для хранения даты идеально подходит поле типа date.
<input type = "date" name = "fdate" id = "date" value = "2012-09-24">
Поле для работы с датами

Почта

В спецификации HTML5 сказано, что поле типа email предназначено для хранения либо отдельного адреса, либо списка адресов электронной почты.
<input type = "email" name = "email" id = "email">

По внешнему виду оно ничем не отличается от обычного текстового поля

URL–адрес

Также существует особый тип полей для хранения URL–адресов
<input type = "url" name = "url" id = "url">

Цвет

Наконец пользователю необходимо дать возможность выбрать цветовой код проекта. Для этого будет использоваться тег color.
<input type = "color" name = "color" id = "color">
Поле для выбора цвета

Чтобы значительно ускорить ввод данных, установите курсор в первое поле формы при загрузке страницы. Многие веб-страницы делают это средствами JavaScript, а теперь спецификация предоставляет такую возможность на уровне самого языка. Все, что требуется — это добавить атрибут autofocus к любому полю формы. Если таких полей будет несколько, то фокус перейдет к последнему полю с атрибутом autofocus.

Автозаполняющийся текст

Текст, который автоматически добавляется в поле, сообщает пользователю о том, как следует вводить данные в поле формы.
<input type = "text" name = "name" autofocus id = "name" placeholder = "your name">

Чтобы добавить такой текст необходимо для поля указать атрибут placeholder. Значение данного атрибута будет выводиться в соответствующем поле.

Поле с редактированием

Иногда бывает удобно, чтобы пользователь сайта мог быстро отредактировать информацию о себе без перехода к другой форме Появившийся в HTML5 тег contenteditable автоматически решает проблему ввода данных. Единственное разработчику остается еще написать код для отправки данных на сервер, где эти данные будут сохранены.

Рисование

Для того чтобы включить графическое изображение в веб-приложение, традиционно веб-разработчику требовалось предварительно создавать графику в различных графических редакторах и вставлять в html документ с помощью тега img. В HTML5 появился новый элемент, с помощью которого можно создавать графические изображения и анимации в браузере на программном уровне, средствами JavaScript. На созданном холсте можно рисовать простые или сложные фигуры и даже строить графики и диаграммы без использования серверных библиотек.

Элемент canvas является контейнером. Он создает пустой холст, на который можно рисовать. При создании холста указывается его ширина и высота.
<canvas id = "my_canvas" width = "150" height = "150"> </canvas>

К сожалению, невозможно изменить ширину и высоту элемента canvas средствами CSS без искажения содержимого, поэтому размеры холста должны определяться на момент объявления.

Вот простой пример рисования квадрата на холсте:
window.onload = function(){ var canvas = document.getElementById('my_canvas'); if(canvas.getContext){ var context = canvas.getContext('2d'); context.fillStyle = "rgb(200, 0, 0)"; context.fillRect (10, 10, 100, 100); } }

Если метод getContext возвращает ответ, мы получаем 2D — контекст холста для добавления объектов. Получив контекст холста, мы просто добавляем элементы в этот контекст.

Заливки и границы фигур

С помощью свойств fillStyle и strokeStyle вы можете легко настроить цвета, используемые для заливки и линий объектов. Значения цветов, используемые в этих методах, такие же, как и в CSS: шестнадцатеричные коды (#F5E6AB), rgb(), rgba().

Используя метод fillRect, вы можете нарисовать прямоугольник с заливкой. С помощью метода strokeRect вы можете нарисовать прямоугольник только с границами, без заливки. Если нужно очистить некоторую часть канвы, вы можете использовать метод clearRect. Три этих метода используют одинаковый набор аргументов: x, y, width, height. Первые два аргумента задают координаты (x,y), а следующие два — ширину и высоту прямоугольника.

Для изменения толщины линий можно использовать свойство lineWidth
context.fillStyle = '#000';
context.fillRect (0, 0, 150, 150);
context.strokeStyle = '#fc0';
context.lineWidth = 4;
context.strokeRect(0, 60, 150, 50);
context.clearRect (30, 25, 90, 60);
context.strokeRect(30, 25, 90, 60);

Круг

Чтобы нарисовать круг, нужно выполнить такой код:
context.beginPath();
context.arc(75, 75, 10, 0, Math.PI*2, true);
context.closePath();
context.fill();

Кривые Безье

Для создания кривых Безье в HTML5 Canvas можно использовать метод bezierCurveTo(). Кривые Безье задаются с помощью начальной точки, двух контрольных точек и конечной точки. В отличие от квадратичных кривых, кривые Безье в HTML 5 Canvas определяются двумя контрольными точками вместо одной, позволяя создавать кривые с более сложным очертанием.

Метод bezierCurveTo() выглядит следующим образом:
context.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX, endY);

Пример рисования кривой Безье в HTML 5 Canvas:
context.moveTo(188, 130);
var controlX1 = 140;
var controlY1 = 10;
var controlX2 = 388;
var controlY2 = 10;
var endX = 388;
var endY = 170;
context.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX, endY);
context.lineWidth = 10;
context.strokeStyle = "black";
context.stroke();

Кривая Безье

Контуры

Контуры Canvas позволяют рисовать фигуры любой формы. Сначала нужно нарисовать «каркас», а потом можно использовать стили линий или заливки, если это необходимо. Чтобы начать рисование контура, используется метод beginPath(), потом рисуется контур, который можно составить из линий, кривых и других примитивов. Как только рисование фигуры окончено, можно вызвать методы назначения стиля линий и заливки, и только потом вызвать функцию closePath() для завершения рисования фигуры.
context.fillStyle = '#000';
context.lineWidth = 4;
context.beginPath();
context.moveTo(10, 10);
context.lineTo(100, 10);
context.lineTo(10, 100);
context.lineTo(10, 10);
context.fill();
context.closePath();

Вставка изображений в Canvas

Метод drawImage позволяет вставлять другие изображения (img и canvas) на канву. В браузере Opera также существует возможность рисования SVG-изображений внутри элемента canvas. drawImage довольно сложный метод, который может принимать три, пять или девять аргументов:

Три аргумента: Базовое использование метода drawImage включает один аргумент для указания изображения, которое необходимо вывести на канве, и два аргумента для задания координат.
context.drawImage(img_elem, dx, dy);
Пять аргументов: Используются предыдущие три аргумента и еще два, задающие ширину и высоту вставляемого изображения (в случае если вы хотите изменить размеры изображения при вставке).
context.drawImage(img_elem, dx, dy, dw, dh);
Девять аргументов: Используются предыдущие пять аргументов и еще четыре: два для координат области внутри исходного изображения и два для ширины и высоты области внутри исходного изображения для обрезки изображения перед вставкой в Canvas.
context.drawImage(img_elem, sx, sy, sw, sh, dx, dy, dw, dh);

Текст

Следующие свойства текста доступны для объекта контекста:

font: Определяет шрифт текста, так же как свойство font-family в CSS)
textAlign: Определяет горизонтальное выравнивание текста. Допустимые значения: start, end, left, right, center. Значение по умолчанию: start.
textBaseline: Определяет вертикальное выравнивание текста. Допустимые значения: top, hanging, middle, alphabetic, ideographic, bottom. Значение по умолчанию: alphabetic.

Существуют два метода для вывода текста: fillText и strokeText. Первый отрисовывает текст, заполняя его заливкой стиля fillStyle, другой рисует обводку текста, используя стиль strokeStyle. Оба метода принимают три аргумента: собственно текст и координаты (x,y), в которых его необходимо вывести. Также существует четвертый необязательный аргумент — максимальная ширина. Этот аргумент необходим для умещения текста в заданную ширину.

Свойства выравнивания текста влияют на позиционирование текста относительно координат его вывода (x,y).
context.fillStyle = '#00f';
context.font = 'italic 30px sans-serif';
context.textBaseline = 'top';
context.fillText ('Hello world!', 0, 0);
context.font = 'bold 30px sans-serif';
context.strokeText('Hello world!', 0, 50);

Тени

Shadow API предоставляет четыре свойства:

shadowColor: Определяет цвет тени. Значения допустимы в том же формате, что и в CSS.
shadowBlur: Определяет степень размытия тени в пикселях. Эффект очень похож на гауссово размытие в Photoshop.
shadowOffsetX и shadowOffsetY: Определяет сдвиг тени в пикселях (x, y).

context.shadowOffsetX = 5;
context.shadowOffsetY = 5;
context.shadowBlur = 4;
context.shadowColor = 'rgba(255, 0, 0, 0.5)';
context.fillStyle = '#00f';
context.fillRect(20, 20, 150, 100);

Градиенты

Свойства fillStyle и strokeStyle также могут иметь объекты CanvasGradient вместо обычных цветов CSS — это позволяет использовать градиенты для линий и заливок.

Для создания объектов CanvasGradient можно использовать два метода: createLinearGradient и createRadialGradient. Первый метод создает линейный градиент, а второй — радиальный градиент.

Как только создан объект градиента, можно добавлять в него цвета с помощью метода addColorStop. var gradient1 = context.createLinearGradient(sx, sy, dx, dy);
gradient1.addColorStop(0, '#f00');
gradient1.addColorStop(0.5, '#ff0');
gradient1.addColorStop(1, '#00f');
var gradient2 = context.createRadialGradient(sx, sy, sr, dx, dy, dr);

Видео и аудио

В последние годы видео и аудио в Интернете становится все более жизнеспособным и сайты вроде YouTube, Viddler, Revver, MySpace и десятки других облегчают жизнь тем, кто публикует видео и аудио. Поскольку в настоящее время в HTML не хватает необходимых средств для успешного внедрения и управления мультимедиа, многие сайты полагаются на Flash, чтобы обеспечить эту функциональность. Хотя можно вставлять мультимедиа с помощью различных плагинов (таких как QuickTime, Windows Media и др.), Flash сейчас единственный широко используемый плагин, обеспечивающий кроссбраузерную совместимость с требуемыми для разработчиков API-интерфейсами.

Opera и WebKit выпустили версии с частичной поддержкой элемента video. Самый простой способ вставить видео это использовать элемент video и позволить браузеру обеспечить интерфейс по умолчанию. Атрибут controls указывает, желает автор использовать пользовательский интерфейс или выключить его по умолчанию. <video src="video.ogv" controls poster="poster.jpg" width="320" height="240"> <a href="video.ogv">Скачать ролик</a> </video>

Необязательный атрибут poster может быть использован для указания изображения, которое будет отображаться вместо видео до начала воспроизведения. Хотя некоторые видеоформаты вроде MPEG-4 поддерживают собственную функцию кадра, альтернативное решение может работать независимо от формата видео.

Так же просто вставить аудио на страницу с помощью элемента audio. Большинство атрибутов являются общими между элементами audio и video, хотя по понятным причинам у audio нет атрибутов width, height и poster. <audio src="music.oga" controls> <a href="music.oga">Скачать песню</a> </audio>

HTML5 предоставляет элемент source для указания альтернативных аудио и видеофайлов, которые браузер может выбрать на основе типа носителя или кодека. Атрибут media может быть использован для указания типа носителя, чтоб отобрать определенные устройства, атрибут type — для указания типа файла и кодека. <video poster="poster.jpg"> <source src="video.3gp" type="video/3gpp" media="handheld"> <source src="video.ogv" type="video/ogg; codecs=theora, vorbis"> <source src="video.mp4" type="video/mp4"> </video> <audio> <source src="music.oga" type="audio/ogg"> <source src="music.mp3" type="audio/mpeg"> </audio>

Для авторов, которые хотят больше контроля над пользовательским интерфейсом, чтобы вписать его в дизайн веб-страницы, обширный API предоставляет несколько методов и событий, позволяющим скриптам управлять воспроизведением. Простейшие методы используют play(), pause() и currentTime для перемотки в начало. Следующий пример иллюстрирует их использование. <video src="video.ogg" id="video"></video> <script> var video = document.getElementById("video"); </script> <p> <button type="button" onclick="video.play();">Воспроизвести</button> <button type="button" onclick="video.pause();">Пауза</button> <button type="button" onclick="video.currentTime = 0;"> Перемотать</button>

CCS3

Каскадные таблицы стилей появились 13 лет назад, а наиболее распространенный стандарт CSS 2.1 существует уже 11 лет. Если взглянуть на сайты, созданные 11 лет назад, сразу становится ясно, что мы ушли от той эпохи на много тысяч километров вперед. Поразительно, насколько быстро развивалась web-индустрия за эти годы, так, как мы в то время не могли себе даже представить.

CSS-селекторы невероятно мощный инструмент: они позволяют нам обращаться к специфическим HTML-элементам разметки, без необходимости использования ненужных ID, классов и JavaScript. Сложные селекторы могут помочь при составлении чистой разметки и лучшего разделения структуры и внешнего вида. Они могут сократить число ID и классов в разметке, а также облегчит поддержание стиля для разработчика.

Три новых вида атрибутивных селекторов, являются частью CSS3-спецификации:

[att^="value"] — Выбирает элементы по атрибуту, который начинается с заданного значения.
[att$="value"] — Выбирает элементы по атрибуту, который заканчивается заданным значением.
[att*="value"] — Выбирает элементы по атрибуту, в котором содержится заданное значение.

Комбинаторы

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

Например, чтобы добавить серую рамку всем картинкам, которые являются «братьями» конкретного div-элемента (и div и картинки должны иметь одного и того же родителя), достаточно написать в файле стилей следующее: div~img { border: 1px solid #ccc; }

Псевдо-классы

Наверное, самым обширным дополнением к CSS3, являются новые псевдо-классы. Далее представлены наиболее интересные и полезные из них:

:nth-child(n)
Позволяет отобрать элементы, на основе их позиции в родительском списке дочерних элементов. Можно использовать номер элемента, выражение или ключевые слова odd и even (для таблиц в стиле зебры). Например, если вы хотите получить группу из трех элементов, после четвертого, то можно использовать такую конструкцию:
:nth-child(3n+4) { background-color: #ccc; }
:nth-last-child(n)
Работает по тому же принципу, что и предыдущий элемент, только выбирает последний дочерний элемент родителя. Например для получения последних двух параграфов в div, можно использовать следующий селектор:
div p:nth-last-child(-n+2)
:last-child
Получает последний дочерний элемент родителя, является эквивалентом:nth-last- child(1)
:checked Получает отмеченные элементы, например чекбоксы.
:empty Получает элементы, которые не имеют дочерних элементов, или пустые.
:not(s) Получает все элементы, не содержащие объявленных условия(ий). Например, если нам нужно назначить черный цвет всем параграфам, не имеющим класса «lead», мы должны написать так: p:not([class*="lead"]) { color: black; }

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

RGBA позволяет назначить не только цвет, но и прозрачность элемента. Некоторые браузеры не поддерживают этого, поэтому хорошей практикой считается до назначения RGBA-цвета, назначить другой цвет, без прозрачности, для совместимости со старыми браузерами.

При настройке RGBA-цвета, мы должны указать значения цветов: красный, синий и зеленый, либо целое число от 0 до 255, или значение в процентах. Альфа-значение должно быть между 0.0 и 1.0; например 0.5 для 50% прозрачности.

RGBA отличается от opacity только тем, что применяет прозрачность к определенному элементу, без наследования ее к дочерним элементам.

Многоколоночная раскладка

Этот новый CSS3-селектор позволит вам создать многоколоночную раскладку без использования множества div-ов. Браузер интерпретирует свойства и создает колонки с текстом, похожие на газетные.

С этим селектором, мы можем описать три параметра: число колонок (column-count), ширину каждой колонки (column-width) и расстояние между колонками (column-gap). Если значение column-count не задано, браузер разместит максимальное число колонок, на сколько ему позволит ширина.

Чтобы добавить вертикальный разделитель между колонками, можно использовать свойство column-rule, которое работает точно так же как свойство border:
div { column-rule: 1px solid #00000; }

Браузеры, не поддерживающие эти свойства, возвращают контент в виде простого текста, как будто колонок нет. Связанные свойства: column-break-after, column-break-before, column-span, column-fill.

Множественные фоны

CSS3 позволят применять множественные бэкграунды к элементу, используя множественные свойства, такие как: background-image, background-repeat, background-size, background-position, background-origin и background-clip.

Самый простой способ добавить множественный фон к элементу — использовать короткий код. Вы можете установить все выше перечисленные свойства в одной строке, но наиболее используемые из них, это: image, position и repeat.
div {
background: url(example.jpg) top left no-repeat,
url(example2.jpg) bottom left no-repeat,
url(example3.jpg) center center repeat-y;
}

Более комплексная версия того же свойства, может быть такая:
div {
background: url(example.jpg) top left (100% 2em) no-repeat,
url(example2.jpg) bottom left (100% 2em) no-repeat,
url(example3.jpg) center center (10em 10em) repeat-y;
}

В этом примере, (100% 2em) это значение background-size; фоновая картинка, в верхнем левом углу будет расятнута в полную ширину div-а, и высотой 2em.

Поскольку это свойство поддерживается небольшим количеством браузеров, а также, потому что отсутствие фона на сайте может серьезно повредить визуальному восприятию, это пока что редко используемое CSS3-свойство. Тем не менее, оно может значительно упростить работу web-дизайнеров и сократить количество разметки, необходимое для достижения такого же эффекта.

Визуальные эффекты

border-radius — Устанавливает радиус скругления уголков рамки. Если рамка не задана, то скругление также происходит и с фоном.

Разрешается использовать одно, два, три или четыре значения, перечисляя их через пробел. Также допустимо писать два значения через слэш (/). В качестве значений указываются числа в любом допустимом для CSS формате. В случае применения процентов, отсчет ведется относительно ширины блока.

Радиус указывается для всех четырех уголков
Первое значение задает радиус верхнего левого и нижнего правого уголка, второе значение — верхнего правого и нижнего левого уголка
Первое значение задает радиус для верхнего левого уголка, второе — одновременно для верхнего правого и нижнего левого, а третье — для нижнего правого уголка
По очереди устанавливает радиус для верхнего левого, верхнего правого, нижнего правого и нижнего левого уголка.

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

Значения

none — Отменяет добавление тени
inset — Тень выводится внутри элемента. Необязательный параметр.
сдвиг по x — Смещение тени по горизонтали относительно элемента. Положительное значение этого параметра задает сдвиг тени вправо, отрицательное — влево. Обязательный параметр.
сдвиг по y — Смещение тени по вертикали относительно элемента. Положительное значение задает сдвиг тени вниз, отрицательное — вверх. Обязательный параметр.
размытие — Задает радиус размытия тени. Чем больше это значение, тем сильнее тень сглаживается, становится шире и светлее. Если этот параметр не задан, по умолчанию устанавливается равным 0, тень при этом будет четкой, а не размытой.
растяжение — Положительное значение растягивает тень, отрицательное, наоборот, ее сжимает. Если этот параметр не задан, по умолчанию устанавливается 0, при этом тень будет того же размера, что и элемент.
цвет — Цвет тени в любом доступном CSS формате, по умолчанию тень черная. Необязательный параметр.

Линейный градиент

Градиентом называют плавный переход от одного цвета к другому, причём самих цветов и переходов между ними может быть несколько. С помощью градиентов создаются самые причудливые эффекты веб-дизайна, например, псевдотрёхмерность, блики, фон и др. Также с градиентом элементы смотрятся более симпатично, чем однотонные.

Отдельного свойства для добавления градиента нет, поскольку он считается фоновым изображением, поэтому добавляется через свойство background-image или универсальное свойство background. Среди браузеров нет единой поддержки градиентов, так что для каждого придётся добавить отдельную строку.

Список литературы

Брайан Хоган. HTML5 и CSS3. Веб-разработка по стандартам нового поколения: — М.: Библиотека программиста, 2012 — 270с.
Введение в HTML5 [Электронный ресурс]. — Режим доступа: http://www.intuit.ru/department/internet/html5/1/.
HTML5 Canvas для начинающих [Электронный адрес]. — Режим доступа: http://w3pro.ru/article/html-5-canvas-dlya-nachinayushchikh.
Разберем CSS 3 на простых примерах [Электронный ресурс]. — Режим доступа: http://www.greenlight5.com/razberemcss.htm.
Введение в HTML5 видео [Электронный ресурс]. — Режим доступа: http://w3pro.ru/article/vvedenie-v-html5-video.
Применение HTML5 Audio: подсказки и уроки интеграции звука [Электронный ресурс]. — Режим доступа: http://www.coolwebmasters.com/audio/1674-html5-audio.html.

Меню: