CSS3 - Новые Возможности

CSS1 был введен в 1996 году. W3C отметил важность использования CSS, вместо того, что раньше делалось посредством HTML. Были введены идентификаторы  как уникальное свойство, класса, отступы, поля и так далее. CSS2 появился в 1998 году, и было несколько обновлений версий с поправкой предыдущих ошибок. CSS 2, 1 это самая последняя версия второго CSS. И наконец-то CSS3. Самая последняя на сегоднящний день версия такой технологии как CSS. расмотрим основные аспекты нововедений в css версии под номером 3.

Теперь начнем по порядку, новые возможности:

Rounded Corners
Закругленные углы это из больных тем. Немало топиков было на форумах, с вопросом как их сделать. И, потому иметь возможность сделать закругленные углы без дополнительных картинок и JavaScript очень круто.

Поддержка браузеров:
Opera начиная от версии 10.5, Safari старше 5 версии, Chrome

Border Images
Неплохая возможность. Теперь границу элемента можно обозначать при помощи CSS3. Насколько я знаю, пока не все браузеры поддерживают, хотя, скорее всего во всех новых браузерах уже возможность присутствует.

Пример:

border-image:  url(border.png) 30 30 30 30 round round;

Box Shadow
Собственно говоря, css3 тень. Блок отбрасывает тень, очень круто смотрится.
Ранее как и во многих других случаях приходилось пользовать Javascript либо картинки для создания тени. С появлением CSS3 дело немного меняется.
Честно говоря, сначала у меня не заработало. Но порыв исходник там где это работало, нашел следующие строки кода:

-o-box-shadow: 10px 10px 5px #888;
-icab-box-shadow: 10px 10px 5px #888;
-khtml-box-shadow: 10px 10px 5px #888;
-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;

В опере и фф точно работает, в последних версиях.

Multi-Column Layout
На данный момент поддержка реализована только в Mozilla и Safari браузерах.
К примеру, в стилях:

-moz-column-count: 3;
-moz-column-gap: 1em;
-moz-column-rule: 1px solid black;
-webkit-column-count: 3;
-webkit-column-gap: 1em;
-webkit-column-rule: 1px solid black;

И какой нибудь див:

<div id="bord">
Раз два три четыре
пять шесть семь восемь
Раз два три четыре
пять шесть семь восемь
Раз два три четыре
пять шесть семь восемь
Раз два три четыре
пять шесть семь восемь
</div>

Лично для меня ненужная вещь, но кто знает...

Multiple Backgrounds
Пока работает только в сафари.

Пример кода:

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;

@font-face

А вот действительно крутая вещь, которая мне нравится - ). Проблемы что у юзера нет этого шрифта теперь не должно быть.
CSS3 дает возможность пользовать True Type .ttf и open type .otf шрифты в своих целях.

Вот как это работает:

@font-face {
    font-family: “my-font”;
    src: url(my-font.tff) format(“truetype”);
}
#my_id {
    font-family: “my-font”, sans-serif;
}
Похожие материалы
5 полезных плагинов для комментариев на блоге WordPress Наличие формы добавления комментариев на блоге - это один из важных моментов его дальнейшего развития и популя...
Не публикуются планируемые публикации? Сколько уже сказано о регулярности, с которой необходимо выкладывать новые публикации в своем блоге. Регулярно...
Обзор web сервиса iGoogle Решил рассказать вам про одну замечательную штуку под названием iGoogle. Я же использую iGoogle для чтения нов...
Расширения браузера Mozilla Firefox для веб-разработчиков и дизайнеров Интернет-браузер Mozilla Firefox имеет определенный верх над другими веб-браузерами благодаря своим превосходн...
User avatar
MrBoriska

Не очень то и новые
:(

Вот 3d трансформации - новые, функции-счетчики, тоже новые.

Категории раздела
Новое на форуме
Популярные материалы
Популярные теги