Основные возможности CSS3

Размещено на http://www.allbest.ru/

1

МИНОБРНАУКИ РОССИИ

ФЕДЕРАЛЬНОЕ ГОСУДАРСТВЕННОЕ БЮДЖЕТНОЕ ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ ВЫСШЕГО ПРОФЕССИОНАЛЬНОГО ОБРАЗОВАНИЯ

«Чувашский государственный университет имени И.Н. Ульянова»

Канашский филиал

Курсовая работа

Основные возможности CSS3

Канаш 2013



Содержание

Введение

1. Общие сведения о CSS3

2. Закругленные углы

3. Тень у текста

4. Выпадающее меню

5. Разговорные блоки

6. Навигация на вкладках

7. Кнопки

8. Загнутые края ленты

9. Полупрозрачные блоки

10. Эффект тиснения

11. Поворот текста

12. Вертикальная выпадающая панель

13. 3D эффект для картинки

14. 3D Куб

15. Несколько бэкграундов

16. Аналоговые часы

Заключение

Список источников



Введение

То, что сайт состоит из 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

Интернет не стоит на месте, это одна из наиболее динамичных областей экономики, и, соответственно развиваются также и стандарты, принятые в этой области. Их разработкой и повсеместным внедрением занимается специально созданная с этой целью организация - Консорциум Всемирной Паутины (W3C). Одним из последних таких стандартов, работа над которым ведется и в текущем периоде, является CSS3 - расширенная и усовершенствованная спецификация таблиц стилей.

Встроенные в CSS3 возможности действительно открывают новую веху в развитии технологий веб-разработки, особенно при работе в новых браузерах, таких как Internet Explorer 10. Прежде всего, стоит отметить переработанную систему позиционирования элементов и множество новых доступных селекторов. Возможности CSS3 включают эффекты теней и скругленные углы у блоков, что позволяет избавиться от большого количества ненужной разметки и использования специальных изображений, как это было в предыдущей версии каскадных стилей. Сюда же относится и возможность устанавливать изображения в качестве фона и использовать их как границы. Существенно упростилась и работа с анимацией - если раньше для ее создания нужно было работать с довольно сложным в освоении языком Java Script, то теперь возможностей самых каскадных стилей для этих целей вполне достаточно.

Связка CSS3 + HTML5 уже активно используется на сайтах ведущих технологических компаний, таких как Adobe, Mozilla и Apple. И хотя пока нельзя сказать о поддержке указанных спецификаций современными браузерами в полной мере, но их разработчики постепенно расширяют перечень поддерживаемых классов. Если вы только начинаете изучать языки верстки, рекомендую ознакомится с советами как научиться верстке сайтов в одном из уроков на нашем сайте.

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

2. Закругленные углы

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

Одним из таких приёмов можно смело назвать способ закругленных углов. (рис.1).

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

Еще есть вариант написать огромнейший html-код, который будет здорово грузить Ваш сайт. Способ не очень то и хороший, но раньше, да и сейчас, некоторые веб-мастера им охотно пользуются. Не зная или не хотя знать о возможности закругления углов в CSS3.

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

С выходом CSS3 все эти способы можно смело отправлять в утиль, потому что теперь закругления углов на сайте можно сделать быстро и просто. Единственным недостатком данного способа является отображение в старых версиях Internet Explorer. К слову сказать, даже 8-ая версия ИЕ не поддерживает CSS3. Не говоря уже о 6-ой и 7-ой версиях.

Рис. 1

3. Тень у текста

Благодаря возможностям 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.)

Рис 8.

Ещё недавно вам надо было делать тень в виде изображения в графической программе Photoshop, Gimp или другой. В идеале это будет 24-битный PNG с прозрачностью, который накладывается на любой фон, но это может вызвать проблемы в старых браузерах.

К счастью, CSS3 предоставляет хорошую альтернативу с некоторыми преимуществами. (рис 9.)

· Эффект работает в современных браузерах, но не будет применяться в браузерах, которые его не поддерживают.

· Тени могут быть наложены на любой фон без дополнительных изображений.

· Эффект применяется к элементам любого размера.

· Используемый код занимает намного меньше байт, чем рисунок тени.

· Тень легко настраивается. Вы можете изменить цвет или глубину небольшой модификацией кода.

Рис. 9.

9. Полупрозрачные блоки

Эффект полупрозрачности элемента хорошо заметен на фоновом рисунке и получил распространении в разных операционных системах, потому что смотрится стильно и красиво. В веб-дизайне полупрозрачность также применяется и достигается за счёт свойства opacity или формата цвета RGBA, который задаётся для фона. (рис 10.)

Свойство opacity

Основная особенность этого свойства состоит в том, что значение прозрачности действует на все дочерние элементы внутри, а не только на фон. Это значит, что и фон и текст станут полупрозрачными и увеличить уровень прозрачности, добавляя opacity: 1, не получится. В табл. 1 показан вид текста и фона с разными значениями opacity.



Табл. 1. Вид блока в зависимости от значения opacity

0.1	0.4	0.8	1

Рис 10.

10. Эффект тиснения

таблица стиль изображение навигация

Текст с эффектом тиснения применяется на данный момент очень широко. В 2009 году этот эффект был признан трендом года среди веб-дизайнеров. Ярким примером применения эффекта тиснения являются приложения на устройствах Apple. Вот к примеру как выглядит текста на iPhone: (рис 11.)

Рис 11.

С помощью CSS3 есть возможность эмулировать такой эффект как тиснение текста. Для этого опять же будет использоваться свойство text-shadow. И самое главное - мы избежим использования Photoshop для придания тексту нужного эффекта.

Рассмотрим два варианта:

1. Светлый текст на темном фоне. Нам нужно использовать text-shadow со смещением по оси y на «-1?, при этом используя более темный цвет. В данном примере использован темно синий. (рис 12.)

