HTML/CSS | 9 октября 2010 |

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

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

CSS1 был введен в 1996 году. W3C отметил важность использования CSS, вместо того, что раньше делалось посредством HTML. Были введены id как уникальное свойство, классы, отступы, поля и так далее.

CSS2 появился в 1998 году, и было два обновления с поправкой предыдущих ошибок. CSS 2, 1 это последняя версия второго CSS.

И наконец-то CSS3. Последняя версия такой технологии как CSS.

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

Rounded Corners

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

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

Полезный сервис: border-radius.com
Прикольный сайт для ленивых. Вписывайте по бокам значения и копируйте код. Сразу заодно сможете посмотреть, как это будете выглядеть, чтобы не мучатся.

Пример кода:

1
2
3

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

Border Images

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

Пример:

1

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

Box Shadow

Собственно говоря, css3 тень. Блок отбрасывает тень, очень круто смотрится.

Ранее как и во многих других случаях приходилось пользовать Javascript либо картинки для создания тени. С появлением CSS3 дело немного меняется.

Честно говоря, сначала у меня не заработало. Но порыв исходник там где это работало, нашел следующие строки кода:

1
2
3
4
5
6

-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 браузерах.
К примеру, в стилях:

1
2
3
4
5
6

-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;

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

1
2
3
4
5
6
7
8
9
10

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

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

Multiple Backgrounds

Пока работает только в сафари – здесь лицезреем пример/

Пример кода:

1

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 шрифты в своих целях.

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

1
2
3
4
5
6
7

@font-face {
	font-family: “my-font”;
	src: url(my-font.tff) format(“truetype”);
}
#my_id {
	font-family: “my-font”, sans-serif;
}

Будет еще продолжение на тему CSS3. Потому, подписывайтесь, чтобы не пропустить обновления.

Рекомендую еще почитать

  • Прогресс бар на точках :D

    • Вы, можете добавить эту статью, в один из следующих сервисов:

    Опубликовать в Twitter Опубликовать в своем блоге livejournal.com

    11 коммент.

    1. Severus

      9 Окт 2010

      Ромка, скажи нет односложным комментам :D

    2. Ромка

      9 Окт 2010

      Афигительно!

    3. Сеошник

      10 Окт 2010

      Был у меня блог с дизайном и css3, ошибок показывало около сотни.

    4. Severus

      13 Окт 2010

      Да, я на ошибки давно забил. А потом, никакой необходимости делать на css3 щас ничего нет.

    5. CastleFight

      4 Фев 2011

      Абсолютно случайно наткнулся на твою статью, но очень мне понравилась. Я имею сайт, но он с виду не особо, вот теперь благодаря твоей стати копаю больше инфы по CSS3, чтоб переделать сайт покрасивее. Спасибо!

    6. CastleFight

      7 Фев 2011

      А про ХТМЛ 5 что то можешь написать?

    7. Severus

      7 Фев 2011

      CastleFight, в принципе, да.

    8. Бублик

      7 Фев 2011

      В HTML5 не так уж и много чего новенького))
      но есть полезные фишки))
      ток вот годика так через полтора через два можно будет переходить полностью на HTML5…
      когда все браузеры будут поддерживать на все 100%…

    9. CastleFight

      8 Фев 2011

      Выкладывай.
      Мне понравилась тема по ЦСС3, думаю по ХТМЛ5 ты тоже интересно напишешь, да и полезно узнать что-то новое

    10. Severus

      9 Фев 2011

      Ок, в течении недели, думаю, напишу пост. Спасибо.

    11. Severus

      9 Фев 2011

      Бублик, ну в целом, да-)