Что такое findslide.org?

FindSlide.org - это сайт презентаций, докладов, шаблонов в формате PowerPoint.

Для правообладателей

Обратная связь

Email: Нажмите что бы посмотреть 

Яндекс.Метрика

Презентация на тему CSS3. Закругленные углы

Содержание

Создавать элементы со сглаженными углами;Создавать линейные и сферические градиенты;Более гибко оформлять фоновую картинку элементов;Добавлять к элементам и к тексту элементов тени;Использовать небезопасные шрифты (не боясь при этом, что они будут не поддерживаться браузером пользователя);Создавать анимацию и
CSS3 Создавать элементы со сглаженными углами;Создавать линейные и сферические градиенты;Более гибко оформлять фоновую Закругленные углы1.#1 {border-radius:10px;}2.#2 {border-radius:50%;}3.#3 {border-radius:25px 5px;}4.#4 {border-radius:40px 30px 20px 10px;} Задание цвета с помощью HSL Пример#wrap1 {background-color:hsl(0,30%,50%);}#wrap2 {background-color:hsl(120,100%,80%);}#wrap3 {background-color:hsl(240,100%,50%);} Тень текста1.#1 {text-shadow:rgba(0,0,0,0.5) 1px 1px 0;}2.#2 {text-shadow:rgba(0,0,0,0.7) 5px 5px 3px;}3.#3 {text-shadow:rgba(45,35,200,0.7) -10px -10px 3px;} #el1 {box-shadow:4px 4px black;}#el2 {box-shadow:6px 6px 6px 2px black;}#el3 {box-shadow:0px 0px 6px #wrap1 {background-image: url(wislink.gif),url(mountimg3.jpg);background-position:bottom right, center;background-size:150px 40px,100% 100%;background-repeat:no-repeat,no-repeat;}Несколько фоновых изображений #wrap1 {background:linear-gradient(top,white,black);}#wrap2 {background:linear-gradient(left,white,black);}#wrap3 {background:linear-gradient(0deg,white,black);}#wrap4 {background:linear-gradient(270deg,white,black);}Линейные градиенты Примеры #wrap1 {background:linear-gradient(top,white 0%,green 50%,black 100%);}#wrap2 {background:linear-gradient(left,#8F04A8 0%,#7CE700 60%,#FFE100 100%);}Цветовой градиент Сферические градиенты CSS3 трансформирование
Слайды презентации

Слайд 2 Создавать элементы со сглаженными углами;
Создавать линейные и сферические

Создавать элементы со сглаженными углами;Создавать линейные и сферические градиенты;Более гибко оформлять

градиенты;
Более гибко оформлять фоновую картинку элементов;
Добавлять к элементам и

к тексту элементов тени;
Использовать небезопасные шрифты (не боясь при этом, что они будут не поддерживаться браузером пользователя);
Создавать анимацию и различные эффекты переходов;
Задавать цвета несколькими новыми способами и многое другое.

В CSS3 Вы можете:

Слайд 3 Закругленные углы
1.#1 {border-radius:10px;}
2.#2 {border-radius:50%;}
3.#3 {border-radius:25px 5px;}
4.#4 {border-radius:40px 30px 20px 10px;}

Закругленные углы1.#1 {border-radius:10px;}2.#2 {border-radius:50%;}3.#3 {border-radius:25px 5px;}4.#4 {border-radius:40px 30px 20px 10px;}

Слайд 4 Задание цвета с помощью HSL

Задание цвета с помощью HSL

Слайд 5 Пример
#wrap1 {background-color:hsl(0,30%,50%);}
#wrap2 {background-color:hsl(120,100%,80%);}
#wrap3 {background-color:hsl(240,100%,50%);}

Пример#wrap1 {background-color:hsl(0,30%,50%);}#wrap2 {background-color:hsl(120,100%,80%);}#wrap3 {background-color:hsl(240,100%,50%);}

