Новые возможности css 3

• Закругленные углы (это из больных тем)
  Пример:
  
  Код:

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

  [+] Изображение

  
  [свернуть]

  
  А еще есть вот такой сайт.для ленивых)))->border-radius.com
• Обозначение границы элементов
  Пример:
  
  Код:

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

• Тень
  Пример:
  
  Код:

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

  [+] Изображение

  
  [свернуть]

• Множественные фоны
  Пример:
  
  Код:

  background: url(body-top.gif) top left no-repeat, url(banner.jpg) top 11px no-repeat, url(body-bottom.gif) bottom left no-repeat, url(body-middle.gif) left repeat-y;

  Этот эффект хорошо показан здесь
• Решена проблема с шрифтами
  Пример:
  
  Код:

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

• Прозрачность
  Пример;
  
  Код:

  background-color: rgba(0,0,255,0.5);

  [+] Изображение

  
  [свернуть]

• Пользовательское изменение размера
  Пример:
  
  Код:

  div.resize {
     width: 100px;
     height: 100px;
     resize: both;
     overflow: auto;
  }

  [+] Изображение

  
  [свернуть]

• Колоночная раскладка
  Пример:
  
  Код:

  <style type="text/css">
  div {
     column-width: 15em;
     column-gap: 2em;
     column-rule: 4px solid green;
     padding: 5px;
  }
  </style>
  <div>
  Ab cde fgh i jkl. Mno
  pqr stu vw xyz. A bc
  def g hij
  ...
  </div>

  [+] Изображение

  
  [свернуть]

• Анимация
  Пример:
  
  Код:

  <div style="-webkit-transition: -webkit-transform 3s ease-in"
        onclick="this.style.webkitTransform='rotate(360deg)'">
  При первом клике этот блок будет поворачиваться!
  </div>

  Еще можно сделать вот такой "фокус"
• Переменные
  Пример:
  
  Код:

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

В заключении добавить что CSS 3 пока что поддерживает очень малое количество браузеров и лично мне по душе заменить все эти эффекты другими вариантами.(использование других языков и т.п), но как говорится "На вкус и цвет,товарищей нет!"...Надеюсь эта информация окажется кому нибудь полезной:thx: