1 / 28

НОВЫЕ ВОЗМОЖНОСТИ CSS3 ДЛЯ ВЕБ-ДИЗАЙНЕРОВ

ПРЕЗЕНТАЦИЯ К ЛЕКЦИИ ПО ДИСЦИПЛИНЕ «ТЕХНОЛОГИИ ВЕБ-ДИЗАЙНА» АВТОР: СОЛОВЬЕВА ВЕРА ВИКТОРОВНА, ПРЕПОДАВАТЕЛЬ КОЛЛЕДЖА ДИЗАЙНА КБГУ. НОВЫЕ ВОЗМОЖНОСТИ CSS3 ДЛЯ ВЕБ-ДИЗАЙНЕРОВ. УПРАВЛЕНИЕ ПРОЗРАЧНОСТЬЮ ИСПОЛЬЗОВАНИЕ ГРАДИЕНТОВ ЭФФЕКТЫ ДЛЯ РАМОК АНИМАЦИЯ ШРИФТЫ СПЕЦЭФФЕКТЫ ДЛЯ ТЕКСТА

ahava
Download Presentation

НОВЫЕ ВОЗМОЖНОСТИ CSS3 ДЛЯ ВЕБ-ДИЗАЙНЕРОВ

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. ПРЕЗЕНТАЦИЯ К ЛЕКЦИИ ПО ДИСЦИПЛИНЕ «ТЕХНОЛОГИИ ВЕБ-ДИЗАЙНА» АВТОР: СОЛОВЬЕВА ВЕРА ВИКТОРОВНА, ПРЕПОДАВАТЕЛЬ КОЛЛЕДЖА ДИЗАЙНА КБГУ НОВЫЕ ВОЗМОЖНОСТИ CSS3ДЛЯ ВЕБ-ДИЗАЙНЕРОВ

  2. УПРАВЛЕНИЕ ПРОЗРАЧНОСТЬЮ ИСПОЛЬЗОВАНИЕ ГРАДИЕНТОВ ЭФФЕКТЫ ДЛЯ РАМОК АНИМАЦИЯ ШРИФТЫ СПЕЦЭФФЕКТЫ ДЛЯ ТЕКСТА ТРАНСФОРМАЦИИ СВОЙСТВА ФОНА ВОЗМОЖНОСТИ ДЛЯ ДИЗАЙНА ВЕБ 2.0.

  3. Установка уровня прозрачности opacity:0.5; Возможные уровни прозрачности от 0 до 1. Для Internet Explorer используется следующая альтернатива filter:Alpha(opacity=50); /* Internet Explorer */ УПРАВЛЕНИЕ ПРОЗРАЧНОСТЬЮ

  4. линейный градиент, направленный сверху вниз, основанный на двух цветах #ccc и #fff. background: linear-gradient(top,#ccc,#fff) Градиент для горизонтальных полос background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent)); background-image: -moz-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent); background-image: -o-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent); background-image: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent); Можно использовать генератор градиентов Ultimate CSS GradientGenerator. Вручную настраиваем градиент, как в графическом редакторе, а программа генерирует код. Код можно скопировать и вставить в свою страницу. ИСПОЛЬЗОВАНИЕ ГРАДИЕНТОВ

  5. border-radius – задание скруглённых углов box-shadow – задание тени под боксом border-image – создание рамки на основе изображения эфФЕКТЫ ДЛЯ РАМОК К следующему разделу>>

  6. Задание скругления радиусом 4 пикселя border:2px solid;-moz-border-radius:4px; /* Firefox */border-radius:4px; эфФЕКТЫ ДЛЯ РАМОК. Примеры.Скруглённые углы Вернуться к эффектам >>

  7. Задание тени под боксом -moz-box-shadow: 10px 10px 5px #888888; /* Firefox */ -webkit-box-shadow: 10px 10px 5px #888888; /* Safari and Chrome */box-shadow: 10px 10px 5px #888888; эффЕКТЫ ДЛЯ РАМОК. Примеры.Задание тени под боксом Вернуться к эффектам >>

  8. Задание рамки на основе изображения -moz-border-image:url(border.png) 30 30 round; /* Firefox */ -webkit-border-image:url(border.png) 30 30 round; /* Safari and Chrome */ border-image:url(border.png) 30 30 round; эфЕКТЫ ДЛЯ РАМОК. Примеры.Скруглённые углы Вернуться к эффектам >>

  9. Директива @keyframes позволяет создавать анимацию. Анимация создаётся внутри директивы @keyframes и позволяет менять свойства от текущего стиля до нового @keyframesmyanim{from {background: red;}to {background: yellow;}}@-webkit-keyframesmyanim/* Safari and Chrome */{from {background: red;}to {background: yellow;}} АНИМАЦИЯ

  10. Анимация длительностью 5 секунд div{animation: myanim 5s;-webkit-animation: myanim 5s; /* Safari and Chrome */} Анимация. Примеры.описание

  11. Изменение цвета фона в ходе анимации @keyframesmyanim{0%   {background: red;}25%  {background: yellow;}50%  {background: blue;}100% {background: green;}} Анимация. Примеры. описание

  12. Изменение цвета фона и положения в ходе анимации @keyframesmyanim{0%   {background: red; left:0px; top:0px;}25%  {background: yellow; left:200px; top:0px;}50%  {background: blue; left:200px; top:200px;}75%  {background: green; left:0px; top:200px;}100% {background: red; left:0px; top:0px;}} Анимация. Примеры. описание

  13. Запуск ранее описанной анимации myanim с заданием свойств div{animation-name: myanim;animation-duration: 5s;animation-timing-function: linear;animation-delay: 2s;animation-iteration-count: infinite;animation-direction: alternate;animation-play-state-: running;} Анимация. Примеры. запуск

  14. animation-name- определение имени анимации; animation-duration – определяет длительность одного цикла анимации в секундах или миллисекундах; animation-timing-function– определяет как анимация будет развиваться в ходе одного цикла исполнения. По умолчанию– “ease“; animation-delay – определяет, когда анимация будет запущена; animation-iteration-count – Определяет число повторованимации. По умолчанию – 1; animation-direction– определяет будет ли анимация проигрываться в обратном направлении. По умолчанию “normal“; animation-play-state– определяет как анимация будет запускаться и останавливаться. По умолчанию- “running”. Свойства Анимации

  15. text-shadow – задание тени для текста text-shadow: 5px 5px5px #FF0000; word-wrap – задание переноса слов p {word-wrap:break-word;} СПЕЦЭФФЕКТЫ ДЛЯ ТЕКСТА ТЕКСТ С ТЕНЬЮ

  16. Директива @font-face позволяет использовать любой шрифт на сайте. @font-face{font-family:myFont;src:url(Betina_Light.ttf);} Можно использовать несколько директива @font-face Rule для одного и того же шрифта. Например, использовать для жирного начертания другой шрифт того-же семейства. @font-face{font-family:myFont;src:url(Betina_Bold.ttf);font-weight:bold;} ШРИФТЫ

  17. ТРАНСФОРМАЦИИ • С помощью CSS3 мы можем перемещать, масштабировать, вращать, переворачивать объекты. • Для этого существуют методы: • translate() • rotate() • scale() • skew() • matrix() К следующему разделу>>

  18. ТРАНСФОРМАЦИИ. перемещение • С помощью метода translate() • объект перемещают с его текущей • позиции в позицию определяемую • координатами верхнего левого угла • div{transform: translate(50px,100px);-webkit-transform: translate(50px,100px); /* Safari and Chrome */-o-transform: translate(50px,100px); /* Opera */-moz-transform: translate(50px,100px); /* Firefox */} Вернуться к началу раздела>>

  19. ТРАНСФОРМАЦИИ. вращение • С помощью метода rotate() • объект вращают на заданный угол. • Положительные значения – вращение • по часовой стрелке. • Отрицательные –против. • div{transform: rotate(30deg);-webkit-transform: rotate(30deg); • /* Safari and Chrome */-o-transform: rotate(30deg); /* Opera */-moz-transform: rotate(30deg); /* Firefox */} Вернуться к началу раздела>>

  20. ТРАНСФОРМАЦИИ. масштабирование • С помощью метода scale() • объект масштабируют в соответствии с • заданной шириной и высотой. • div{transform: scale(2,4);-webkit-transform: scale(2,4); /* Safari and Chrome */-o-transform: scale(2,4); /* Opera */-moz-transform: scale(2,4); /* Firefox */} Вернуться к началу раздела>>

  21. ТРАНСФОРМАЦИИ. переворот • С помощью метода skew() • объект переворачивают на угол, • Определяемый в градусах по вертикали • и горизонтали. • div{transform: skew(30deg,20deg);-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */-o-transform: skew(30deg,20deg); /* Opera */-moz-transform: skew(30deg,20deg); /* Firefox */} Вернуться к началу раздела>>

  22. ТРАНСФОРМАЦИИ. Универсальный способ • Метод matrix() комбинирует все возможные двумерные • трансформации с помощью шести параметров. • Пример, поворот на 30 градусов. • div{transform:matrix(0.866,0.5,-0.5,0.866,0,0);-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Firefox */-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Opera */} Вернуться к началу раздела>>

  23. background-clip – определяет область заполняемую фоновым изображением; background-origin– определяет расположение фонового изображения: content-box, padding-box, border-box; background-size – определяет размер фонового изображения. Допускается использование нескольких изображение в качестве фона для одного элемента (multiple background images). СВОЙСТВА ФОНА К следующему разделу>>

  24. Фоновое изображение заполняетcontent-box. Возможно заполнение border-box иpadding-box. background:url(img1.gif);background-repeat: no-repeat;background-size: 100% 100%;background-clip: content-box; СВОЙСТВА ФОНА. Примеры.background-clip Вернуться к свойствам >>

  25. Расположение фонового изображения в content-box background:url(img_1.gif);background-repeat:no-repeat;background-size:100% 100%;background-origin:content-box; СВОЙСТВА ФОНА. Примеры.background-origin Вернуться к свойствам >>

  26. Изменение размеров фонового изображения background:url(img_flwr.gif);-moz-background-size:80px 60px; /* Firefox */background-size:80px 60px;background-repeat:no-repeat; Растягивание изображения на размер контейнера background:url(img_flwr.gif);-moz-background-size:100% 100%; /* Firefox */background-size:100% 100%;background-repeat:no-repeat; СВОЙСТВА ФОНА. Примеры.background-size Вернуться к свойствам >>

  27. Использование двух различных изображений для элемента body body{ background-image:url(img_1.gif),url(img_2.gif);} СВОЙСТВА ФОНА. Примеры.Использование нескольких изображений Вернуться к свойствам >>

  28. www.habrahabr.ru www.w3schools.com ДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ

More Related