Тема 10. CSS vs CSS3 презентация
Содержание
- 2. СОДЕРЖАНИЕ Прозрачность изображений Градиентный фон Новые свойства для границ Эффекты с
- 3. CSS vs CSS3 CSS3 является новейшим стандартом для стилей CSS3 полностью
- 4. СОЗДАНИЕ ЭФФЕКТА ПРОЗРАЧНОСТИ Для того, чтобы сделать изображение прозрачным используются свойства
- 5. ПРИМЕР <!DOCTYPE html> <html> <head> <style> img { opacity: 0.4;
- 6. ЭФФЕКТЫ ПРОЗРАЧНОСТИ ВМЕСТЕ СО СВОЙСТВОМ HOVER <!DOCTYPE html> <html> <head> <style>
- 7. РЕЗУЛЬТАТ
- 8. ПРМЕР ПРОЗРАЧНОГО DIV-а Файл со стилями: div.background { background: url(pisoi.jpg)
- 9. HTML ФАЙЛ <body> <div class="background"> <div class="trans"> <p>Folosindu-se de vazul
- 10. РЕЗУЛЬТАТ
- 11. НОВЫЕ СВОЙСТВА ДЛЯ ГРАНИЦ Новые свойства можно применить для округления границ,
- 12. ПРИМЕР 1 div.trans { margin: 30px; background-color: #ffffff;
- 13. ПРИМЕР 2 div.trans { margin: 30px; background-color: #ffffff;
- 14. НОВЫЕ СВОЙСТВА ДЛЯ ФОНА Дополнительно к существующим свойствам, появились: background-size –
- 15. ПРИМЕР РАСПОЛОЖЕНИЯ ИЗОБРАЖЕНИЯ ФОНА В PADDING-BOX div.trans { margin: 30px;
- 16. ПРИМЕР РАСПОЛОЖЕНИЯ ИЗОБРАЖЕНИЯ ФОНА В CONTENT-BOX div.trans { margin: 30px;
- 17. ОПРЕДЕЛЕНИЕ НЕСКОЛЬКИХ ИЗОБРАЖЕНИЙ КАК ФОН CSS3 позволяет определить несколько изображений как
- 18. РЕЗУЛЬТАТ ПРИМЕНЕНИЯ СТИЛЯ
- 19. ОПРЕДЕЛЕНИЯ ГРАДИЕНТА ДЛЯ ФОНА Градиент – это переход одного цвета в
- 20. ОПРЕДЕЛЕНИЕ ЛИНЕЙНОГО ГРАДИЕНТА Чтобы создать линейный градиент должны быть определены по
- 21. РЕЗУЛЬТАТ ПРИМЕНЕНИЯ СТИЛЯ
- 22. ОПРЕДЕЛЕНИЕ ГРАДИЕНТА „Left to Right” #gradient { height: 200px;
- 23. ОПРЕДЕЛЕНИЕ ГРАДИЕНТА „Gradient – Diagonal” #gradient { height: 200px;
- 24. ИСПОЛЬЗОВАНИЕ НЕСКОЛЬКИХ ЦВЕТОВ ДЛЯ ГРАДИЕНТА #gradient { height: 200px;
- 25. ОПРЕДЕЛЕНИЕ ПРОЗРАЧНЫХ ГРАДИЕНТОВ Используется функция rgba(R, G, B, α), где α
- 26. РЕЗУЛЬТАТ
- 27. ОПРЕДЕЛЕНИЕ „Radial Gradient” #gradient { height: 200px; width: 300px;
- 28. ДОПОЛНИТЕЛЬНЫЕ ЭФФЕКТЫ С ТЕКСТОМ Text Shadow – используется для определения тени
- 29. 2D ПРЕОБРАЗОВАНИЯ Преобразования позволяют произвести над HTML элементом: перемещение, вращение, масштабирование,
- 30. МЕТОД TRANSLATE() Перемещает элемент из начальной позиции, в новую позицию, перемещенную
- 31. МЕТОД ROTATE() Использование данного метода произведет вращение элемента на указанный угол
- 32. МЕТОД SCALE() Уменьшает или увеличивает размер (ширину и высоту) указанного HTML
- 33. МЕТОД SKEWX() Деформирует элемент по горизонтали (по x) Пример: img:hover {
- 34. МЕТОД SKEWY() и SKEW() Метод skewY() деформирует элемент по вертикали Метод
- 35. МЕТОД MATRIX() Данный метод имеет 6 параметров, содержащие математические функции позволяющие
- 36. СОЗДАНИЕ ЭФФЕКТОВ ПЕРЕМЕЩЕНИЯ Создание данного эффекта предполагает определение Свойств CSS Длительность
- 37. ТРАНЗИЦИИ И ПРЕОБРАЗОВАНИЯ img { width: 100px; height: 100px;
- 38. АНИМАЦИЯ С CSS3 Анимация созданная с CSS3 позволяет создание той же
- 39. СВОЙСТВА АНИМАЦИИ В CSS3
- 40. СВОЙСТВО @keyframes Для разных браузеров используются разные варианты названия Синтаксис: @keyframes
- 41. ПРИМЕР Для элемента <h1>ANIMATIE SLIDE SHOW</h1> Определяем стили: @keyframes titlu {
- 42. ДРУГИЕ СВОЙСТВА. ПРИМЕРЫ Другие значения для свойств анимации смотрите http://www.w3schools.com/css/css3_animations.asp
- 43. !!! 3 понятия выученные сегодня 2 вопроса которые возникли сегодня 1
- 44. Скачать презентацию
Слайды и текст этой презентации
Слайд 1
Описание слайда:
Tema 10. CSS vs CSS3
Слайд 2
Описание слайда:
СОДЕРЖАНИЕ
Прозрачность изображений
Градиентный фон
Новые свойства для границ
Эффекты с CSS3
Примеры
Слайд 3
Описание слайда:
CSS vs CSS3
CSS3 является новейшим стандартом для стилей
CSS3 полностью совместим с предыдущими версиями CSS
Новые свойства появившиеся в CSS3 уже были внедрёнными в большинстве веб-браузеров
Слайд 4
Описание слайда:
СОЗДАНИЕ ЭФФЕКТА ПРОЗРАЧНОСТИ
Для того, чтобы сделать изображение прозрачным используются свойства CSS3 (эти свойства можно применить и для других элементов HTML)
Свойство opacity обеспечивает прозрачность изображений (и других элементов) в браузерах IE9, Firefox, Chrome, Opera и Safari
Данное свойство может принимать значения от 0 до 1
Чем меньше значение, тем прозрачнее изображение
IE8 и предыдущие его версии используют свойство filter:alpha(opacity=x), где x может принимать значения 0 – 100
Чем меньше значение, тем прозрачнее изображение
Слайд 5
Описание слайда:
ПРИМЕР
<!DOCTYPE html>
<html>
<head>
<style>
img { opacity: 0.4; filter: alpha(opacity=40);}
</style>
</head>
<body>
<h1>Imagine transparenta</h1>
<img src="pisoi.jpg" width="150" height="170" alt="Pisoi frumos" />
</body>
</html>
Слайд 6
Описание слайда:
ЭФФЕКТЫ ПРОЗРАЧНОСТИ ВМЕСТЕ СО СВОЙСТВОМ HOVER
<!DOCTYPE html>
<html>
<head>
<style>
img { opacity: 0.5; filter: alpha(opacity=40); }
img:hover { opacity: 1.0; filter: alpha(opacity=100); }
</style>
</head>
<body>
<h1>Imagine transparenta</h1>
<img src="pisoi.jpg" width="150" height="170" alt="Pisoi frumos" />
</body>
</html>
Слайд 7
Описание слайда:
РЕЗУЛЬТАТ
Слайд 8
Описание слайда:
ПРМЕР ПРОЗРАЧНОГО DIV-а
Файл со стилями:
div.background {
background: url(pisoi.jpg) repeat-x;
border: 2px solid purple;
border-radius:20px;}
div.trans {
margin: 30px;
background-color: #ffffff;
border: 1px dotted purple;
border-radius:20px;
opacity: 0.6;
filter: alpha(opacity=60);}
Слайд 9
Описание слайда:
HTML ФАЙЛ
<body>
<div class="background">
<div class="trans">
<p>Folosindu-se de vazul remarcabil, de auzul ascutit si de celelalte inzestrari incredibile de pradator fara de seama, o (aparent banala) pisica poate vana peste 1.000 de specii pentru a supravietui. In ciuda acestui fapt, felinele din specia Felis silvestris catus, asa cum le-au numit oamenii de stiinta, au ales sa traiasca alaturi de oameni de peste 9.500 de ani, iar in prezent, la nivel mondial, sunt cele mai populare animale de companie din lume. Iata 30 de lucruri mai putin cunoscute despre pisici.</p>
</div>
</div>
</body>
Слайд 10
Описание слайда:
РЕЗУЛЬТАТ
Слайд 11
Описание слайда:
НОВЫЕ СВОЙСТВА ДЛЯ ГРАНИЦ
Новые свойства можно применить для округления границ, вставки теней для границ, так же создание границ на основе изображений
Новые свойства:
border-radius
box-shadow
border-image
Данные свойства поддерживаются всеми браузерами
Слайд 12
Описание слайда:
ПРИМЕР 1
div.trans {
margin: 30px;
background-color: #ffffff;
border-radius:20px;
box-shadow: 10px 10px 5px pink;
border: 1px dotted purple;
opacity: 0.6;
filter: alpha(opacity=60);}
Слайд 13
Описание слайда:
ПРИМЕР 2
div.trans {
margin: 30px;
background-color: #ffffff;
border-radius:20px;
box-shadow: 10px 10px 5px pink;
width: 400px;
height:200px;
border-width: 100px;
border-image: url(flori.png);
opacity: 0.6;
filter: alpha(opacity=60);
}
Слайд 14
Описание слайда:
НОВЫЕ СВОЙСТВА ДЛЯ ФОНА
Дополнительно к существующим свойствам, появились:
background-size – определяет размер изображения для фона
background-origin – определяет место расположения изображения фона
Изображение-фона можно расположить в content-box, padding-box или border-box
Слайд 15
Описание слайда:
ПРИМЕР РАСПОЛОЖЕНИЯ ИЗОБРАЖЕНИЯ ФОНА В PADDING-BOX
div.trans {
margin: 30px;
padding: 50px;
background: url(tomJerry.jpg);
background-repeat: no-repeat;
background-size: 50px 50px;
background-origin: padding-box;
border-radius:20px;
box-shadow: 10px 10px 5px pink;
border: 1px dotted purple;
}
Слайд 16
Описание слайда:
ПРИМЕР РАСПОЛОЖЕНИЯ ИЗОБРАЖЕНИЯ ФОНА В CONTENT-BOX
div.trans {
margin: 30px;
padding: 50px;
background: url(tomJerry.jpg);
background-repeat: no-repeat;
background-size: 50px 50px;
background-origin: content-box;
border-radius:20px;
box-shadow: 10px 10px 5px pink;
border: 1px dotted purple;
}
Слайд 17
Описание слайда:
ОПРЕДЕЛЕНИЕ НЕСКОЛЬКИХ ИЗОБРАЖЕНИЙ КАК ФОН
CSS3 позволяет определить несколько изображений как фон для какого-то элемента
Пример:
…
<style>
div {width:430px; position: relative; left: 430px; top:275px;}
p{font-weight: bold;}
body {
background: url(tomJerry.jpg), url(rama.png);
background-repeat: no-repeat;
background-position:top right;}
</style>
…
Слайд 18
Описание слайда:
РЕЗУЛЬТАТ ПРИМЕНЕНИЯ СТИЛЯ
Слайд 19
Описание слайда:
ОПРЕДЕЛЕНИЯ ГРАДИЕНТА ДЛЯ ФОНА
Градиент – это переход одного цвета в другой цвет или несколько цветов
Использование градиента, для определения цвета фона, уменьшает время загрузки страницы в браузере
В CSS3 можно определить два вида градиента
Linear Gradients (с изменением цветов down/up/left/right/diagonally)
Radial Gradients (градиент начинается с центра)
Не все версии браузеров поддерживают определение градиента
Слайд 20
Описание слайда:
ОПРЕДЕЛЕНИЕ ЛИНЕЙНОГО ГРАДИЕНТА
Чтобы создать линейный градиент должны быть определены по крайней мере, два цвета - начальный и конечный цвет
Синтаксис: background: linear-gradient(direcţia, c1, c2, ...);
Значение по умолчанию для градиента будет „Top to Bottom”
Пример:
#gradient {
height: 200px; width: 300px;
background: linear-gradient(pink, white); /* Стандартный синтаксис */
background: -webkit-linear-gradient(pink, white); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(pink, white); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(pink, white); /* Firefox 3.6 - 15 */
}
Слайд 21
Описание слайда:
РЕЗУЛЬТАТ ПРИМЕНЕНИЯ СТИЛЯ
Слайд 22
Описание слайда:
ОПРЕДЕЛЕНИЕ ГРАДИЕНТА „Left to Right”
#gradient {
height: 200px;
width: 300px;
background: linear-gradient(to right, purple, pink); /*Стандартный синтаксис*/
background: -webkit-linear-gradient(left, purple, pink); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(right, purple, pink); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(right, purple, pink); /* Firefox 3.6 - 15 */
}
Слайд 23
Описание слайда:
ОПРЕДЕЛЕНИЕ ГРАДИЕНТА „Gradient – Diagonal”
#gradient {
height: 200px;
width: 300px;
background: linear-gradient(to bottom right, purple, white); /* Стандартный синтаксис */
background: -webkit-linear-gradient(left top, purple, white); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(bottom right, purple, white); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(bottom right, purple, white); /* Firefox 3.6 - 15 */
}
Слайд 24
Описание слайда:
ИСПОЛЬЗОВАНИЕ НЕСКОЛЬКИХ ЦВЕТОВ ДЛЯ ГРАДИЕНТА
#gradient {
height: 200px;
width: 300px;
background: linear-gradient(white, purple, white); /*Стандартный синтаксис*/
background: -webkit-linear-gradient(white, purple, white); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(white, purple, white); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(white, purple, white); /* Firefox 3.6 - 15 */
}
Слайд 25
Описание слайда:
ОПРЕДЕЛЕНИЕ ПРОЗРАЧНЫХ ГРАДИЕНТОВ
Используется функция rgba(R, G, B, α), где α – может иметь значения от 0 до 1 (0 – без цвета, 1 – с цветом)
Пример:
#gradient {
height: 200px;
width: 300px;
background: linear-gradient(to right, rgba(200,50,0,0), rgba(200,50,0,0.8)); /*Стандартный синтаксис */
background: -webkit-linear-gradient(left, rgba(200,50,0,0), rgba(200,50,0,0.8)); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(right, rgba(200,50,0,0), rgba(200,50,0,0.8)); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(right, rgba(200,50,0,0), rgba(200,50,0,0.8)); /* Firefox 3.6 - 15 */
}
Слайд 26
Описание слайда:
РЕЗУЛЬТАТ
Слайд 27
Описание слайда:
ОПРЕДЕЛЕНИЕ „Radial Gradient”
#gradient {
height: 200px;
width: 300px;
background: radial-gradient(pink, white, pink); /*Стандартный синтаксис*/
background: -webkit-radial-gradient(pink, white, pink); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(pink, white, pink);/* Opera 11.1 - 12.0 */
background: -moz-radial-gradient(pink, white, pink); /* Firefox 3.6 - 15 */
}
Слайд 28
Описание слайда:
ДОПОЛНИТЕЛЬНЫЕ ЭФФЕКТЫ С ТЕКСТОМ
Text Shadow – используется для определения тени по горизонтали, по вертикали, нечеткости и цвета тени
Пример (Multiple Shadows):
h2{text-shadow: 1px 1px 2px black, 0 0 10px blue, 0 0 0.2em darkblue;
color: pink;
text-align: center;
}
Слайд 29
Описание слайда:
2D ПРЕОБРАЗОВАНИЯ
Преобразования позволяют произвести над HTML элементом: перемещение, вращение, масштабирование, наклоны
Для создания 2D преобразований в CSS3 используются следующие методы преобразования:
translate()
rotate()
scale()
skewX()
skewY()
matrix()
Слайд 30
Описание слайда:
МЕТОД TRANSLATE()
Перемещает элемент из начальной позиции, в новую позицию, перемещенную и по x и по y
Пример:
img:hover {
height: 250px;
width: 150px;
transform: translate(20px,30px);
}
Vezi exemplul
Слайд 31
Описание слайда:
МЕТОД ROTATE()
Использование данного метода произведет вращение элемента на указанный угол
Пример:
img:hover {
height: 250px;
width: 150px;
transform: translate(20px,30px);
transform: rotate(20deg);
}
Слайд 32
Описание слайда:
МЕТОД SCALE()
Уменьшает или увеличивает размер (ширину и высоту) указанного HTML элемента
Пример:
img:hover {
height: 250px;
width: 150px;
transform: translate(20px,30px);
transform: scale(1.3,1.3);
}
Слайд 33
Описание слайда:
МЕТОД SKEWX()
Деформирует элемент по горизонтали (по x)
Пример:
img:hover {
height: 250px;
width: 150px;
transform: translate(20px,30px);
transform: skewX(20deg);
}
Слайд 34
Описание слайда:
МЕТОД SKEWY() и SKEW()
Метод skewY() деформирует элемент по вертикали
Метод skew() деформирует элемент по горизонтали и по вертикали
Пример:
img:hover {
height: 250px;
width: 150px;
transform: translate(20px,30px);
transform: skew(20deg, 10deg);
}
Слайд 35
Описание слайда:
МЕТОД MATRIX()
Данный метод имеет 6 параметров, содержащие математические функции позволяющие вращение, перемещение, масштабирование и наклоны элемента
Пример:
img:hover {
height: 250px;
width: 150px;
transform: matrix(1, -0.3, 0, 1, 0, 0);
}
Слайд 36
Описание слайда:
СОЗДАНИЕ ЭФФЕКТОВ ПЕРЕМЕЩЕНИЯ
Создание данного эффекта предполагает определение
Свойств CSS
Длительность эффекта (если не указывается длительность эффект не произойдет, потому что значение по умолчанию - 0)
Пример:
div {
background: linear-gradient(to right, rgba(10,250,0,0), rgba(10,250,0,0.8));
height: 250px; width: 350px; }
div:hover {
border: 2px solid green;
width: 550px; transition: width 2s; }
Rezultat
Слайд 37
Описание слайда:
ТРАНЗИЦИИ И ПРЕОБРАЗОВАНИЯ
img {
width: 100px;
height: 100px;
}
img:hover {
border: 2px solid indigo;
height: 300px;
width: 230px;
transition: width 2s, height 2s, transform 2s;
transform: rotate(360deg);
}
Rezultat
Слайд 38
Описание слайда:
АНИМАЦИЯ С CSS3
Анимация созданная с CSS3 позволяет создание той же анимации с элементами HTML, которую можно было создать, до недавних пор, только с использованием JavaScript или Flash
Анимация представляет постепенное изменение одного стиля в другой, для какого-то HTML элемента
Можно изменить несколько свойств CSS и не только один раз, но и несколько раз
Для определения анимации в CSS3, необходимо сперва определить несколько ключевых кадров для размещения анимации
Правила перехода для анимации определяются в @keyframes имя
Другие примеры: http://www.w3schools.com/css/css3_animations.asp
Слайд 39
Описание слайда:
СВОЙСТВА АНИМАЦИИ В CSS3
Слайд 40
Описание слайда:
СВОЙСТВО @keyframes
Для разных браузеров используются разные варианты названия
Синтаксис: @keyframes НазваниеАнимации {keyframes-selector {css-styles;}}
Слайд 41
Описание слайда:
ПРИМЕР
Для элемента <h1>ANIMATIE SLIDE SHOW</h1>
Определяем стили:
@keyframes titlu { from {background-color: pink; color:black; text-align: center;}
to {background-color: purple; text-shadow: 1px 1px 2px black, 0 0 10px blue, 0 0 0.2em darkblue; color: pink; text-align: center;} }
@-webkit-keyframes titlu { from {background-color: pink; color:black; text-align: center;}
to {background-color: purple; text-shadow: 1px 1px 2px black, 0 0 10px blue, 0 0 0.2em darkblue; color: pink; text-align: center;} }
h1 { background-color: pink; color:black; text-align: center;
-webkit-animation-name: titlu; /* Chrome, Safari, Opera */
-webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
-webkit-animation-delay: 2s;
animation-iteration-count: infinite;
animation-name: titlu;
animation-duration: 4s;
animation-delay: 2s;
-webkit-animation-iteration-count: infinite; }
Слайд 42
Описание слайда:
ДРУГИЕ СВОЙСТВА. ПРИМЕРЫ
Другие значения для свойств анимации смотрите
http://www.w3schools.com/css/css3_animations.asp
Exemplu1
Exemplu2
Другие примеры:
http://daneden.github.io/animate.css/
https://css-tricks.com/snippets/css/keyframe-animation-syntax/
Слайд 43
Описание слайда:
!!!
3 понятия выученные сегодня
2 вопроса которые возникли сегодня
1 предложение для следующей пары
Скачать презентацию на тему Тема 10. CSS vs CSS3 можно ниже:
