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

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

Базы данных и СУБД Базы данных и СУБД 107
Администрация сельского поселения Васильевское Администрация сельского поселения Васильевское 89
Стансадағы маневрлік жұмыс және пойыздардың құралу және жөнелтілу тәртібі Стансадағы маневрлік жұмыс және пойыздардың құралу және жөнелтілу тәртібі 136
Опрацювання даних як інформаційний процес.Кодування та декодування повідомлень Опрацювання даних як інформаційний процес.Кодування та декодування повідомлень 102
Arch-модель Arch-модель 145
Презентация к выступлению: Наука. Культура. Молодежь Презентация к выступлению: Наука. Культура. Молодежь 145
Презентация Весенние гости презентация к уроку (младшая группа) Презентация Весенние гости презентация к уроку (младшая группа) 114
Лекция 3. непрерывность функции. Лекция 3. непрерывность функции. 88
Отделочные виды полуфабрикатов в кондитерском производстве Отделочные виды полуфабрикатов в кондитерском производстве 369
Сільське господарство Сільське господарство 80
Способы общения. классный час (1 класс) по теме Способы общения. классный час (1 класс) по теме 127
Функция Функция 82
Теории стресса Теории стресса 226
Презентация по МДК 03.01 Технология производства сахаристых кондитерских изделий на тему Производство подсолнечной халвы Презентация по МДК 03.01 Технология производства сахаристых кондитерских изделий на тему Производство подсолнечной халвы 199
Почвоведение Почвоведение 122
Modern chelyabinsk Modern chelyabinsk 98
Презентация по теме Классификация парикмахерских Презентация по теме Классификация парикмахерских 158
Бестраншейная прокладка труб при строительстве газопроводов Бестраншейная прокладка труб при строительстве газопроводов 123
Проект по художественно-эстетическому развитию в средней группе Чудо ложечка презентация к уроку (средняя группа) Проект по художественно-эстетическому развитию в средней группе Чудо ложечка презентация к уроку (средняя группа) 101
Презентация к проекту 10 полезных сладостей презентация к уроку (старшая, подготовительная группа) Презентация к проекту 10 полезных сладостей презентация к уроку (старшая, подготовительная группа) 156
Наше детство Наше детство 76
Бережливое производствоКоротко. Для чайников Бережливое производствоКоротко. Для чайников 119
Социология девиации и социального контроля Социология девиации и социального контроля 105
Презентация по ИКН История письменности Презентация по ИКН История письменности 81
Исследование снежного покрова. Исследование снежного покрова. 108
Презентация для педсовета по теме Духовно-нравственное воспитание младших школьников презентация к уроку Презентация для педсовета по теме Духовно-нравственное воспитание младших школьников презентация к уроку 99
. . 84
Опытно-экспериментальная деятельность как средство экологического воспитания дошкольников презентация Опытно-экспериментальная деятельность как средство экологического воспитания дошкольников презентация 107
Артқы ми Артқы ми 198
Организация внимания презентация к уроку Организация внимания презентация к уроку 113