Interactive CSS (iCss) - Расширенные возможности CSS

Главная О проекте Примеры Документация F.A.Q. Плагины

О будущем CSS3 и Web стандартов Форум iCss

Наглядный пример iCss файла можно увидеть здесь.

Возможности iCss

- Константы
- Арифметика
- Сокращение селекторов
- Абстрактные классы
- Пользовательские свойства
- Система событий
- Анимация
- Углы для блоков
- Гибкая система табов
- Мощная и стильная галерея

Арифметика при объявлении констант можно использовать арифметические выражения (+,-,*,/)
Пример 1. Объявляем новую константу, которая = 10px


  !c_my1: 10px; // объявляем константу

Пример 2. Используем арифметическое выражение


  !c_my1: 10px;
  !c_my2: !c_my1 + 30px; // !c_my2 = 40px;

Внимание: Арифметические выражения работают только при объявлении констант.

Сокращение селекторов т.к. частенько наименования селекторов дублируются, мы решили включить возможность сокращения селекторов следующим образом...
Пример. Сокращение селекторов происходит с помощью символа тире "-"


  .topMenu { width: 693px; }
            
            - a { display:block; float: left; color: black }
            /* вместо "-" будет подставляться селектор ".topMenu",
            т.е. это равно сильно .topMenu a {} */
            
            - a.selected { color: white; background: green; }
            // здесь тоже самое и т.д.
            
            - a:hover { color: white; background: green; }
            - span { width: 12px; height: 52px; background: gray; }

Анимация

Пример 1. При первом нажатии плавное изменение высоты блока до 200px в течении 2000 милисекунд. При втором - изменение высоты блока до 500px в течении 1000 милисекунд (зн-е по-умолчанию)


  div:toggle { animation: "height:200" "during:2000" }
  div:toggle { animation: "height:500" }

Пример 2. Плавное исчезание блока в течении 2000 милисекунд после загрузки страницы


  div { animation: fadeOut 2000 }

Пример 3. Плавное появление блока в течении 2500 милисекунд после загрузки страницы


  div { display: none; animation: fadeIn 2500 }

Углы

Пример 1. У блока с классом "corner" будут закругленные углы с диаметром в 10px.


  div.corner { corner: 10px; }

Пример 2. У блока с классом "corner" будут закругленные углы с диаметром в 10px только с левой стороны.


  div.corner { corner: tl bl 10px; }

Пример 3. У блока с классом "corner" будут закругленные углы с диаметром в 10px, но у нижнего-левого угла будет немного другой вид.


  div.corner { corner: br top 10; corner: bevel bl 20px; }

Более подробно о свойстве можно узнать на странице плагина corners: http://malsup.com/jquery/corner/, т.к. это свойство реализованое на базе этого плагина.

Исправляем баги Internet Explorer .. ох, как он всем надоел
Пример 1. Кроссбраурзерный opacity (прозрачность), который будет работать в IE.


  div.corner { opacity: 0.5; }

Пример 2. Position = fixed работает и в IE 6


  div.corner { position: fixed; top: 10px; left: 20px; }

Пример 3. Все свойства max & min - width & height работают и в IE 6


  div.corner { min-height: 200px;
               min-width: 300px;
               max-height: 400px;
               max-width: 500px; }

Также реализована поддержка полупрозрачности PNG в IE6.

Константы очень удобная вещь, которой не хватает многим разработчикам.
Пример 1. Объявляем новую константу, которая = серому цвету - #E9E9E9


  !c_gray: #E9E9E9;

Пример 2. Применение константы для цвета заднего фона блока, константа = #E9E9E9


  div.gray { background-color: !c_gray; }

Пример 3. Константы как список свойств...


  !my_props: "position: absolute; top: 10px; left: 30px;";
  
  div.props { !my_props;
              color: gray; }

Система событий реализация событий в icss похожа на псевдо стили в css, а сами они реализованы с помощью JavaScript.
Пример 1. Событие click - нажатие курсором на блок, при нажатии блок становится черным


  div { background: white; }
  div:click { background: black; }

Пример 2. На событие можно назначить какую нибудь анимацию например. Наш блок плавно исчезнет в течении 500 милисекунд при нажатии.


  div { background: black; }
  div:click { animation: fadeOut 500; }

Пример 3. Toggle - событие "переключатель", это особое событие. При первом нажатии у нас будет черный блок, при втором - красный, при третьем - белый, а дальше снова по кругу.


  div:toggle { background: black; }
  div:toggle { background: red; }
  div:toggle { background: white; }

Пример 4. Hoverex - событие javascript, аналог css hover. Метод работы похож на toggle. При наведении у нас будет черный блок, а обратно - красный.


  div:hoverex { background: black; }
  div:hoverex { background: red; }

