Что такое 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
  • Количество просмотров: 111
  • Количество скачиваний: 0
- Предыдущая Қазақстан - ортақ үйіміз. Казахстан моя Родина
Следующая - История и методология лингвистики

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

Презентация Театр презентация к уроку (старшая группа) Презентация Театр презентация к уроку (старшая группа) 105
Тема 9. Анализ портфеля стратегий компании Тема 9. Анализ портфеля стратегий компании 90
3 str 3 str 108
Декада начальных классов презентация к уроку Декада начальных классов презентация к уроку 133
Шпора русиш Шпора русиш 122
Электрокардиографическая диагностика. Электрокардиографическая диагностика. 105
Основы Proteus. Компьютерные технологии в приборостроении Основы Proteus. Компьютерные технологии в приборостроении 304
Презентация Творчество Ю.Васнецова. Сказки. Сказка Курочка Ряба презентация к уроку (младшая, средняя группа) Презентация Творчество Ю.Васнецова. Сказки. Сказка Курочка Ряба презентация к уроку (младшая, средняя группа) 120
Концепция организация НИР студентов в вузе Концепция организация НИР студентов в вузе 102
skoro v shkolu skoro v shkolu 95
детско-родительский проект презентация к уроку (младшая группа) детско-родительский проект презентация к уроку (младшая группа) 152
Как это было... презентация к занятию (старшая группа) по теме Как это было... презентация к занятию (старшая группа) по теме 43
ИКТ в деятельности учителя начальных классов презентация урока для интерактивной доски ИКТ в деятельности учителя начальных классов презентация урока для интерактивной доски 46
Растения делятся по способу опыления: Растения делятся по способу опыления: 123
Анализ интернет-магазинаozon.ru Анализ интернет-магазинаozon.ru 94
Право на имя план-конспект занятия (подготовительная группа) по теме Право на имя план-конспект занятия (подготовительная группа) по теме 110
Маска со стволовыми клетками неспелого винограда. Маска со стволовыми клетками неспелого винограда. 104
prezentatsiya 03 prezentatsiya 03 94
London: history, places of interest traditional ceremonies London: history, places of interest traditional ceremonies 128
Презентация Гендерный подход в младшем дошкольном возрасте презентация к уроку (младшая группа) Презентация Гендерный подход в младшем дошкольном возрасте презентация к уроку (младшая группа) 109
Кузова грузовых вагонов. Полувагон. Практическое занятие Кузова грузовых вагонов. Полувагон. Практическое занятие 111
Історія виникнення суднобудування Виконали:... Історія виникнення суднобудування Виконали:... 101
Олимпиады для начальной школы олимпиадные задания Олимпиады для начальной школы олимпиадные задания 45
Прессовые операции Прессовые операции 177
Темперамент Темперамент 94
Презентация проекта Я познаю мир рыбалки Презентация проекта Я познаю мир рыбалки 225
Архитектурная акустика Архитектурная акустика 105
Презентация Использование метода М. Монтессори презентация к уроку (2 класс) по теме Презентация Использование метода М. Монтессори презентация к уроку (2 класс) по теме 117
Доступность финансовых услуг в сельской местности: Доступность финансовых услуг в сельской местности: 178
Презентация. Мы не забудем той войны презентация Презентация. Мы не забудем той войны презентация 95