Лабораторная работа № 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позволяет подключать шрифты.

 

@font-face {font-family:opensans;/* Задаем имя шрифта */src:url('opensans.woff')/* Указываем местонахождение нашего шрифта */ }

Текст

Свойство 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.