Категория: CSS.
CSS3 является одним из самых новых веб-технологий, доступных для веб-разработки прямо сейчас. При использовании некоторых из его многочисленных функций, можно получить эффекты которые раньше мы делали с помощью Photoshop, но с CSS3 мы получаем более управляемый код и быструю загрузку. Прочитав эту статью , вы узнаете о возможностях инструментов CSS3 и как комбинировать их для получения конечных графических эффектов.
CSS3 имеет много возможностей , но есть те которые знать просто необходимо, чтоб не использовать Photoshop для создания некоторых элементов в дизайне сайта. Вот они!
· Border Radii (Скруглённые углы)
· Box Shadows (Добавляет тень к блочным элементам)
· Text Shadows (Добавляет тень к тексту)
· Gradients (Градиенты)
· Multiple Backgrounds (Указание нескольких фоновых картинок)
Каждый из этих инструментов даёт возможность заменить изображения которые вы может быть раньше использовали создавая их в Фотошопе. Это делает сайт более лёгким в обслуживании, так как вам понадобиться внести изменения в один CSS файл, без редактирования изображений в Photoshop.
И так давайте рассмотрим эти возможности более подробно.
Border Radii (Скруглённые углы)
Поддержка браузеров:
- · Safari: 3,2 +
- · Firefox: 3,0 +
- · Chrome: 3,0 +
- · Opera: 10.5 +
- · Internet Explorer: 9.0 +
Вы скорей всего слышали о возможности скругление углов много раз. Она очень простая в использовании и поддерживается всеми современными браузерами. Давайте посмотрим на синтаксис.
CSS3 является одним из самых новых веб-технологий, доступных для веб-разработки прямо сейчас. При использовании некоторых из его многочисленных функций, можно получить эффекты которые раньше мы делали с помощью Photoshop, но с CSS3 мы получаем более управляемый код и быструю загрузку. Прочитав эту статью , вы узнаете о возможностях инструментов CSS3 и как комбинировать их для получения конечных графических эффектов.
-webkit-border-radius: size; -moz-border-radius: size; border-radius: size;
Три строчки синтаксиса которые предназначены для разных движков браузеров, первый Webkit это браузеры как Safari и Chrome , а второй предназначен для Mozilla-браузеров таких как Firefox, последняя для IE9, Opera.
Применяя 10px радиус, для элемента div создаёт такой эффект.
Всё просто и легко!
Box Shadows (Добавляет тень к блочным элементам)
Поддержка браузеров:
- · Safari: 3,2 +
- · Firefox: 3,5 +
- · Chrome: 3,0 +
- · Opera: 10.5 +
- · Internet Explorer: 9.0 +
Синтаксис выглядит следующим образом:
-webkit-box-shadow: offset_x offset_y blur_radius color; -moz-box-shadow: offset_x offset_y blur_radius color; box-shadow: offset_x offset_y blur_radius color;
Первый и второй параметры поле свойства-тени это смещение позиции от левой и верхней координаты элемента. Если поставить положительное значение то тень движется с права в низ, если отрицательное тень движется влево и вверх. Параметр Blur_radius является степенью размытия чтоб придать тени некую нечёткость. И последний параметр это цвет самой тени. Добавим тень к ранее созданному элементу со скруглёнными углами, что даёт следующий результат.
-webkit-box-shadow: 5px 5px 10px #555; -moz-box-shadow: 5px 5px 10px #555; box-shadow: 5px 5px 10px #555;
Еще одна полезная особенность CSS тень может находиться внутри объекта, а не снаружи.
-webkit-box-shadow: 0 0 20px #333 inset; -moz-box-shadow: 0 0 20px #333 inset; box-shadow: 0 0 20px #333 inset;
Последняя особенность Box Shadows это возможность использовать несколько теней в одном элементе. Все что вам нужно сделать, чтобы создать несколько теней, разделить их запятыми. Вот пример
-webkit-box-shadow: 0 0 20px #333 inset, 20px 15px 30px yellow, -20px 15px 30px lime, -20px -15px 30px blue, 20px -15px 30px red; -moz-box-shadow: 0 0 20px #333 inset, 20px 15px 30px yellow, -20px 15px 30px lime, -20px -15px 30px blue, 20px -15px 30px red; box-shadow: 0 0 20px #333 inset, 20px 15px 30px yellow, -20px 15px 30px lime, -20px -15px 30px blue, 20px -15px 30px red;
Text Shadows (Добавляет тень к тексту)
· Поддержка браузеров:
- · Safari: 3,2 +
- · Firefox: 3,5 +
- · Chrome: 3,0 +
- · Опера: 10.1 +
- · Internet Explorer: Надеюсь, в ближайшее время!
Text Shadows тоже что и Box Shadows, разница в том что применяется в создания тени для текста, и не надо применять прификсы для разных браузеров.
text-shadow: offset_x offset_y blur_radius color;
Это создает следующий эффект:
color: #fff /* text color to white */ text-shadow: 0 0 50px #333;
Как и в Box Shadows можно применять несколько теней параметры разделив запятыми.
Вот пример, который создает эффект пылающего текста.
text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -18px 18px #f20;
При помощи Text Shadows можно создавать удивительные эффекты или дополнять другие эффекты.
Градиенты
Поддержка браузеров:
- · Safari: 4 +
- · Firefox: 3.6 +
- · Chrome: 5 +
- · Opera: Надеюсь, в ближайшее время!
- · Internet Explorer: Надеюсь, в ближайшее время!
Градиенты являются одним из самых мощных функций доступный в CSS для вас, хотя пока поддерживается не во всех браузерах. Есть два типа градиентов, которые можно создать: линейные градиенты и радиальные градиенты. Как и следовало, линейные градиенты двигаются по прямой линии и радиальные идут по кругу. К сожалению для web разработчик придётся пока использовать два вида синтаксиса один для Mozilla, а другой для Webkit.
Синтаксис для Webkit
Safari и Chrome используют движок Webkit , и синтаксис для них довольно прост.
-webkit-gradient(, [, ]?, [, ]? [, ]*)
Webkit использует тот же синтаксис как для линейных так и для радиальных градиентов. Просто измените параметр типа для переключения между ними.
Синтаксис для Mozilla
Firefox использует отдельный синтаксис для линейных и радиальных градиентов, оба из которых очень сильно отличаются от своих коллег Webkit.
-moz-linear-gradient( [ || ,]? , [, ]*) -moz-radial-gradient( [ || ,]? [ || ,]? , [, ]*)
Вот простой пример CSS градиента в действии. Этот градиент идет от верхнего левого угла в нижний левый угол (другими словами, сверху вниз) и от красного до белого.
-webkit-gradient(linear, left top, left bottombottom, from(red), to(white)); -moz-linear-gradient(red, white)
Multiple Backgrounds (Указание нескольких фоновых картинок)
Поддержка браузеров:
· Safari: 3,2 +
· Firefox: 3.6 +
· Chrome: 3,0 +
· Opera: 10.5 +
· Internet Explorer: 9.0 +
Новая версия CSS позволяет добавлять элементам несколько фоновых картинок! Можно разместить изображения вверху, в центре, в углу и в других местах. Верстать сложные макеты станет намного проще.
background: url(noise.png), -webkit-gradient(linear, left top, left bottombottom, from(#999), to(#333)); background: url(noise.png), -moz-linear-gradient(#999, #333);
CSS3 имеет много возможностей , но есть те которые знать просто необходимо, чтоб не использовать Photoshop для создания некоторых элементов в дизайне сайта. Вот они!
· Border Radii (Скруглённые углы)
· Box Shadows (Добавляет тень к блочным элементам)
· Text Shadows (Добавляет тень к тексту)
· Gradients (Градиенты)
· Multiple Backgrounds (Указание нескольких фоновых картинок)
Каждый из этих инструментов даёт возможность заменить изображения которые вы может быть раньше использовали создавая их в Фотошопе. Это делает сайт более лёгким в обслуживании, так как вам понадобиться внести изменения в один CSS файл, без редактирования изображений в Photoshop.
И так давайте рассмотрим эти возможности более подробно.
Border Radii (Скруглённые углы)
Поддержка браузеров:
· Safari: 3,2 +
· Firefox: 3,0 +
· Chrome: 3,0 +
· Opera: 10.5 +
· Internet Explorer: 9.0 +
Вы скорей всего слышали о возможности скругление углов много раз. Она очень простая в использовании и поддерживается всеми современными браузерами. Давайте посмотрим на синтаксис.