Манусаджян Рудольф: Блог

Манусаджян Рудольф

Дата последнего входа: 11.07.2016 04:35:47
Дата регистрации: 04.04.2010 21:40:01

Знакомство с CSS3

Немножко о CSS3
СSS3 обещает облегчить учесть веб-мастеров... с её наступлением на сайте графических объектов будет намного меньше, если конечно, опять не подкачают разработчики браузеров....

Прозрачность/Opacity

В браузерах, поддерживающих это свойство, указать прозрачность можно так:
Код
background-color: rgb(0,0,255);
opacity: 0.5;

Такое обьявление прозрачности подействует на всех потомков элемента. В том числе на текст, картинки, бэкграунд и т.д. Это очень неудобно. В грядущей версии CSS вводится новое обьявление - RGBA, которое решает данную проблему:
Код
background-color: rgba(0,0,255,0.5);

В данном случае только фон получит значение прозрачности 0.5.

Указание нескольких фоновых картинок/Multiple Backgrounds

Новая версия CSS позволяет добавлять элементам несколько фоновых картинок! Можно разместить изображения вверху, в центре, в углу и в других местах. Верстать сложные макеты станет намного проще.

Вот пример установки нескольких картинок для фона:
Код
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 позволит посетителю изменять размер элементов:
Код
div.resize {
   width: 100px;
   height: 100px;
   resize: both;
   overflow: auto;
}


Закругленные углы/border-radius





Классический путь

Код
<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

Код
<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





Классический путь

Код
<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

Код
<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






Классический путь

Код
<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>


Необычный шрифт







Этим моментом будьте поосторожней... могут быть проблемы с авторскими правами....



Классический путь

Код
<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>


Столбцы





Классический путь

Код
<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

Код
<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 - Возможна короткая запись трех предыдущих свойств.

Вот простой пример:
Код
div {
   opacity: 1;
   -webkit-transition: opacity 1s linear;
}
div:hover {
   opacity: 0;
}

Пример




Каждое из этих свойств может принимать несколько значений, разделенных запятыми (наподобие описанного выше multiple backgrounds). Это позволяет описывать разные виды переходов для разных css-свойств в одном стилевом правиле. Значения соответствуют друг другу согласно порядку следования:
Код
-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>

Пример




Границы блоков тоже можно анимировать. Следующий блок будет менять толщину и цвет границы при наведении мышкой.
Код
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));


Тоже интересный эффект расщипления слова по буквам)
Код
<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

Еще одно нововведение, волной обсуждений прокатившееся по интернету, - переменные в стилях. Вы можете их обьявлять, используя следующий синтаксис:

Код
@variables { keyColor: #f00; }

- А потом использовать где угодно в вашем CSS:

Код
h1 { color: var(keyColor); }

Используя этот метод, вы сможете, например, определить все нужные цвета в начале файла:

Код
@variables { firstcolor: #f00; secondcolor: #300; thirdcolor: #300; }


С одной стороны, переменные в CSS - большой шаг к увеличению возможностей. С другой же - порядочное усложнение языка. В любом случае - разработка CSS3 еще не завершена.

--
Буду рад выслушать жалобы и предложения!
--
wwW.RUD-MAN.Com

Новые темыОбъявленияСвободное общение
22:08 Нетематические разделы на сайте - мешают или помогают? 
21:30 Запустили интернет магазин по стройматериалам месяц назад. Как продвигать в поиске? 
20:56 19 сентября 2017 текстовой апдейт Яндекса 
19:41 Нагрузка на сервер 
18:27 Партнерская программа NutriProfits - зарабатывай до 40% за сейл! 
17:49 TeaserNet - тизерная сеть нового поколения! Высокие доходы, стабильные выплаты 
17:18 Уникальная партнерская программа Gambling Partners! 
22:09 Качественный прогон Хрумером, Zennoposterом всего 10 WMZ, Большой опыт работы. Статьи, комментарии, профиля, гостевые. 
21:50 200 открытых анкорных ссылок всего за 100 рублей 
21:42 XMLGold.eu (Perfect Money, Bank wire, Bitcoin, Litecoin, AdvCash, Payeer, Paypal) 
21:32 Продам 8 сайтов в ГГЛ 
20:38 Куплю размещение статей на англоязычных ресурсах 
20:13 ТиЦ 250. Игровой сайт 
19:59 Качественные профильные и статейные прогоны хрумером по своим базам! 
22:35 Дробим высокочастотный запрос на СЧ и НЧ в директе 
21:52 Трудовой стаж для фрилансеров в Украине? 
20:20 Активация аккаунта адсенс 
20:02 301 redirect 
18:03 Осенний чат на форуме / говорите о своём 
17:29 Мануал как можно заработать деньги на финансовой партнерке Share4you 
17:13 [CPT]#CRYPTAUR- магазин децентрализованных приложений.