Пример 5. Также можно отлавливать события мышки. При нажатии клавиши мышки блок станет красным, при отжатии - черным.


  div:mousedown { background: red; }
  div:mouseup { background: black; }

Пример 6. В предыдущих примерах при событии стили применялись к селектору события, но можно применять и к другим селекторам с помощью слова from. При нажатии на ссылку наш блок исчезнет, при следующем нажатии - появится.


  a from div:toggle { display: hide; }
  a from div:toggle { display: show; }

Абстрактные классы эти классы используются в качестве хранения списка css свойств, лучше смотрите примеры
Пример 1. Абстрактный класс объявляется с помощью ключевого слова abstract. Здесь мы объявили класс - my_class.


  abstract.my_class { color: white;
                      font-style: italic;
                      width: 500px; }

Пример 2. Чтобы применить абстрактный класс на селекторе необходимо использовать iCss свойство - style. Здесь у нас блоки приобретут все свойства абстрактного класса my_class.


  abstract.my_class { color: white;
                      font-style: italic;
                      width: 500px; }
                      
  div { style: my_class; }
  div.ex { style: my_class; color: red; }

Пример 3. Абстрактные классы сами могу наследовать свойства других абстрактных классов.


  abstract.my_class { color: white;
                      font-style: italic;
                      width: 500px; }
                      
  abstract.my_s { style: my_class; color: red; }

Пример 4. Наследовать свойства можно у нескольких абстрактных классов, т.е это множественное наследование.


  abstract.my_class { color: white;
                      font-style: italic;
                      width: 500px; }      
  abstract.my_s { color: red; height: 200px; }
  
  div {style: my_class; style: my_s; }

Абстрактные классы ничем не ограничены, в них также можно применять константы, несуществующие css свойства (iCss свойства) и т.д. Эти классы видимы во всех css файлах.

Пользовательские свойства это свойства, объявляемые разработчиком и действуют они на том же механизме как и обычные css свойства.
Пример 1. Пользовательские свойства создаются с помощью слова property. Здесь мы объявили новое свойство my-prop. А затем применили его на практике.


  property.my-prop { color: !param1; background: !param2;  }
  
  div { my-prop: red black; }

Пользовательские свойства это мощный механизм, с помощью которого можно с легкостью создавать плагины для iCss без редактирования php скриптов.

В зоне объявления пользовательского свойства доступны некоторые специфичные константы.

!param1, !param2 .. !paramN - параметры, которые передаются в свойство, параметры разделяются пробелом.
!params_str - весь текст, который передается свойству.
!params_arr - создает строку из пареметров, где все параметры перечесляются через запятую.
!params_hash - создает из строки переданной свойству хеш для javascript следующего вида: {!param1:!value!, !param2:!value2, .. !paramN:!value2}.
Причем название параметров и значения разделяются пробелами, а уже название и пробел разделяются двоеточием, это, естественно, при передачи в свойство. Такой же принцип передачи параметров используется в свойстве animation.

Плагины реализуются с помощью JavaScript, CSS файлов и файла, где объявляются все iCss свойства плагина.

Табы Мы предлагаем очень гибкий механизм, с помощью которого можно реализовать табы любого стиля. Кстати, наш раздел "примеры" реализован с помощью этого механизма.

Таб - это список переключателей, где при нажатии на определенный - появляется соответствующей контент.
Пример 1. Для того чтобы создать табы, необоходимо использовать свойство is-tab. Далее на html-странице нужно реализовать соответствующую схему тегов.


  .tabs { is-tab: true; }
  
  в html следующее...
  
  <ul class="tabs">
    <ul class="active"><a href="#tab1">Таб 1</a></ul>
    <ul><a href="#tab2">Таб 2</a></ul>
    ...
    <ul><a href="#tabN">Таб N</a></ul>
  </ul>
  
  <div id="tab1">tab1 text</div>
  <div id="tab2">tab2 text</div>
  ...
  <div id="tabN">tabN text</div>

Чтобы назначить активный таб, необохидом применить класс active. Также, чтобы контейнеры с текстом табов не появлялись все сразу при загрузке страницы, мы рекомендуем их скрыть с помощью css свойства display.

Галерея Теперь галерею можно реализовать с помощью всего одного свойства. Мы взяли самую лучшую галерею из плагинов jQuery - FancyBox. Она обладает очень большими возможностями.
Пример 1. Галерея создается с помощью iCss свойства fancybox. Здесь создаем галерею для контейнера с классом gallery.


  .gallery a { fancybox:
                         "zoomSpeedIn:500"
                         "zoomSpeedOut:500"
                         "zoomOpacity:true";
              }

Вот что у нас получилось:

Галерея не ограничивается лишь картинками, вместо картинок можно указывать html страницы, которые будут загружаться ajax-ом. Более подробно о всех параметрах можно узнать здесь: http://fancy.klade.lv/howto - Available options.