Онлайн всего: 1
Гостей: 1
Пользователей: 0


ДЕМО Скачать исходники



Скрипт который делает заголовки блоков сбоку. Хороший скрипт для тех у кого пространство сайта ограничено и надо все вместить.

Установка:

1. Вставьте этот код перед тегом :
Code
<script src="http://ripbox.do.am/lesson/modernizr.custom.80028.js"></script>
<link rel="stylesheet" href="http://ripbox.do.am/lesson/style.css">


2. Этот код вставьте в ваш CSS:
Code
aside {
  display: block;
  position: relative;  
  margin: 40px 0;
  }
   
  aside h3 {
  font: bold 12px Sans-Serif;
  letter-spacing: 2px;  
  text-transform: uppercase;
  background: #369;
  color: #fff;
  padding: 5px 10px;
  margin: 0 0 10px 0;
  line-height: 24px;
  }
   
  /* Имя класса для Modernizr */
  .csstransforms aside {
  border-left: 34px solid #369;
  padding-left: 10px;
  }
  .csstransforms aside h3 {
   
  /* Абсолютное позиционирование не укорачивает вертикальное пространство */  
  position: absolute;
  top: 0;
  left: 0;
   
  /* Рамка является новым фоном */
  background: none;
   
  /* Вращение от верхнего левого угла (не по умолчанию) */
  -webkit-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  -o-transform-origin: 0 0;
   
  -webkit-transform: rotate(90deg);  
  -moz-transform: rotate(90deg);  
  -ms-transform: rotate(90deg);  
  -o-transform: rotate(90deg);  
  }


3. Следующий код нужно вставить перед тегом :
Code
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  <script>
  $("#fake").click(function() {
  $("html").toggleClass("csstransforms");
  });
  </script>


4. И наконец, этот код нужно вставить перед блоком:
Code
<aside>


а этот после / в конце блока:
Code
</aside>


В общем у вас должно получится вот так:
Code
<aside>
  <h3>НАЗВАНИЕ ВАШЕГО БЛОКА</h3>
  <p>ИНфА БЛОКА</p>
  </aside>


5. Да и чуть не забыл чтобы переключать между горизонтальным и вертикальным блоком вам нужно вставить этот код кнопки переключателя там где вам удобно:
Code
<button id="fake">Переключатель (проверка совместимости)</button>


Фуф на это все. Надеюсь он кому нибудь понадобится. Желаю удачи!




Создать бесплатный сайт с uCoz