Слайд 6 Тень текста
1.#1 {text-shadow:rgba(0,0,0,0.5) 1px 1px 0;}
2.#2 {text-shadow:rgba(0,0,0,0.7) 5px 5px 3px;}
3.#3 {text-shadow:rgba(45,35,200,0.7) -10px -10px 3px;}

Тень текста1.#1 {text-shadow:rgba(0,0,0,0.5) 1px 1px 0;}2.#2 {text-shadow:rgba(0,0,0,0.7) 5px 5px 3px;}3.#3 {text-shadow:rgba(45,35,200,0.7) -10px -10px 3px;}

Слайд 7 #el1 {box-shadow:4px 4px black;}
#el2 {box-shadow:6px 6px 6px 2px

#el1 {box-shadow:4px 4px black;}#el2 {box-shadow:6px 6px 6px 2px black;}#el3 {box-shadow:0px 0px

black;}
#el3 {box-shadow:0px 0px 6px 2px black inset;}

Добавление к элементам

тени

Слайд 8 #wrap1 {
background-image: url(wislink.gif),url(mountimg3.jpg);
background-position:bottom right, center;
background-size:150px 40px,100% 100%;
background-repeat:no-repeat,no-repeat;}

Несколько фоновых

#wrap1 {background-image: url(wislink.gif),url(mountimg3.jpg);background-position:bottom right, center;background-size:150px 40px,100% 100%;background-repeat:no-repeat,no-repeat;}Несколько фоновых изображений

изображений

Слайд 9 #wrap1 {background:linear-gradient(top,white,black);}
#wrap2 {background:linear-gradient(left,white,black);}
#wrap3 {background:linear-gradient(0deg,white,black);}
#wrap4 {background:linear-gradient(270deg,white,black);}

Линейные градиенты

#wrap1 {background:linear-gradient(top,white,black);}#wrap2 {background:linear-gradient(left,white,black);}#wrap3 {background:linear-gradient(0deg,white,black);}#wrap4 {background:linear-gradient(270deg,white,black);}Линейные градиенты

Слайд 10 Примеры

Примеры

Слайд 11 #wrap1 {background:linear-gradient(top,white 0%,green 50%,black 100%);}
#wrap2 {background:linear-gradient(left,#8F04A8 0%,#7CE700 60%,#FFE100

#wrap1 {background:linear-gradient(top,white 0%,green 50%,black 100%);}#wrap2 {background:linear-gradient(left,#8F04A8 0%,#7CE700 60%,#FFE100 100%);}Цветовой градиент

100%);}

Цветовой градиент

Слайд 12
Сферические градиенты

Сферические градиенты
  • Имя файла: css3-zakruglennye-ugly.pptx
  • Количество просмотров: 94
  • Количество скачиваний: 0
- Предыдущая Қазақстан - ортақ үйіміз. Казахстан моя Родина
Следующая - История и методология лингвистики

Похожие презентации

