CSS 3. Cascading Style Sheets - презентация, доклад, проект скачать

Нажмите для полного просмотра!

CSS 3. Cascading Style Sheets, слайд №10

CSS 3. Cascading Style Sheets, слайд №11

CSS 3. Cascading Style Sheets, слайд №12

CSS 3. Cascading Style Sheets, слайд №13

CSS 3. Cascading Style Sheets, слайд №14

CSS 3. Cascading Style Sheets, слайд №15

CSS 3. Cascading Style Sheets, слайд №16

CSS 3. Cascading Style Sheets, слайд №17

CSS 3. Cascading Style Sheets, слайд №18

CSS 3. Cascading Style Sheets, слайд №19

CSS 3. Cascading Style Sheets, слайд №20

CSS 3. Cascading Style Sheets, слайд №21

CSS 3. Cascading Style Sheets, слайд №22

CSS 3. Cascading Style Sheets, слайд №23

CSS 3. Cascading Style Sheets, слайд №24

CSS 3. Cascading Style Sheets, слайд №25

CSS 3. Cascading Style Sheets, слайд №26

CSS 3. Cascading Style Sheets, слайд №27

CSS 3. Cascading Style Sheets, слайд №28

CSS 3. Cascading Style Sheets, слайд №29

Содержание ▲

Вы можете ознакомиться и скачать презентацию на тему CSS 3. Cascading Style Sheets. Доклад-сообщение содержит 29 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Mypresentation Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

Слайды и текст этой презентации

Слайд 1

Описание слайда:

CSS 3 Cascading Style Sheets

Слайд 2

Описание слайда:

Поддержка в браузерах IE – 9 Mozila – 4.0 Chrome – 10 Opera – 10.5 Safari – 5.1

Слайд 3

Описание слайда:

Новые псевдоклассы :empty – пустой элемент, не имеющий содержимого p:empty { display: none; } :first-of-type – задает стиль для первого элемента заданного типа li:first-of-type { color: red; } :last-of-type – задает стиль для последнего элемента заданного типа li:last-of-type { color: green; }

Слайд 4

Описание слайда:

Новые псевдоклассы :nth-of-type (n) – задает стиль для n-го элемента конкретного типа в контейнере li: nth-of-type (3) { background-color: red; } li: nth-of-type (even) { color: green; } li: nth-of-type (odd) { color: yellow; } li: nth-of-type (4n+3) { color: black; } li: nth-of-type (n+4):nth-child(-n+18) { color:white; }

Слайд 5

Описание слайда:

