Академический Документы
Профессиональный Документы
Культура Документы
КУРСОВАЯ РАБОТА
по дисциплине
Выполнил:
Исламбеков Эрсултан
Руководитель:
преподаватель Баялиева
Э.Ж.
Дата защиты
Оценка
Подпись руководителя
Подпись студента
Бишкек 2023
Оглавление
Введение 3
1. Общие сведения о CSS35
2. Закругленные углы 6
3. Тень у текста 7
4. Выпадающее меню 8
5. Разговорные блоки 9
6. Навигация на вкладках 10
7. Кнопки 10
8. Загнутые края ленты 11
9. Полупрозрачные блоки 12
10. Эффект тиснения 13
11. Поворот текста 14
12. Вертикальная выпадающая панель 17
13. 3D эффект для картинки 18
14. 3D Куб 19
15. Несколько бэкграундов 19
16. Аналоговые часы 20
Заключение 21
Список источников22
2
Введение
То, что сайт состоит из HTML страниц, знают практически все люди, и
даже школьники, но вот использование CSS ставит в тупик уже большое
количество людей. Вероятно, они просто боятся сложного словосочетания
"таблицы каскадных стилей" – есть в этом что-то от ГЭС и водопадов. На самом
же деле, CSS гораздо проще, чем многие думают.
Во-первых, это простой текстовый файл, имеющий расширение css.
Фактически, это настроечный файл для множества HTML страниц,
позволяющий одним исправлением изменить стиль всех страниц сайта. Это
сделано для того, чтобы разгрузить тяжелые страницы, отделив
форматирование текста от его содержания. Мода сейчас такова, что хорошая
HTML страница должна быть чиста, и в ней не должно попадаться всяких тегов,
которыми изобилуют справочники по HTML 3.2 – курсив, полужирное
начертание, цитирование и т.д. Более того, использование стилевых файлов
позволяет более роскошно построить дизайн сайта, избавившись даже от
фреймов и таблиц, без которых, казалось бы, никуда не деться. К примеру, как
можно на странице разместить символ в строго указанной позиции? Только
через таблицы. А вот у CSS есть команда "абсолютная позиция", которая и
устанавливает объект в нужное место на экране, причем даже можно вложить
символ в символ. Конечно, ничто не дается даром – перед использованием CSS
HTML файл нужно основательно подготовить, включив в него теги блочной
верстки div и id для применения новых стилей. Для страниц со сплошным
текстом это не проблема.
Со временем стандарт CSS менялся: сейчас версия 2 уже уступила дорогу
версии 3, в которой было проведено множество интересных изменений. В
частности, теперь в стилях можно использовать анимационную
трансформацию, переменные (возможно, но не точно), а также, что больше
всего радует глаз – всякий 3D эффекты вроде теней над блоками. Дело в том,
что найти полное описание изменений в CSS3 достаточно сложно, ведь
3
существует и еще один сдерживающий фактор. Еще со времен появления CSS, в
результате войн браузеров, каждый браузер считал своим долгом не
поддерживать стандарты в полной мере, вводя свои особенности. Таким
образом, многие эффекты проявляются лишь в отдельных браузерах, а в других
либо вовсе не отображаются, либо портят всю картину, отображаясь с ошибкой.
Менее всего подвержен ошибкам Firefox, в котором для полной поддержки
CSS3 были даже добавлены специфические moz-переменные для работы с
трехмерными объектами.
4
1. Общие сведения о CSS3
2. Закругленные углы
3. Тень у текста
7
Рис 2.
Рис 3.
4. Выпадающее меню
8
необходимо поместить в меню достаточно много информации, а это не весьма
удобно, ведь меню станет достаточно объемным и будет занимать много места,
а это плохо скажется на визуальном оформлении сайта. Что же делать в таком
случае? Выход достаточно простой, нам необходимо создать выпадающее меню
для сайта, которое будет отлично. Кроме того меню красочное, что позволяет
ему отлично вписаться в любой дизайн сайта, кроме этого можно легко
настроить навигацию под себя. (рис 4.)
Рис 4.
5. Разговорные блоки
Рис 5.
9
6. Навигация на вкладках
Рис 6.
7. Кнопки
10
Рис 7.
Рис 8.
11
Тени могут быть наложены на любой фон без дополнительных
изображений.
Эффект применяется к элементам любого размера.
Используемый код занимает намного меньше байт, чем рисунок тени.
Тень легко настраивается. Вы можете изменить цвет или глубину
небольшой модификацией кода.
Рис. 9.
9. Полупрозрачные блоки
12
Табл. 1. Вид блока в зависимости от значения opacity
0.1 0.4 0.8 1
Рис 10.
Рис 11.
13
И самое главное – мы избежим использования Photoshop для придания тексту
нужного эффекта.
Рассмотрим два варианта:
1. Светлый текст на темном фоне. Нам нужно использовать text-shadow
со смещением по оси y на «-1″, при этом используя более темный цвет. В
данном примере использован темно синий. (рис 12.)
Рис 12.
Рис 13.
Рис 14.
15
параметра: первый – цвет обводки (возмем черный), второй – толщина линии
(1px). Для этого примера создадим класс stroke:
1.stroke {
2 color: #c00; /* цвет текста */
3 text-stroke: 1px #000; /* толщина и цвет обводки */
4}
Выглядеть эффект будет следующим образом: (рис 15.)
Рис 15.
Рис. 16.
Рис. 17.
18
Рис 18.
14. 3D Куб
Рис. 19.
19
#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 перешли из
предыдущей спецификации без изменений.
Рис. 20.
20
Заключение
21
Список источников
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
22