- Главная
- Разное
- Бизнес и предпринимательство
- Образование
- Развлечения
- Государство
- Спорт
- Графика
- Культурология
- Еда и кулинария
- Лингвистика
- Религиоведение
- Черчение
- Физкультура
- ИЗО
- Психология
- Социология
- Английский язык
- Астрономия
- Алгебра
- Биология
- География
- Геометрия
- Детские презентации
- Информатика
- История
- Литература
- Маркетинг
- Математика
- Медицина
- Менеджмент
- Музыка
- МХК
- Немецкий язык
- ОБЖ
- Обществознание
- Окружающий мир
- Педагогика
- Русский язык
- Технология
- Физика
- Философия
- Химия
- Шаблоны, картинки для презентаций
- Экология
- Экономика
- Юриспруденция
Что такое findslide.org?
FindSlide.org - это сайт презентаций, докладов, шаблонов в формате PowerPoint.
Обратная связь
Email: Нажмите что бы посмотреть
Презентация на тему Тема 10. CSS vs CSS3
Содержание
- 2. СОДЕРЖАНИЕПрозрачность изображенийГрадиентный фонНовые свойства для границЭффекты с CSS3Примеры
- 3. CSS vs CSS3CSS3 является новейшим стандартом для
- 4. СОЗДАНИЕ ЭФФЕКТА ПРОЗРАЧНОСТИДля того, чтобы сделать изображение
- 5. ПРИМЕРimg { opacity: 0.4; filter: alpha(opacity=40);}Imagine transparenta
- 6. ЭФФЕКТЫ ПРОЗРАЧНОСТИ ВМЕСТЕ СО СВОЙСТВОМ HOVER img {
- 7. РЕЗУЛЬТАТ
- 8. ПРМЕР ПРОЗРАЧНОГО DIV-аФайл со стилями:div.background {
- 9. HTML ФАЙЛ Folosindu-se de vazul
- 10. РЕЗУЛЬТАТ
- 11. НОВЫЕ СВОЙСТВА ДЛЯ ГРАНИЦНовые свойства можно применить
- 12. ПРИМЕР 1div.trans { margin: 30px;
- 13. ПРИМЕР 2div.trans { margin: 30px;
- 14. НОВЫЕ СВОЙСТВА ДЛЯ ФОНАДополнительно к существующим свойствам,
- 15. ПРИМЕР РАСПОЛОЖЕНИЯ ИЗОБРАЖЕНИЯ ФОНА В PADDING-BOXdiv.trans {
- 16. ПРИМЕР РАСПОЛОЖЕНИЯ ИЗОБРАЖЕНИЯ ФОНА В CONTENT-BOXdiv.trans {
- 17. ОПРЕДЕЛЕНИЕ НЕСКОЛЬКИХ ИЗОБРАЖЕНИЙ КАК ФОНCSS3 позволяет определить
- 18. РЕЗУЛЬТАТ ПРИМЕНЕНИЯ СТИЛЯ
- 19. ОПРЕДЕЛЕНИЯ ГРАДИЕНТА ДЛЯ ФОНАГрадиент – это переход
- 20. ОПРЕДЕЛЕНИЕ ЛИНЕЙНОГО ГРАДИЕНТАЧтобы создать линейный градиент должны
- 21. РЕЗУЛЬТАТ ПРИМЕНЕНИЯ СТИЛЯ
- 22. ОПРЕДЕЛЕНИЕ ГРАДИЕНТА „Left to Right”#gradient {
- 23. ОПРЕДЕЛЕНИЕ ГРАДИЕНТА „Gradient – Diagonal”#gradient {
- 24. ИСПОЛЬЗОВАНИЕ НЕСКОЛЬКИХ ЦВЕТОВ ДЛЯ ГРАДИЕНТА#gradient {
- 25. ОПРЕДЕЛЕНИЕ ПРОЗРАЧНЫХ ГРАДИЕНТОВИспользуется функция rgba(R, G, B,
- 26. РЕЗУЛЬТАТ
- 27. ОПРЕДЕЛЕНИЕ „Radial Gradient”#gradient { height: 200px;
- 28. ДОПОЛНИТЕЛЬНЫЕ ЭФФЕКТЫ С ТЕКСТОМText Shadow – используется
- 29. 2D ПРЕОБРАЗОВАНИЯПреобразования позволяют произвести над HTML элементом:
- 30. МЕТОД TRANSLATE()Перемещает элемент из начальной позиции, в
- 31. МЕТОД ROTATE()Использование данного метода произведет вращение элемента
- 32. МЕТОД SCALE()Уменьшает или увеличивает размер (ширину и
- 33. МЕТОД SKEWX()Деформирует элемент по горизонтали (по x)Пример:img:hover
- 34. МЕТОД SKEWY() и SKEW()Метод skewY() деформирует элемент
- 35. МЕТОД MATRIX()Данный метод имеет 6 параметров, содержащие
- 36. СОЗДАНИЕ ЭФФЕКТОВ ПЕРЕМЕЩЕНИЯСоздание данного эффекта предполагает определениеСвойств
- 37. ТРАНЗИЦИИ И ПРЕОБРАЗОВАНИЯimg { width: 100px;
- 38. АНИМАЦИЯ С CSS3Анимация созданная с CSS3 позволяет
- 39. СВОЙСТВА АНИМАЦИИ В CSS3
- 40. СВОЙСТВО @keyframesДля разных браузеров используются разные варианты названияСинтаксис: @keyframes НазваниеАнимации {keyframes-selector {css-styles;}}
- 41. ПРИМЕРДля элемента ANIMATIE SLIDE SHOWОпределяем стили:@keyframes titlu
- 42. ДРУГИЕ СВОЙСТВА. ПРИМЕРЫДругие значения для свойств анимации смотритеhttp://www.w3schools.com/css/css3_animations.aspExemplu1Exemplu2Другие примеры:http://daneden.github.io/animate.css/https://css-tricks.com/snippets/css/keyframe-animation-syntax/
- 43. Скачать презентацию
- 44. Похожие презентации
СОДЕРЖАНИЕПрозрачность изображенийГрадиентный фонНовые свойства для границЭффекты с 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
Чем меньше значение, тем прозрачнее изображение
Слайд 6
ЭФФЕКТЫ ПРОЗРАЧНОСТИ ВМЕСТЕ СО СВОЙСТВОМ HOVER
img {
opacity: 0.5; filter: alpha(opacity=40); }
img:hover
{ opacity: 1.0; filter: alpha(opacity=100); }Imagine transparenta
Слайд 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);}
div.trans p {
margin: 5%;
font-weight: bold;
color: #000000;
}
Слайд 9
HTML ФАЙЛ
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.
Слайд 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 позволяет определить несколько
изображений как фон для какого-то элемента
Пример:
…
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;}
…
Слайд 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 */
}
Слайд 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 */
}
Слайд 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
Слайд 40
СВОЙСТВО @keyframes
Для разных браузеров используются разные варианты названия
Синтаксис:
@keyframes НазваниеАнимации {keyframes-selector {css-styles;}}
Слайд 41
ПРИМЕР
Для элемента ANIMATIE SLIDE SHOW
Определяем стили:
@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
Другие