Новые псевдоклассы :only-of-type – задает стиль для единственного элемента указанного типа p: only-of-type { color: red; } :target – активный указатель h2:target { background: #fc0; } :valid/:invalid – элемент управления, в котором указано корректное / некорректное значение input:valid { background-color: #dfd; } input:invalid { background-color: #fdd; }

Слайд 6

Описание слайда:

Новые псевдоклассы :not() – задает стиль элементу удовлетворяющее основному условию и не удовлетворяющему условию в скобках p:not(:first-child) { color: green; }

Слайд 7

Описание слайда:

Единицы измерения rew – размер относительно размера шрифта элемента p { font-size: 3rew; } vw – 1% ширины окна input { width: 50vw; } vh – 1% высоты окна div { width: 25vh; } calc – высчитывает размер элемента div { width: calc(100% - 100px); }

Слайд 8

Описание слайда:

Работа с таблицами border-spacing – устанавливает величину просвета между ячейками table { border-spacing: 2px 3px; } border-coollapse –устанавливает режим рисования рамок таблицы и ячеек separate – рисует все рамки collapse – рисует только рамку ячеек table { border-collapse: collapse; }

Слайд 9

Описание слайда:

Размеры фонового изображения background-size – задает размер фонового изображения. Принимает значения ширина высота (100% 50%) auto – не изменяет размеры изображения cover – изображение полностью покрывает элемент (часть картинки может урезаться) contain – изображение целиком помещается в элементе (часть элемента может не иметь фона) body { background-size: cover; }

Слайд 10

Описание слайда:

Позиционирование фонового изображения background-origin – устанавливает часть элемента, относительно которой будет происходить позиционирование фона content-box – относительно границ содержимого элемента padding-box – относительно границ внутренних отступов border-box – относительно рамки элемента ul { background-origin: border-box; }

Слайд 11

Описание слайда:

Режим заполнения для фонового изображения background-clip – указывает, какую часть элемента будет заполнять фоновое изображение content-box – содержимое padding-box – содержимое + внутренние отступы border-box – весь элемент ul {background-clip: content-box; }

Слайд 12

Описание слайда:

Прозрачность фона rgba – формат задания цвета, включающий в себя a-канал (задается в диапазоне от 0.0 до 1.0) div { background: rgba(255, 255, 0, 0.5); }

Слайд 13

Описание слайда:

Скругление углов border-top-right-radius / border-top-left-radius border-bottom-right-radius / border-bottom-left-radius – радиус скругления соответствующего угла блока div { border-top-right-radius: 10px; } p { border-bottom-left-radius : 5px 10px; } border-radius – радиус скругления всех углов p { border-radius: 1px 5px 0px 2px / 3px 1px 0px 4px; } p {border-radius: 20px; }

Слайд 14

Описание слайда:

Добавление тени text-shadow – добавляет тень текста p { text-shadow: 3px 3px 0px rgba(100,100,100,0.3); } box-shadow – добавляет тень блока table { box-shadow: 1px 1px 5px 4px rgba(10,10,10,0.5); } inset – перемещает тень внутрь блока

Слайд 15

Описание слайда:

Загружаемые шрифты @font-face { font-family: myFont; src: url(“font/myriadpro.woff”); } p { font-family: myFont; }

Слайд 16

Описание слайда:

Режим установки размеров box-sizing – задает режим, в котором будут устанавливаться размеры content-box – только размер контента border-box – размер контента, отступа и рамки p { box-sizing: border-box; padding: 20px; width: 200px; border: 10px solid; }

Слайд 17

Описание слайда:

Градиент Градиент – изображение полученное путем плавного перетекания одного цвета в другой В CSS3 существует 2 вида градиентов: Линейные Радиальные

Слайд 18

Описание слайда:

Линейный градиент linear-gradient() – задает линейный градиент body { background: linear-gradient(to right, blue, lightblue, white, lightblue, blue 50%, white 50%); }

Слайд 19

Описание слайда:

Радиальный градиент radial-gradient() – задает радиальный градиент closest-side – ближайшая сторона closest-corner – ближайший угол farther-side – дальняя сторона farther-corner – дальний угол body { background: radial-gradient(ellipse closest-corner at 50% 50%, lightblue,blue); }

Слайд 20

Описание слайда:

Анимация

Слайд 21

Описание слайда:

Время анимации transition-duration – задает время анимации (измеряется в s или ms) #animated { color: #ff0000; } #animated:hover { color: #00ff00; transition-duration: 2s; }

Слайд 22

Описание слайда:

Анимируемые атрибуты transition-property – задает атрибуты, которые необходимо анимировать (all, none, перечень конкретных атрибутов) #animated { color: #ff0000; background: #fff; } #animated:hover { color: #00ff00; background: #000; transition-property: color; transition-duration: 2s; }

Слайд 23

Описание слайда:

Задержка transition-delay – задает задержку перед началом анимации #animated { color: #ff0000; background: #fff; } #animated:hover { color: #00ff00; background: #000; transition-duration: 2s; transition-delay: 1s; }

Слайд 24

$Законы анимации transition-timing-function – задает закон изменения значения атрибута easy (||) linear (-) easy-in (/-) easy-out (-\) easy-in-out...$

Описание слайда:

Законы анимации transition-timing-function – задает закон изменения значения атрибута easy (||) linear (-) easy-in (/-) easy-out (-\) easy-in-out (/\) настраиваемые законы (cubic-bezier, steps, step-start, step-end)

Слайд 25

Описание слайда:

Задание всех параметров transition – позволяет задать сразу все параметры по схеме «атрибут продолжительность закон задержка» #animated:hover { color: #00ff00; background: #000; transition: color 2s linear 1s; }

Слайд 26

Описание слайда:

Набор анимаций @keyframes sky { from { background: darkslateblue; } 50% { background: skyblue; box-shadow: 0 -400px 300px -300px steelblue inset; } 85% { background: darkslateblue; box-shadow: 0 -400px 300px -300px orangered inset; } to { background: darkslateblue; } }

Слайд 27

Описание слайда:

Указание набора состояний animation-name – позволяет выбрать необходимый набор состояний #animated:hover { animation-name: sky; animation-duration: 2s; animation-delay: 1s; animation-timing-function: easy; animation-iteration-count: infinite; }

Слайд 28

Описание слайда:

Преобразования transform: функция(параметры) translateX / translateY / translateZ – смещение scaleX / scaleY / scaleZ – масштабирование skewX / skewY / skewZ – наклон rotate – поворот transform-origin – точка начала координат perspective – перспектива (глубина) perspective-origin – точка зрения transform-style (flat / preserve-3d) – режим проецирования

Слайд 29

Описание слайда:

Пример body { perspective: 450px; } #cont { width: 300px; height: 300px; background-color: black; transform: rotateX(40deg); transform-style: preserve-3d; } #ch { background-color: red; width: 150px; height: 150px; transform: translate3d(50px, 20px, 25px); } 123