Основные возможности CSS3
МИНОБРНАУКИ РОССИИ
ФЕДЕРАЛЬНОЕ ГОСУДАРСТВЕННОЕ БЮДЖЕТНОЕ
ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ ВЫСШЕГО ПРОФЕССИОНАЛЬНОГО ОБРАЗОВАНИЯ
«Чувашский государственный
университет имени И.Н. Ульянова»
Канашский филиал
Курсовая работа
Основные возможности CSS3
Канаш 2013
Содержание
Введение
. Общие сведения о CSS3
. Закругленные углы
. Тень у текста
. Выпадающее меню
. Разговорные блоки
. Навигация на вкладках
. Кнопки
. Загнутые края ленты
. Полупрозрачные блоки
. Эффект тиснения
. Поворот текста
. Вертикальная выпадающая панель
. 3D эффект для картинки
. 3D Куб
. Несколько бэкграундов
. Аналоговые часы
Заключение
Список источников
Введение
То, что сайт состоит из HTML страниц, знают практически все люди, и даже
школьники, но вот использование CSS ставит в тупик уже большое количество
людей. Вероятно, они просто боятся сложного словосочетания "таблицы
каскадных стилей" - есть в этом что-то от ГЭС и водопадов. На самом же
деле, CSS гораздо проще, чем многие думают.
Во-первых, это простой текстовый файл, имеющий расширение css.
Фактически, это настроечный файл для множества HTML страниц, позволяющий одним
исправлением изменить стиль всех страниц сайта. Это сделано для того, чтобы
разгрузить тяжелые страницы, отделив форматирование текста от его содержания.
Мода сейчас такова, что хорошая HTML страница должна быть чиста, и в ней не
должно попадаться всяких тегов, которыми изобилуют справочники по HTML 3.2 -
курсив, полужирное начертание, цитирование и т.д. Более того, использование
стилевых файлов позволяет более роскошно построить дизайн сайта, избавившись
даже от фреймов и таблиц, без которых, казалось бы, никуда не деться. К
примеру, как можно на странице разместить символ в строго указанной позиции?
Только через таблицы. А вот у CSS есть команда "абсолютная позиция",
которая и устанавливает объект в нужное место на экране, причем даже можно
вложить символ в символ. Конечно, ничто не дается даром - перед использованием
CSS HTML файл нужно основательно подготовить, включив в него теги блочной
верстки div и id для применения новых стилей. Для страниц со сплошным текстом
это не проблема.
Со временем стандарт CSS менялся: сейчас версия 2 уже уступила дорогу
версии 3, в которой было проведено множество интересных изменений. В частности,
теперь в стилях можно использовать анимационную трансформацию, переменные
(возможно, но не точно), а также, что больше всего радует глаз - всякий 3D
эффекты вроде теней над блоками. Дело в том, что найти полное описание
изменений в CSS3 достаточно сложно, ведь существует и еще один сдерживающий
фактор. Еще со времен появления CSS, в результате войн браузеров, каждый
браузер считал своим долгом не поддерживать стандарты в полной мере, вводя свои
особенности. Таким образом, многие эффекты проявляются лишь в отдельных
браузерах, а в других либо вовсе не отображаются, либо портят всю картину,
отображаясь с ошибкой. Менее всего подвержен ошибкам Firefox, в котором для
полной поддержки CSS3 были даже добавлены специфические moz-переменные для
работы с трехмерными объектами.
1. Общие сведения о CSS3
Интернет
не стоит на месте, это одна из наиболее динамичных областей экономики
<#"700663.files/image001.gif">
Рис. 1
. Тень у текста
Благодаря возможностям CSS3 можно создавать эффект тени как
для различных элементов веб-страницы, так и для самого текста. Это во многих
случаях позволяет отойти от использования изображений и повысить скорость
загрузки страниц сайта.
Параметр box-shadow. Это свойство CSS3 позволяет добавлять
эффект тени для элементов веб-страницы, например для блоков, созданных с помощью
тега div. Свойство box-shadow поддерживается всеми современными браузерами:
Internet Explorer 9 (при наличии тега doctype), Google Chrome 12.0, Mozilla
Firefox 4.0, Opera 11.0.
Синтаксис box-shadow: смещение по оси X _ смещение по оси Y _ радиус
размытия _ цвет тени. Второй вариант синтаксиса: цвет тени _ X _ Y _ R.
Оба варианта равнозначны и одинаково правильно обрабатываются браузерами.
Примеры использования параметра box-shadow (рис 2.)
Рис 2.
Блок №1 код: <div style="width:100px; background-color:yellow; height:50px; box-shadow:
5px 5px 0 fuchsia;">1</div>
Блок №2 box-shadow: fuchsia 5px 5px 10px;
Блок №3 box-shadow: 5px 5px 30px fuchsia;
Блок №4 box-shadow: #ff33ff 20px 5px 10px;
Параметр text-shadow. Его синтаксис идентичен синтаксису
box-shadow. С помощью параметра text-shadow можно добавлять декоративные
тени к тексту на веб-странице. (рис 3.)
Рис 3.
К сожалению даже Internet Explorer 9 не поддерживает параметр text-shadow.
4. Выпадающее меню
Навигация на сайте это неотъемлемый элемент, ведь с помощью нее
пользователь с легкостью может перейти к необходимой информации, не задаваясь
поиском информации теряя на это драгоценное время. Но порой необходимо
поместить в меню достаточно много информации, а это не весьма удобно, ведь меню
станет достаточно объемным и будет занимать много места, а это плохо скажется
на визуальном оформлении сайта. Что же делать в таком случае? Выход достаточно
простой, нам необходимо создать выпадающее меню для сайта, которое будет
отлично. Кроме того меню красочное, что позволяет ему отлично вписаться в любой
дизайн сайта, кроме этого можно легко настроить навигацию под себя. (рис 4.)
Рис 4.
5. Разговорные блоки
Можно оригинально оформить текст с помощью разнообразных разговорных
блоков, которые, опять таки, сделаны на основе CSS3 технологий. (Рис 5.)
Рис 5.
6. Навигация на вкладках
Навигация, зачастую, занимает множество места, если конечно у вас много в
ней информации, с помощью вкладок можно создать такую навигацию, чтобы
содержала множество информации, но при этом была элегантно оформлено и не
занимала много места. Вкладки стали весьма популярными в структуре сайта, они
помогают экономить место на ресурсе и привлекать пользователей своей анимацией
при смене закладок. (рис 6.)
Рис 6.
7. Кнопки
Без кнопок, неотъемлемой части HTML формы, не обходится ни один веб-сайт.
Однако не всех устраивает их традиционно стандартный внешний вид. Поэтому в
большинстве случает веб-мастер, подвергает ее трансформированию, дабы
гармонично вписать кнопку в дизайн веб-страницы.
Оформить кнопку можно различными способами, но самый простой и быстрый -
это использование свойств стилевого языка CSS. (рис 7.)
Рис 7.
8. Загнутые края ленты
Загнутые уголки были популярны в течение нескольких лет. Пользователь
видел естественно выглядящее слегка изогнутое поле, на деле же это оптическая
иллюзия созданная тенью в нижней части элемента. (рис. 8.)
Ещё недавно вам надо было делать тень в виде изображения в графической
программе Photoshop, Gimp или другой. В идеале это будет 24-битный PNG с
прозрачностью, который накладывается на любой фон, но это может вызвать
проблемы в старых браузерах.
К счастью, CSS3 предоставляет хорошую альтернативу с некоторыми
преимуществами. (рис 9.)
· Эффект работает в современных браузерах, но не будет применяться в
браузерах, которые его не поддерживают.
· Тени могут быть наложены на любой фон без дополнительных
изображений.
· Эффект применяется к элементам любого размера.
· Используемый код занимает намного меньше байт, чем рисунок
тени.
· Тень легко настраивается. Вы можете изменить цвет или глубину
небольшой модификацией кода.
Рис. 9.
9. Полупрозрачные блоки
Эффект полупрозрачности элемента хорошо заметен на фоновом рисунке и
получил распространении в разных операционных системах, потому что смотрится
стильно и красиво. В веб-дизайне полупрозрачность также применяется и
достигается за счёт свойства opacity или формата цвета RGBA, который задаётся
для фона. (рис 10.)
Свойство
opacity
Основная особенность этого свойства состоит в том, что значение
прозрачности действует на все дочерние элементы внутри, а не только на фон. Это
значит, что и фон и текст станут полупрозрачными и увеличить уровень
прозрачности, добавляя opacity: 1, не получится. В табл. 1 показан вид текста и
фона с разными значениями opacity.
Табл. 1. Вид блока в зависимости от значения opacity
Рис 10.
. Эффект тиснения
таблица стиль изображение навигация
Текст с эффектом тиснения применяется на данный момент очень широко. В
2009 году этот эффект был признан трендом года среди веб-дизайнеров. Ярким
примером применения эффекта тиснения являются приложения на устройствах Apple.
Вот к примеру как выглядит текста на iPhone: (рис 11.)
Рис 11.
С помощью CSS3 есть возможность эмулировать такой эффект как тиснение
текста. Для этого опять же будет использоваться свойство text-shadow. И самое
главное - мы избежим использования Photoshop для придания тексту нужного
эффекта.
Рассмотрим два варианта:
. Светлый текст на темном фоне. Нам нужно использовать text-shadow
со смещением по оси y на «-1″, при этом используя более темный цвет. В
данном примере использован темно синий. (рис 12.)
Рис 12.
text-shadow: 0px -1px 0px #374683;
2. Темный текст на светлом фоне. Здесь мы будем использовать
text-shadow с положительным смещением по оси х и цветом более светлым чем текст
или максимально близким к белому. (рис 13.)
Рис 13.
text-shadow: 0px 1px 0px #e5e5ee;
. Поворот
текста
С недавнего времени почти все браузеры стали поддерживать вращение
HTML-элементов. Работать данный вариант будет даже в IE 5.5. Давайте сначала
возьмем простой HTML-код:
<div>
<span>
<span>
<span>
</div>
Порядок отображения даты вы можете выбрать свой. Теперь собственно о
CSS3.
Для поворота текста мы будем использовать свойство transform. Для Webkit
браузеров и браузера Firefox желательно использовать собственные конструкции:
1 - webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
Для того чтобы увидеть поворот элемента нам нужно использовать свойство
display:block. Используйте его у того элемента, который вы хотите повернуть.
Добавьте display:block в span. (рис 14.)
Как будет выглядеть повернутый текст? Ниже вы можете посмотреть как
данное свойство отображается в IE, Safari и Firefox’e. Самое большое упущение в
том, как рендерится текст в каждом из браузеров. То как это свойство
отображается в разных браузерах создает проблему поиска идеального отображения.
Возможно в самом ближайшем будущем мы увидим решение этой проблемы
разработчиками браузеров.
Рис 14.
Добавление
внешней обводки для текста используя text-stroke
Обводку текста сделать достаточно просто. Давайте для начала зададим цвет
текста. В нашем случае пусть будет красный. Далее задаем обводку. Тут 2
параметра: первый - цвет обводки (возмем черный), второй - толщина линии (1px).
Для этого примера создадим класс stroke:
1.stroke {
color: #c00; /* цвет текста */
text-stroke: 1px #000; /* толщина и цвет обводки */
}
Выглядеть эффект будет следующим образом: (рис 15.)
Рис 15.
Рассмотрим еще один вариант применения данного свойства. Сделаем основной
текст прозрачным, а обводку черного цвета. Чтобы сделать текст прозрачным,
воспользуемся еще одним свойством CSS3 text-fill-color.
1.stroke-transparent {
text-stroke: 1px #000;
3 text-fill-color:
transparent;
}
Выглядеть это будет так: (рис 16.)
Рис. 16.
Эффект
выезда пункта меню при наведении без применения JavaScript
Один из интересных эффектов, который появился в CSS3 это возможность
сделать выезжающие пункты меню без применения JavaScript. Раньше такой эффект
реализовывался с помощью MooTools, jQuery или DojoToolkit. Теперь же мы можем
отказаться от JavaScript в пользу CSS3.
Сначала зададим «натуральное» состояние пункта меню:
cursor: pointer;
-webkit-transition: padding-left 250ms ease-out;
-moz-transition: padding-left 250ms ease-out;
5 }
Анимация, которую мы задаем выше довольно обычная и гладкая с
использованием смещения (padding). Теперь после того как мы задали обычное
состояние пункта меню, давайте зададим состояние, когда наведен курсор мыши
(hover):
1 #animateList li a:hover {
padding-left: 20px;
3 }
Теперь когда мы подводим курсор мыши к нашим ссылкам, мы получаем гладкий
сдвиг вправо, который происходит в течении 250 милисекунд. Вот и собственно
все. И мы не использовали JavaScript!
12. Вертикальная выпадающая панель
Очень часто в шаблонах можно встретить выпадающие навигационные элементы.
(рис 17.) Разработчики используют данный тип скрытых меню для вывода
дополнительных скрытых ссылок, тематически связанных с основным пунктом. Можно
найти примеры выскальзывающих панелей или различных меню в стилей аккордеона,
которые реализуют такой принцип навигации.
Обширные меню часто используются на сайтах электронной коммерции или
просто на обширных порталах. «Мега» меню становятся все более и
более популярны, потому что являются эффективным решением для отображения
большого количества информации, не нарушая при этом разметку страницы.
Практически все современные браузеры поддерживают основные функции css3,
это позволяет более гибко настраивать эффекты и внешний вид навигационных
панелей, без подключения javascript и каких бы то ни было дополнительных файлов
изображений, используя в работе только команды CSS3.
Рис. 17.
13. 3D эффект для картинки
Создавая слайдер или галерею то появляется вопрос, о том как оформить
навигацию по ней, чтобы пользователь мог с легкостью выбирать необходимую для
него картинку, при этом не загромождая сам дизайн различными компонентами, на
помощь приходят замечательные трансформации css, с помощью которых мы создадим
замечательный выбор миниатюр, которые по умолчанию будут скрыты, но при нажатии
на кнопку, произойдет эффект объемного раскрытия панели с возможностью выбора
миниатюр. (рис 18) Такой эффект отлично подойдет для любых изображений.
Рис 18.
14. 3D Куб
Еще один вариант использования трехмерного эффекта. Информацию можно
представить в виде куба c тремя гранями. (рис 19)
Рис. 19.
. Несколько бэкграундов
Ранее в CSS 2 бэкгрануд (фоновое изображение) для блока мог быть
задан только один:
#box {background: url(1.png) no-repeat center;}
Теперь же фоновые изображения можно перечислять через запятую:
#box {background:url(1.png) top left no-repeat,url(2.png) top
right no-repeat,url(3.png) bottom right no-repeat,url(4.png) bottom left
no-repeat;}
Параметры позиционирования: top, bottom, right, left и параметры
для определения повтора элемента: repeat-x, repeat-y, no-repeat перешли
из предыдущей спецификации без изменений.
16. Аналоговые часы
Создатели своих веб-ресурсов часто любят устанавливать такие гаджеты как
часы, (рис 21.) Ключевой особенностью является то, что часы учитывают часовой
пояс установлен у Вас на компьютере, а как вы знаете, некоторые используют
виджеты в которых уже зафиксирован часовой пояс для определенной страны, то
есть получается что я, житель Украины, захожу на русский сайт, и мне отображается
русское время, а не украинское.
Рис. 20.
Заключение
- это новый стандарт оформления HTML-документов значительно расширяющий
возможности предыдущего стандарта CSS2.1.
Многие возможности, которые были труднодоступны в CSS2.1, то есть
требовали использования дополнительных внешних программ (таких как Adobe
Photoshop), скриптов (таких как JavaScript) или специальных
"хитростей" могут легко достигаться в CSS3 за счет использования
новых свойств оформления.
В CSS3 Вы можете:
· Создавать элементы со сглаженными углами;
· Создавать линейные и сферические градиенты;
· Более гибко оформлять фоновую картинку элементов;
· Добавлять к элементам и к тексту элементов тени;
· Использовать небезопасные шрифты (не боясь при этом, что
они будут не поддерживаться браузером пользователя);
· Создавать анимацию и различные эффекты переходов;
Список источников
1. http://vdblog.ru
2. http://www.greenlight5.com
. http://s-sd.ru
. http://www.rudebox.org.ua
. http://www.webpress.uz
. http://htmlbook.ru
. http://www.rusdigi.org
. http://dbmast.ru
. http://www.sono-design.ru
10. <http://www.imagecms.net/blog/news-it-and-web/novye-vozmozhnosti-css3>
. http://www.designonstop.com