Лабораторная работа № 5. Новые возможности в CSS3
Цель: изучить новые возможности для оформления фона web-страницы, текста, границ элементов, цвета; возможности использования градиента и трансформации в оформлении элементов.
Краткая теория
Фон
Свойство background-size устанавливает размер фоновых изображений (в пикселях или в процентах), например background-size:150px 250px;
В свойстве background-image можно указать несколько фоновых изображений одновременно:- background-image: url (wis.gif), url (mount3.jpg);- background-size: 150px 40px, 100% 100%.Цвет
- с помощью HSL – оттенок, насыщенность, яркость;
- с помощью RGBA – цвет и прозрачность;
- с помощью HSLA – цвет и прозрачность.
Границы
Свойство border-radius позволяет делать углы элементов сглаженными.
С помощью свойства box-shadow можно добавлять к элементам страницы тени.
С помощью свойства border-image можно вставлять произвольные изображения в качестве границы элемента.
Шрифт
Свойство @font-faceпозволяет подключать шрифты.
Текст
Свойство text-shadow добавляет к тексту элементов тени (можно несколько).
Указывается величина смещения тени от текста по горизонтали и вертикали (может быть отрицательной), а также радиус размытия и цвет тени. Примеры:
text-shadow:3px 2px #FFAE00;text-shadow:1px 1px 10px #FFAE00;text-shadow:2px 2px 2px #FFAE00, 2px 2px 15px #1435AD.Свойство text-overflow указывает, что должно случиться с текстом, вышедшем за пределы границ элемента.
Трансформации
Cвойство transform трансформирует элементы. Его значение – функция трансформирования:
- translate(x,y) смещает элемент на указанное количество пикселей по осям X и Y rotate(градусы) поворачивает элемент на указанное количество градусов по часовой стрелке;
- scale(x,y) растягивает элемент в ширину или высоту;
- skew(x,y) задает перекосы по оси X и Y под заданным углом.
Градиент
В CSS3 имеются встроенные свойства для создания градиентов. Для поддержки градиентов требуется добавить префиксы: для IE10+ требуется префикс -ms, для Chrome и Safari префикс -webkit, для Opera префикс -o и для Firefox префикс –moz.
- линейный градиент linear-gradient;
- сферический градиент radial-gradient.
Переходы
С помощью свойства transition можно создавать эффекты перехода, указав какое CSS свойство будет изменяться и скорость выполнения этих изменений в секундах. Чтобы добавить эффект перехода к нескольким свойствам, надо просто перечислить их названия через запятую.
Задания к лабораторной работе № 5
Исходные данные находятся в папке Лаб5.Возможности CSS3.
Задание 1. Продемонстрировать на своих web-страницах новые возможности CSS3 для оформления фона web-страницы, текста, границ элементов, цвета. Применить все описанные выше свойства для элементов своих web-страниц.
Задание 2. Изучить способы трансформации рисунка на своей второй странице (все 4).
Задание 3. Изучить возможности использования градиента на примерах в файлах Gradient1.html, Gradient2.html, Gradient3.html. Применить на своей странице.
Задание 4. Научиться применять эффекты перехода на примерах файлов prim1.html, prim2.html, prim3.html. Применить на своей странице
Получившиеся HTML-документы сохранить в новых файлах.
1.6. Лабораторная работа № 6. Анимация. Создание
выпадающего меню
Цель: изучить свойства анимации, научиться создавать выпадающие меню.
Краткая теория
Анимация
Свойства анимации поддерживаются браузерами IE10+, Firefox и Opera. Для браузеров Chrome и Safari перед свойством требуется добавить префикс -webkit.
Для создания анимации в CSS3 используется свойство @keyframes. Оно представляет собой контейнер, в который помещаются различные свойства оформления.
Чтоб анимировать элемент, надо добавить ему свойство animation и указать в нем имя анимации (1-е значение) и время (2-е значение), в течении которого она будет выполняться. Также можно устанавливать количество повторов анимации (3-е значение).
@keyframes имяАнимации{from {CSS свойства}/* Оформление элемента перед началом анимации */to {CSS свойства}/* Оформление элемента после завершения анимации */}#wrap1 {animation:anim 4s 3;}С помощью % можно более точно контролировать ход выполнения анимации, например, можно указать, что определенный элемент в начале анимации (0%) имеет один цвет, к середине (50%) окрашивается в другой цвет, а к концу (100%) – в третий цвет.
Пример1:
<html>
<style type='text/css'>
@-webkit-keyframes anim {
0% {margin-left:3px;margin-top:3px;background-color:#7F0055;}
30% {margin-left:3px;margin-top:250px;background-color:#7F0055;}
60% {margin-left:500px;margin-top:250px;background-color:black;}
100% {margin-left:3px;margin-top:3px;background-color:#7F0055;}
}
#wrap1 {
border:2px #000 solid;
background-color:#7F0055;
height:100px;
width:100px;
font-size:2em;
animation:anim 6s 3;
-webkit-animation:anim 6s 3;
}
</style>
<body>
<div id="wrap1"></div>
</body>
</html>
Пример 2:
<style type="text/css">
#holder {
margin:50px auto;
-webkit-perspective:600px;
-moz-perspective:600px;
text-indent: 0px;
}
.box {
position: relative;
margin: 0 auto;
height: 200px;
width: 200px;
-webkit-animation: spin 20s infinite linear;
-moz-animation: spin 20s infinite linear;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
}
.box div {
position: absolute;
height: 200px;
width: 200px;
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5);
-webkit-animation:rotate 15s infinite linear;
-moz-animation:rotate 15s infinite linear;
}
.box div img {width:200px; height:200px;
border-radius:200px;
-webkit-animation:rot 10s infinite linear;
-moz-animation:rot 10s infinite linear;
padding: 0;
}
.box div.side1 {
background:rgba( 213, 62, 7, 0.8);
-webkit-transform:translateZ(100px);
-moz-transform:translateZ(100px);
}
.box div.side2 {
background:rgba( 127, 255, 212, 0.8);
-webkit-transform:rotateY(90deg) translateZ(100px);
-moz-transform:rotateY(90deg) translateZ(100px);
}
.box div.side3 {
background:rgba( 255, 219, 88, 0.8);
-webkit-transform:rotateY(180deg) translateZ(100px);
-moz-transform:rotateY(180deg) translateZ(100px);
}
.box div.side4 {
background:rgba( 153, 17, 153, 0.8);
-webkit-transform:rotateY(-90deg) translateZ(100px);
-moz-transform:rotateY(-90deg) translateZ(100px);
}
.box div.side5 {
background:rgba( 0, 71, 171, 0.8);
-webkit-transform:rotateX(-90deg) translateZ(100px) rotate(180deg);
-moz-transform:rotateX(-90deg) translateZ(100px) rotate(180deg);
}
.box div.side6 {
background:rgba( 0, 171, 147, 0.8);
-webkit-transform:rotateX(90deg) translateZ(100px);
-moz-transform:rotateX(90deg) translateZ(100px);
}
@-moz-keyframes spin {
0% {-moz-transform: rotateX(0deg) rotateY(0deg);}
100% {-moz-transform: rotateX(1080deg) rotateY(360deg);}
}
@-webkit-keyframes spin {
0% {-webkit-transform: rotateX(0deg) rotateY(0deg);}
100% {-webkit-transform: rotateX(1080deg) rotateY(360deg);}
}
@-moz-keyframes rot {
0% {-moz-transform: rotate(0deg);}
100% {-moz-transform: rotate(360deg);}
}
@-webkit-keyframes rot {
0% {-webkit-transform: rotate(0deg);}
100% {-webkit-transform: rotate(360deg);}
}
</style>
<div id="holder">
<div class="box">
<div class="side1"><img src="1.jpg" /></div>
<div class="side2"><img src="2.jpg" /></div>
<div class="side3"><img src="3.jpg" /></div>
<div class="side4"><img src="4.jpg" /></div>
<div class="side5"><img src="5.jpg" /></div>
<div class="side6"><img src="6.jpg" /></div>
</div>
</div>
Задания к лабораторной работе № 6
Задание 1. Изучите, как создать анимацию. Для этого сохраните код примера1 и примера2 как веб-страницы и отобразите с помощью браузера. Для правильного отображения примера2 необходимо иметь 6 графических файлов.
Задание 2. Разработайте 2–3 своих примера с анимацией (например, прыгающий шар, метеоритный дождь, выезжающая машинка и т.д.). Сохраните в новом файле.
Задание 3. Создайте выпадающее меню с пунктами: лаб1, лаб2 …лаб6. Подпункты меню должны быть ссылками на созданные в процессе выполнения соответствующих работ ваши web-страницы. Названия подпунктов придумайте сами.
Глава 2. JAVA SCRIPT
2.1. Лабораторная работа № 1. Арифметические, логические
операторы, операторы сравнения в JavaScript.