🗊Презентация CSS 3. Cascading Style Sheets

Категория: Интернет
Нажмите для полного просмотра!
CSS 3. Cascading Style Sheets, слайд №1CSS 3. Cascading Style Sheets, слайд №2CSS 3. Cascading Style Sheets, слайд №3CSS 3. Cascading Style Sheets, слайд №4CSS 3. Cascading Style Sheets, слайд №5CSS 3. Cascading Style Sheets, слайд №6CSS 3. Cascading Style Sheets, слайд №7CSS 3. Cascading Style Sheets, слайд №8CSS 3. Cascading Style Sheets, слайд №9CSS 3. Cascading Style Sheets, слайд №10CSS 3. Cascading Style Sheets, слайд №11CSS 3. Cascading Style Sheets, слайд №12CSS 3. Cascading Style Sheets, слайд №13CSS 3. Cascading Style Sheets, слайд №14CSS 3. Cascading Style Sheets, слайд №15CSS 3. Cascading Style Sheets, слайд №16CSS 3. Cascading Style Sheets, слайд №17CSS 3. Cascading Style Sheets, слайд №18CSS 3. Cascading Style Sheets, слайд №19CSS 3. Cascading Style Sheets, слайд №20CSS 3. Cascading Style Sheets, слайд №21CSS 3. Cascading Style Sheets, слайд №22CSS 3. Cascading Style Sheets, слайд №23CSS 3. Cascading Style Sheets, слайд №24CSS 3. Cascading Style Sheets, слайд №25CSS 3. Cascading Style Sheets, слайд №26CSS 3. Cascading Style Sheets, слайд №27CSS 3. Cascading Style Sheets, слайд №28CSS 3. Cascading Style Sheets, слайд №29
Скачать

Содержание ▲

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

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

Слайд 1


CSS 3 Cascading Style Sheets
Описание слайда:
CSS 3 Cascading Style Sheets

Слайд 2


Поддержка в браузерах IE – 9 Mozila – 4.0 Chrome – 10 Opera – 10.5 Safari – 5.1
Описание слайда:
Поддержка в браузерах 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; }
Описание слайда:
Новые псевдоклассы :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; }
Описание слайда:
Новые псевдоклассы :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; }
Описание слайда:
Новые псевдоклассы :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; }
Описание слайда:
Новые псевдоклассы :not() – задает стиль элементу удовлетворяющее основному условию и не удовлетворяющему условию в скобках p:not(:first-child) { color: green; }

Слайд 7


Единицы измерения rew – размер относительно размера шрифта элемента <html> p { font-size: 3rew; } vw – 1% ширины окна input { width: 50vw; } vh – 1% высоты окна div { width: 25vh; } calc – высчитывает размер элемента div { width: calc(100% - 100px); }
Описание слайда:
Единицы измерения rew – размер относительно размера шрифта элемента <html> 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; }
Описание слайда:
Работа с таблицами 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; }
Описание слайда:
Размеры фонового изображения 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; }
Описание слайда:
Позиционирование фонового изображения 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; }
Описание слайда:
Режим заполнения для фонового изображения 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); }
Описание слайда:
Прозрачность фона 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; }
Описание слайда:
Скругление углов 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 – перемещает тень внутрь блока
Описание слайда:
Добавление тени 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; } www.font2web.com
Описание слайда:
Загружаемые шрифты @font-face { font-family: myFont; src: url(“font/myriadpro.woff”); } p { font-family: myFont; } www.font2web.com

Слайд 16


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

Слайд 17


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

Слайд 18


Линейный градиент linear-gradient() – задает линейный градиент body { background: linear-gradient(to right, blue, lightblue, white, lightblue, blue 50%, white 50%); }
Описание слайда:
Линейный градиент 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); }
Описание слайда:
Радиальный градиент 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; }
Описание слайда:
Время анимации 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; }
Описание слайда:
Анимируемые атрибуты 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; }
Описание слайда:
Задержка 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 (/\) настраиваемые законы (cubic-bezier, steps, step-start, step-end)
Описание слайда:
Законы анимации 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; }
Описание слайда:
Задание всех параметров 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; } }
Описание слайда:
Набор анимаций @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; }
Описание слайда:
Указание набора состояний 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) – режим проецирования
Описание слайда:
Преобразования 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); } <body> <div id = “cont” > <div id =“ch”>123</div> </div>
Описание слайда:
Пример 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); } <body> <div id = “cont” > <div id =“ch”>123</div> </div>

Скачать

Похожие презентации
Mypresentation.ru
Загрузить презентацию