Презентация по казахскому языку Абай Құнанбайұлы Презентация по казахскому языку Абай Құнанбайұлы 110
Ваш ребёнок стал учеником презентация к уроку (1 класс) Ваш ребёнок стал учеником презентация к уроку (1 класс) 99
ДИПЛОМНА РОБОТАна тему: “Особливості розвитку подієвого туризму у Львові”  ДИПЛОМНА РОБОТАна тему: “Особливості розвитку подієвого туризму у Львові”  73
Метод мозговой атаки (штурма) Метод мозговой атаки (штурма) 117
ФАКТОГРАФИЧЕСКАЯИНФОРМАЦИОННАЯ ПРОДУКЦИЯ ФАКТОГРАФИЧЕСКАЯИНФОРМАЦИОННАЯ ПРОДУКЦИЯ 69
Родительское собрание для родителей будущих первоклассников Что такое психологическая готовность к школе? презентация к уроку (1 класс) Родительское собрание для родителей будущих первоклассников Что такое психологическая готовность к школе? презентация к уроку (1 класс) 75
Персональный компьютер Персональный компьютер 63
Здоровьесберегающие технологии в ДОУ. презентация к уроку (младшая группа) Здоровьесберегающие технологии в ДОУ. презентация к уроку (младшая группа) 144
Презентация ПМ 05 Приготовление сложных десертов (национальные десерты ) Презентация ПМ 05 Приготовление сложных десертов (национальные десерты ) 143
Школьный формат образовательных дебатов Школьный формат образовательных дебатов 94
Подоходный налог с физических лиц Подоходный налог с физических лиц 117
Гендерные Роли Гендерные Роли 85
Портфолио воспитателя учебно-методический материал Портфолио воспитателя учебно-методический материал 185
Гастрономический туризм Гастрономический туризм 159
71
Детский проект Осень пришла презентация к уроку (подготовительная группа) Детский проект Осень пришла презентация к уроку (подготовительная группа) 87
ПК 4.2. Предметно-развивающая среда учебного кабинета начальных классов презентация к уроку по теме ПК 4.2. Предметно-развивающая среда учебного кабинета начальных классов презентация к уроку по теме 88
ВОЗМОЖНОСТИ ИСПОЛЬЗОВАНИЯ ИНФОРМАЦИОННО- КОММУНИКАЦИОННЫХ ТЕХНОЛОГИЙ ВО ВЗАИМОДЕЙСТВИИ С СЕМЬЯМИ ВОСПИТАННИКОВ ОБРАЗОВАТЕЛЬНОГО УЧРЕЖДЕНИЯ презентация к уроку по теме ВведениеФормы работы педагога с родителями воспитанников с использованием ИКТ.Средства И ВОЗМОЖНОСТИ ИСПОЛЬЗОВАНИЯ ИНФОРМАЦИОННО- КОММУНИКАЦИОННЫХ ТЕХНОЛОГИЙ ВО ВЗАИМОДЕЙСТВИИ С СЕМЬЯМИ ВОСПИТАННИКОВ ОБРАЗОВАТЕЛЬНОГО УЧРЕЖДЕНИЯ презентация к уроку по теме ВведениеФормы работы педагога с родителями воспитанников с использованием ИКТ.Средства И 69
Внеурочная деятельность  в младшей школе  как важное условие реализации деятельности ФГОС нового поколения   презентация к уроку Внеурочная деятельность  в младшей школе  как важное условие реализации деятельности ФГОС нового поколения   презентация к уроку 94
Сервисы WEB 2.0 в воспитании и обучении. Сервисы WEB 2.0 в воспитании и обучении. 83
Роль сказки в развитии и воспитании ребенка консультация ( группа) Роль сказки в развитии и воспитании ребенка консультация ( группа) 79
Business communications Business communications 85
Презентация по ФГОС ( разновозрастная группа от 4-6 лет) презентация к уроку (старшая группа) Презентация по ФГОС ( разновозрастная группа от 4-6 лет) презентация к уроку (старшая группа) 27
Plan: Plan: 53
Конспект занятия по театрализованной деятельности в подготовительной к школе группе Волшебный мир театра план-конспект занятия (подготовительная группа) Конспект занятия по театрализованной деятельности в подготовительной к школе группе Волшебный мир театра план-конспект занятия (подготовительная группа) 81
РНМ Лекция 4: Свойства пластовых пород РНМ Лекция 4: Свойства пластовых пород 74
Родительский патруль и ПДД вместе с ЮПИД презентация к уроку (подготовительная группа) Родительский патруль и ПДД вместе с ЮПИД презентация к уроку (подготовительная группа) 159
Оценка пищевого статуса Оценка пищевого статуса 121
Конкурсы к 8 Марта Конкурсы к 8 Марта 85
Злови помилку. В гості до зимоньці. Укр. мова. 6 кл. Злови помилку. В гості до зимоньці. Укр. мова. 6 кл. 82