СSS3 обещает облегчить учесть веб-мастеров... с её наступлением на сайте графических объектов будет намного меньше, если конечно, опять не подкачают разработчики браузеров....
Прозрачность/Opacity
В браузерах, поддерживающих это свойство, указать прозрачность можно так:
Код
Такое обьявление прозрачности подействует на всех потомков элемента. В том числе на текст, картинки, бэкграунд и т.д. Это очень неудобно. В грядущей версии CSS вводится новое обьявление - RGBA, которое решает данную проблему:
background-color: rgb(0,0,255); opacity: 0.5; |
Такое обьявление прозрачности подействует на всех потомков элемента. В том числе на текст, картинки, бэкграунд и т.д. Это очень неудобно. В грядущей версии CSS вводится новое обьявление - RGBA, которое решает данную проблему:
Код
В данном случае только фон получит значение прозрачности 0.5.
Указание нескольких фоновых картинок/Multiple Backgrounds
Новая версия CSS позволяет добавлять элементам несколько фоновых картинок! Можно разместить изображения вверху, в центре, в углу и в других местах. Верстать сложные макеты станет намного проще.
Вот пример установки нескольких картинок для фона:
background-color: rgba(0,0,255,0.5); |
В данном случае только фон получит значение прозрачности 0.5.
Указание нескольких фоновых картинок/Multiple Backgrounds
Новая версия CSS позволяет добавлять элементам несколько фоновых картинок! Можно разместить изображения вверху, в центре, в углу и в других местах. Верстать сложные макеты станет намного проще.
Вот пример установки нескольких картинок для фона:
Код
Пользовательское изменение размера/Resize
Средствами новой версии CSS можно будет добавить немного интерактивности на ваш сайт - свойство resize позволит посетителю изменять размер элементов:
background: url(body-top.gif) top left no-repeat, url(banner_fresco.jpg) top 11px no-repeat, url(body-bottom.gif) bottom left no-repeat, url(body-middle.gif) left repeat-y; |
Пользовательское изменение размера/Resize
Средствами новой версии CSS можно будет добавить немного интерактивности на ваш сайт - свойство resize позволит посетителю изменять размер элементов:
Код
Закругленные углы/border-radius
Классический путь
div.resize { width: 100px; height: 100px; resize: both; overflow: auto; } |
Закругленные углы/border-radius

Классический путь
Код
CSS3
<sc ript type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <sc ript type="text/javascript" src="js/jquery.corners.js"></script> <sc ript type="text/javascript"> $(function(){ $('.box').corners('10px'); }); </script> <div class="box"> <!--CONTENT--> </div> |
CSS3
Код
Всё, что нужно сделать — это описать 3 свойства!
Тень блока/box-shadow
Классический путь
<st yle type="text/css"> .box { border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; } </style> <div class="box"> <!--CONTENT--> </div> |
Всё, что нужно сделать — это описать 3 свойства!
Тень блока/box-shadow

Классический путь
Код
CSS3
<sc ript type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <sc ript type="text/javascript" src="js/jquery.dropShadow.js"></script> <sc ript type="text/javascript"> $(function(){ $('.box').dropShadow({ left: 5, top: 5, opacity: 1.0, color: 'black' }); }); </script> <div class="box"> <!--CONTENT--> </div> |
CSS3
Код
Текст с тенью/text-shadow
Классический путь
<st yle type="text/css"> .box { box-shadow: 5px 5px 2px black; -moz-box-shadow: 5px 5px 2px black; -webkit-box-shadow: 5px 5px 2px black; } </style> <div class="box"> <!--CONTENT--> </div> |
Текст с тенью/text-shadow

