Приветствую Вас Прохожий | RSS

Суббота, 18.01.2025, 16:01

Меню сайта

Гостевая сайта

РАЗДЕЛ СТУДИИ УСЛУГИ НАШЕГО САЙТА

Категории раздела

Скрипты блоки и шапки [337]

Скрипты Вид новостей [366]

Скрипты php для ucoz [47]

Скрипты для форума [186]

Скрипты информеры [118]

Скрипты Разное [1105]

Мини-чат

Все вопросы задаем в форуме,
здесь они игнорируются!

Блок спам рекламы

Сайт села Екатерининско* .

Фильмы, сериалы торрент .

НОВИНКИ 2019 В FULLHD 4* .

Лучшее Хип-Хоп радио St* .

ФИЛЬМЫ ОНЛАЙН В HD! .

Облачный майнинг HF18BD* .

Сайт за 6000 wmr .

http://ucozon.ru/forum/* .

Lineagw 2: Revolution .

Фильмы на планшет торре* .

Добавлять могут только пользователи зарегистрированные 15 суток.

Статистика

Онлайн всего: 9

Гостей: 9

Пользователей: 0

Кто нас сегодня посетил
Статистика посетителей
Подписка на новости
День рождения

Главная » Файлы » Скрипты для uCoz » Скрипты Разное

Пример сдвигание блоков

Примеры как не обычно сдвигать блоки на CSS3

Работает в: Firefox 3.5+, Chrome 5+, Safari 5+, Opera 10.6+, IE 9+

Установка: Стиль блока вставляем на странице блока, или в CSS странице в ПУ

Сдвиг на 50 пикселей вправо.

CSS3:

Code

.mycontainer1 {
  background:#eeeeee;
  margin:10px 0;
  padding:10px;
  border:1px solid #666666;
  text-align:justify;
  transition:all 1s ease-in-out;
  -webkit-transition:all 1s ease-in-out;
  -moz-transition:all 1s ease-in-out;
  -o-transition:all 1s ease-in-out;
  }
  .mycontainer1:hover {
  transform:translate(50px,0);
  -webkit-transform:translate(50px,0);
  -moz-transform:translate(50px,0);
  -o-transform:translate(50px,0);
  }

Код блока:

Code

<div class="mycontainer1" align="center">Ваш материал</div>

Сдвиг на 50 пикселей влево.

CSS3:

Code

.mycontainer1 {
  background:#eeeeee;
  margin:10px 0;
  padding:10px;
  border:1px solid #666666;
  text-align:justify;
  transition:all 1s ease-in-out;
  -webkit-transition:all 1s ease-in-out;
  -moz-transition:all 1s ease-in-out;
  -o-transition:all 1s ease-in-out;
  }
  .mycontainer2:hover {
  transform:translate(-50px,0);
  -webkit-transform:translate(-50px,0);
  -moz-transform:translate(-50px,0);
  -o-transform:translate(-50px,0);
  }

Код блока:

Code

<div class="mycontainer1 mycontainer2" align="center">Ваш материал</div>

Сдвиг на 50 пикселей вправо и 25 пикселей вниз.

CSS3:

Code

.mycontainer1 {
  background:#eeeeee;
  margin:10px 0;
  padding:10px;
  border:1px solid #666666;
  text-align:justify;
  transition:all 1s ease-in-out;
  -webkit-transition:all 1s ease-in-out;
  -moz-transition:all 1s ease-in-out;
  -o-transition:all 1s ease-in-out;
  }

  .mycontainer3:hover {
  transform:translate(50px,25px);
  -webkit-transform:translate(50px,25px);
  -moz-transform:translate(50px,25px);
  -o-transform:translate(50px,25px);
  }

Код блока:

Code

<div class="mycontainer1 mycontainer3" align="center">Ваш материал</div>

Сдвиг на 50 пикселей влево и 25 пикселей вверх.

CSS3:

Code

.mycontainer4 {
  background:#eeeeee;
  margin:35px 0 0 0;
  padding:10px;
  border:1px solid #666666;
  text-align:justify;
  transition:all 1s ease-in-out;
  -webkit-transition:all 1s ease-in-out;
  -moz-transition:all 1s ease-in-out;
  -o-transition:all 1s ease-in-out;
  }
  .mycontainer4:hover {
  transform:translate(-50px,-25px);
  -webkit-transform:translate(-50px,-25px);
  -moz-transform:translate(-50px,-25px);
  -o-transform:translate(-50px,-25px);
  }

Код блока:

Code

<div class="mycontainer4" align="center">Ваш материал</div>

Поворачиваем на 45 градусов

CSS3

Code

.mycontainer1 {
  background:#eeeeee;
  margin:10px 0;
  padding:10px;
  border:1px solid #666666;
  text-align:justify;
  transition:all 1s ease-in-out;
  -webkit-transition:all 1s ease-in-out;
  -moz-transition:all 1s ease-in-out;
  -o-transition:all 1s ease-in-out;
  }
  .mycontainer5:hover {
  transform:rotate(45deg);
  -webkit-transform:rotate(45deg);
  -moz-transform:rotate(45deg);
  -o-transform:rotate(45deg);
  }

Код блока:

Code

<div class="mycontainer1 mycontainer5" align="center">Ваш материал</div>

Увеличиваем в 2 раза.

CSS3:

Code

.mycontainer1 {
  background:#eeeeee;
  margin:10px 0;
  padding:10px;
  border:1px solid #666666;
  text-align:justify;
  transition:all 1s ease-in-out;
  -webkit-transition:all 1s ease-in-out;
  -moz-transition:all 1s ease-in-out;
  -o-transition:all 1s ease-in-out;
  }
  }
  .mycontainer6:hover {
  transform:scale(2);
  -webkit-transform:scale(2);
  -moz-transform:scale(2);
  -o-transform:scale(2);
  }

Код блока:

Code

<div class="mycontainer1 mycontainer6" align="center">Ваш материал</div>

Автор\Источник: CSS примеры
Для того что бы скачать архив необходимо зайти на сайт как пользователь.

Похожие новости на нашем сайте

Коментарий к новости

Всего комментариев: 8

Порядок вывода комментариев:

8 Vovan4ik13 Дата: 03.09.2011 Время: 22:35 [№ 10235] [Материал]

В Опере и в Мозиле не работает. Перевёл в UTF-8 и всё заработало. Спасибо Автору классный Ефект

2 STAFF Дата: 03.09.2011 Время: 11:35 [№ 10226] [Материал]

Значит у вас браузер глючит, так как у меня работает.

3 Dez Дата: 03.09.2011 Время: 11:53 № 1 [№ 10227] [Материал]

charset=windows-1251 так у меня в опере ни фига не работает только если charset=UTF-8

4 STAFF Дата: 03.09.2011 Время: 12:00 № 2 [№ 10228] [Материал]

еще рас говорю, эту html страницу с примером, я проверил лино на всех браузерах, а именно, на фирефокс, опера, ИЕ, и на гугл кром.

5 GaV Дата: 03.09.2011 Время: 13:00 № 3 [№ 10229] [Материал]

Классные эффекты, но у меня работают только в хроме (я про демо сайт), во всех остальных, квадратики или иероглифы, браузеры все обновленны до последних версий