С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