Классический путь
Код
CSS3
<st yle type="text/css"> .font { font-size: 20px; color: #2178d9; } .fonts { position: relative; } .fonts .font { position: absolute; z-index: 200; } .fonts .second { top: 1px; color: #000; z-index: 100; } </style> |
CSS3
Код
Необычный шрифт
Этим моментом будьте поосторожней... могут быть проблемы с авторскими правами....
Классический путь
<st yle type="text/css"> .font { font-size: 20px; color: #2178d9; } .font { text-shadow: 0 1px 0 #000; } </style> |
Необычный шрифт

Этим моментом будьте поосторожней... могут быть проблемы с авторскими правами....
Классический путь
Код
CSS3
<sc ript type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <sc ript type="text/javascript" src="js/cufon.js"></script> <sc ript type="text/javascript" src="js/loyal.js"></script> <sc ript type="text/javascript"> $(function(){ Cufon.replace('.classic .font'); }); </script> <st yle type="text/css"> .font { font-size: 20px; } </style> |
CSS3
Код
Столбцы
Классический путь
<st yle type="text/css"> @font-face { font-family: 'Loyal'; src: url('loyal.ttf'); } .font { font-family: Loyal; font-size: 20px; } </style> |
Столбцы

Классический путь
Код
CSS3
<sc ript type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <sc ript type="text/javascript" src="js/jquery.columnize.js"></script> <sc ript type="text/javascript"> $(function(){ $('.columns').columnize({ columns: 2 }); }); </script> <st yle type="text/css"> .column { padding-right: 10px; } .column.last { padding: 0; } </style> |
CSS3
Код
Анимация/Animation
Еще одна замечательная возможность третьей версии CSS - анимация. Здесь довольно много нюансов, поэтому начнем с самого начала.
Самый простой вид анимации - "transition", то бишь "переход". Суть его состоит в том, что можно заставить элемент, при смене какого-то css-свойства, меняться не мгновенно, а в соответствии с какой-то временной функцией. Интересно, не так ли?
"transitions" определяются следующими свойствами:
Вот простой пример:
<st yle type="text/css"> .columns { -moz-column-count: 2; -webkit-column-count: 2; } </style> |
Анимация/Animation
Еще одна замечательная возможность третьей версии CSS - анимация. Здесь довольно много нюансов, поэтому начнем с самого начала.
Самый простой вид анимации - "transition", то бишь "переход". Суть его состоит в том, что можно заставить элемент, при смене какого-то css-свойства, меняться не мгновенно, а в соответствии с какой-то временной функцией. Интересно, не так ли?
"transitions" определяются следующими свойствами:
- • transition-property - Какое свойство элемента мы анимируем - например, "opacity".
• transition-duration - Время, которое будет продолжаться анимация.
• transition-timing-function - Функция от времени, определяющая типа изменения - например: liner, ease-in, и т.п.
• transition - Возможна короткая запись трех предыдущих свойств.
Вот простой пример:
Код
Пример
Каждое из этих свойств может принимать несколько значений, разделенных запятыми (наподобие описанного выше multiple backgrounds). Это позволяет описывать разные виды переходов для разных css-свойств в одном стилевом правиле. Значения соответствуют друг другу согласно порядку следования:
div { opacity: 1; -webkit-transition: opacity 1s linear; } div:hover { opacity: 0; } |
Пример
Каждое из этих свойств может принимать несколько значений, разделенных запятыми (наподобие описанного выше multiple backgrounds). Это позволяет описывать разные виды переходов для разных css-свойств в одном стилевом правиле. Значения соответствуют друг другу согласно порядку следования:
Код
- в этом правиле, степень прозрачности будет менятся две секунды, а отступ слева(left) - четыре.
Могут быть анимированы и некоторые сложные свойства. Возьмем для примера новое свойство -webkit-transform. Вот пример эффекта кручения с анимацией:
-webkit-transition-property: opacity, left; -webkit-transition-duration: 2s, 4s; |
- в этом правиле, степень прозрачности будет менятся две секунды, а отступ слева(left) - четыре.
Могут быть анимированы и некоторые сложные свойства. Возьмем для примера новое свойство -webkit-transform. Вот пример эффекта кручения с анимацией:
Код
Пример
Границы блоков тоже можно анимировать. Следующий блок будет менять толщину и цвет границы при наведении мышкой.
<div st yle="-webkit-transition: -webkit-transform 3s ease-in" onc lick="this.style.webkitTransform='rotate(360deg)'"> При первом клике этот блок будет поворачиваться! </div> |
Пример
Границы блоков тоже можно анимировать. Следующий блок будет менять толщину и цвет границы при наведении мышкой.
Код
Пример
Заметьте, что в примерах с наведением курсора анимация сама меняет "направление" когда курсор перемещается за пределы элемента. В любой момент, когда свойство меняет значение, анимация начинается с текущей позиции (также как с изначального значения) и целью становится новое значение. Для вычисления новой цели испольуется исходное значение свойства, указанного в transition-property.
Моменты, важные для понимания "переходов":
• Transitions - это неявные анимации. Скрипты и остальные стили могут быть обычными, и анимирование будет происходить неявно во время смены значений у свойств.
• Эти свойства абсолютно не критичны. Браузеры, не поддерживающие их, просто не покажут анимацию - остальной код и стили будет работать как обычно.
Вот более детальное описание данных свойств. Всем им можно писать значения списком через запятую.
transition-property
transition-duration
transition-timing-function
Ключевые слова, которыми задается значение transition-timing-function, имеют такие определения:
• linear - Линейная функция возвращает неизмененное полученное значение.
• default - Функция по умолчанию эквивалентна cubic-bezier(0.25, 0.1, 0.25, 1.0)
• ease-in - cubic-bezier(0.42, 0, 1.0, 1.0)
• ease-out - cubic-bezier(0, 0, 0.58, 1.0)
• ease-in-out - cubic-bezier(0.42, 0, 0.58, 1.0)
• cubic-bezier - Задает кривую Безье третьего порядка с точками P0 и P3 в (0,0) и (1,1) соответственно. Четыре параметра задают координаты точек P1 и P2 в таком порядке: (x1, y1, x2, y2).
Так же можно с помощью анимации прикрыть текст картинкой... короче сложно объяснить)
background-color:maroon;color:white; -webkit-transition: all 500ms linear;margin:10px;border:10px solid black" onm ouseover="this.style.border='20px solid blue'" onm ouseout="this.style.border='10px solid black' |
Пример
Заметьте, что в примерах с наведением курсора анимация сама меняет "направление" когда курсор перемещается за пределы элемента. В любой момент, когда свойство меняет значение, анимация начинается с текущей позиции (также как с изначального значения) и целью становится новое значение. Для вычисления новой цели испольуется исходное значение свойства, указанного в transition-property.
Моменты, важные для понимания "переходов":
• Transitions - это неявные анимации. Скрипты и остальные стили могут быть обычными, и анимирование будет происходить неявно во время смены значений у свойств.
• Эти свойства абсолютно не критичны. Браузеры, не поддерживающие их, просто не покажут анимацию - остальной код и стили будет работать как обычно.
Вот более детальное описание данных свойств. Всем им можно писать значения списком через запятую.
transition-property
- Значения: none | all | <property>
По умолчанию: all
Описание: Указывает какое css-свойство подвергается анимации. Если указано значение 'none' - анимации не будет. Значение 'all' значит, что каждое свойство будет анимировано, если такое возможно. В остальных случаях значением будет определенное css-свойство.
transition-duration
- Значения: <time>
По умолчанию: 0
Описание: Определяет продолжительность (время) изменения значения свойства.
transition-timing-function
- Значения: default | linear | ease-in | ease-out | ease-in-out | cubic-bezier(x1, y1, x2, y2)
По умолчанию: default
Описание: Это свойство задает закон, по которому будет изменяться заданное свойство элемента.
Ключевые слова, которыми задается значение transition-timing-function, имеют такие определения:
• linear - Линейная функция возвращает неизмененное полученное значение.
• default - Функция по умолчанию эквивалентна cubic-bezier(0.25, 0.1, 0.25, 1.0)
• ease-in - cubic-bezier(0.42, 0, 1.0, 1.0)
• ease-out - cubic-bezier(0, 0, 0.58, 1.0)
• ease-in-out - cubic-bezier(0.42, 0, 0.58, 1.0)
• cubic-bezier - Задает кривую Безье третьего порядка с точками P0 и P3 в (0,0) и (1,1) соответственно. Четыре параметра задают координаты точек P1 и P2 в таком порядке: (x1, y1, x2, y2).
Так же можно с помощью анимации прикрыть текст картинкой... короче сложно объяснить)
Код
Пример
Отражение:
.teaser img { -webkit-transition: left .6s linear; } .teaser:hover img { left: -200px; } |
Пример
Отражение:

