1. Теперь за форумную активность начисляются биткоины и другие криптоденьги. Подробнее.
    Скрыть объявление
  2. Появилась архивная версия форума arhiv.xaker.name, где собраны темы с 2007 по 2012 год.
    Скрыть объявление

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

Тема в разделе "CSS, HTML, JS", создана пользователем хопкинс, 25 янв 2012.

  1. хопкинс
    хопкинс Продвинутый
    Симпатии:
    35
    • Закругленные углы (это из больных тем)
      Пример:
      Код:
      -webkit-border-radius: 15px;
      -moz-border-radius: 15px;
      border-radius: 15px;
      [+] Изображение
      [​IMG]
      [свернуть]

      А еще есть вот такой сайт.для ленивых)))->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;
      [+] Изображение
      [​IMG]
      [свернуть]
    • Множественные фоны
      Пример:
      Код:
      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);
      [+] Изображение
      [​IMG]
      [свернуть]
    • Пользовательское изменение размера
      Пример:
      Код:
      div.resize {
         width: 100px;
         height: 100px;
         resize: both;
         overflow: auto;
      }
      [+] Изображение
      [​IMG]
      [свернуть]
    • Колоночная раскладка
      Пример:
      Код:
      <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>
      [+] Изображение
      [​IMG]
      [свернуть]
    • Анимация
      Пример:
      Код:
      <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:
     
    Последнее редактирование: 25 янв 2012
    25 янв 2012
    2 пользователям это понравилось.

Поделиться этой страницей

Загрузка...