Рис 12.

1 text-shadow: 0px -1px 0px #374683;

2. Темный текст на светлом фоне. Здесь мы будем использовать text-shadow с положительным смещением по оси х и цветом более светлым чем текст или максимально близким к белому. (рис 13.)

Рис 13.

1 text-shadow: 0px 1px 0px #e5e5ee;

11. Поворот текста

С недавнего времени почти все браузеры стали поддерживать вращение HTML-элементов. Работать данный вариант будет даже в IE 5.5. Давайте сначала возьмем простой HTML-код:

<div class="example-date">

<span class="day">31</span>

<span class="month">July</span>

<span class="year">2009</span>

</div>

Порядок отображения даты вы можете выбрать свой. Теперь собственно о CSS3.

Для поворота текста мы будем использовать свойство transform. Для Webkit браузеров и браузера Firefox желательно использовать собственные конструкции:

1 - webkit-transform: rotate(-90deg);

2 -moz-transform: rotate(-90deg);

Для того чтобы увидеть поворот элемента нам нужно использовать свойство display:block. Используйте его у того элемента, который вы хотите повернуть. Добавьте display:block в span. (рис 14.)

Как будет выглядеть повернутый текст? Ниже вы можете посмотреть как данное свойство отображается в IE, Safari и Firefox'e. Самое большое упущение в том, как рендерится текст в каждом из браузеров. То как это свойство отображается в разных браузерах создает проблему поиска идеального отображения. Возможно в самом ближайшем будущем мы увидим решение этой проблемы разработчиками браузеров.

Рис 14.

Добавление внешней обводки для текста используя text-stroke

Обводку текста сделать достаточно просто. Давайте для начала зададим цвет текста. В нашем случае пусть будет красный. Далее задаем обводку. Тут 2 параметра: первый - цвет обводки (возмем черный), второй - толщина линии (1px). Для этого примера создадим класс stroke:

1.stroke {

2 color: #c00; /* цвет текста */

3 text-stroke: 1px #000; /* толщина и цвет обводки */

4}

Выглядеть эффект будет следующим образом: (рис 15.)

Рис 15.

Рассмотрим еще один вариант применения данного свойства. Сделаем основной текст прозрачным, а обводку черного цвета. Чтобы сделать текст прозрачным, воспользуемся еще одним свойством CSS3 text-fill-color.

1.stroke-transparent {

2 text-stroke: 1px #000;

3 text-fill-color: transparent;

4}

Выглядеть это будет так: (рис 16.)

Рис. 16.

Эффект выезда пункта меню при наведении без применения JavaScript

Один из интересных эффектов, который появился в CSS3 это возможность сделать выезжающие пункты меню без применения JavaScript. Раньше такой эффект реализовывался с помощью MooTools, jQuery или DojoToolkit. Теперь же мы можем отказаться от JavaScript в пользу CSS3.

Сначала зададим «натуральное» состояние пункта меню:

1 #animateList li a {

2 cursor: pointer;

3 -webkit-transition: padding-left 250ms ease-out;

4 -moz-transition: padding-left 250ms ease-out;

5 }

Анимация, которую мы задаем выше довольно обычная и гладкая с использованием смещения (padding). Теперь после того как мы задали обычное состояние пункта меню, давайте зададим состояние, когда наведен курсор мыши (hover):

1 #animateList li a:hover {

2 padding-left: 20px;

3 }

Теперь когда мы подводим курсор мыши к нашим ссылкам, мы получаем гладкий сдвиг вправо, который происходит в течении 250 милисекунд. Вот и собственно все. И мы не использовали JavaScript!

12. Вертикальная выпадающая панель

Очень часто в шаблонах можно встретить выпадающие навигационные элементы. (рис 17.) Разработчики используют данный тип скрытых меню для вывода дополнительных скрытых ссылок, тематически связанных с основным пунктом. Можно найти примеры выскальзывающих панелей или различных меню в стилей аккордеона, которые реализуют такой принцип навигации.

Обширные меню часто используются на сайтах электронной коммерции или просто на обширных порталах. «Мега» меню становятся все более и более популярны, потому что являются эффективным решением для отображения большого количества информации, не нарушая при этом разметку страницы.

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

Рис. 17.

13. 3D эффект для картинки

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



Рис 18.

14. 3D Куб

Еще один вариант использования трехмерного эффекта. Информацию можно представить в виде куба c тремя гранями. (рис 19)

Рис. 19.

15. Несколько бэкграундов

Ранее в 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.

Заключение

CSS3 - это новый стандарт оформления HTML-документов значительно расширяющий возможности предыдущего стандарта CSS2.1.

Многие возможности, которые были труднодоступны в CSS2.1, то есть требовали использования дополнительных внешних программ (таких как Adobe Photoshop), скриптов (таких как JavaScript) или специальных "хитростей" могут легко достигаться в CSS3 за счет использования новых свойств оформления.

В CSS3 Вы можете:

· Создавать элементы со сглаженными углами;

· Создавать линейные и сферические градиенты;

· Более гибко оформлять фоновую картинку элементов;

· Добавлять к элементам и к тексту элементов тени;

· Использовать небезопасные шрифты (не боясь при этом, что они будут не поддерживаться браузером пользователя);

· Создавать анимацию и различные эффекты переходов;



Список источников

1. http://vdblog.ru

2. http://www.greenlight5.com

3. http://s-sd.ru

4. http://www.rudebox.org.ua

5. http://www.webpress.uz

6. http://htmlbook.ru

7. http://www.rusdigi.org

8. http://dbmast.ru

9. http://www.sono-design.ru

10. http://www.imagecms.net/

11. http://www.designonstop.com

Размещено на Allbest.ru