Код
Тоже интересный эффект расщипления слова по буквам)
-webkit-box-reflect: below 2px -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(.5, transparent), to(white)); |
Тоже интересный эффект расщипления слова по буквам)
Код
Пример
Переменные в CSS
Еще одно нововведение, волной обсуждений прокатившееся по интернету, - переменные в стилях. Вы можете их обьявлять, используя следующий синтаксис:
<st yle type="text/css" media="screen"> #limerik span{ position:relative; -webkit-transition: all 1s ease-out; -o-transition: all 1s ease-out; -moz-transition: all 1s ease-out; display:inline-block; } body:hover #limerik span{ left:0 !important; top:0 !important; -webkit-transform: scale(1) rotate(0deg) !important; -moz-transform: scale(1) rotate(0deg) !important; -o-transform: scale(1) rotate(0deg) !important; } </style> |
Пример
Переменные в CSS
Еще одно нововведение, волной обсуждений прокатившееся по интернету, - переменные в стилях. Вы можете их обьявлять, используя следующий синтаксис:
Код
- А потом использовать где угодно в вашем CSS:
@variables { keyColor: #f00; } |
- А потом использовать где угодно в вашем CSS:
Код
Используя этот метод, вы сможете, например, определить все нужные цвета в начале файла:
h1 { color: var(keyColor); } |
Используя этот метод, вы сможете, например, определить все нужные цвета в начале файла:
Код
С одной стороны, переменные в CSS - большой шаг к увеличению возможностей. С другой же - порядочное усложнение языка. В любом случае - разработка CSS3 еще не завершена.
--
Буду рад выслушать жалобы и предложения!
--
wwW.RUD-MAN.Com
@variables { firstcolor: #f00; secondcolor: #300; thirdcolor: #300; } |
С одной стороны, переменные в CSS - большой шаг к увеличению возможностей. С другой же - порядочное усложнение языка. В любом случае - разработка CSS3 еще не завершена.
--
Буду рад выслушать жалобы и предложения!
--
wwW.RUD-MAN.Com