Приветствую Вас Прохожий | RSS Пятница, 09.12.2016, 04:53
Меню сайта
ВИДЕО УРОКИ СКРИПТЫ UCOZ ШАБЛОНЫ UCOZ ФОТОШОП UCOZ КАТАЛОГ СТАТЕЙ ВЕБМАСТЕРУ UCOZ ВИДЕО ФОТОШОПА ДОПОЛНЕНИЕ САЙТА РАЗДЕЛ СТУДИИ УСЛУГИ НАШЕГО САЙТА


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



Статистика
Онлайн всего: 11
Гостей: 9
Пользователей: 2
alexman91, LESIYI



Главная » Файлы » Скрипты для 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 примеры

Для того что бы скачать архив необходимо зайти на сайт как пользователь.
Просмотров: 1998 | Комментарии: 8 | Рейтинг: 4.2/6 | |Категория: Скрипты Разное | Добавил: STAFF | Дата: 03.09.2011 | Скачали: 0 | Теги: блоков, ПРИМЕР, сдвигание
Похожие новости на нашем сайте
Коментарий к новости

Всего комментариев: 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]
Классные эффекты, но у меня работают только в хроме (я про демо сайт), во всех остальных, квадратики или иероглифы, браузеры все обновленны до последних версий

6 STAFF   Дата: 03.09.2011  Время: 13:03   4 [№ 10230]
Не чего не понимаю, у меня во всех браузерах работает

7 Dez   Дата: 03.09.2011  Время: 14:46   5 [№ 10231]
перекодируйте в UTF-8, то же только в хроме работает, у вас браузеры поди не русские.

1 Dez   Дата: 03.09.2011  Время: 11:15   [№ 10225]
пример не работает одни квадратики и звездочки короче казябры


Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Форма входа
Логин:
Пароль:


Поиск


На форуме

1 Файловик. Уникальные те...

0

2 Куплю сайты в индексе Я...

1

3 Куплю сайты с ТИЦ/PR (п...

9

4 Предлагаю услуги для ан...

0

5 Предлагаю услуги по про...

0

6 Комплексный прогон сайт...

51

7 Сайт онлайн фильмов на ...

1

8 Проблема с таблицей

9

9 Отредактировать фото

2

10 Уже все перепробовал )

1


Подробней о форуме


Комментарии



Copyright UcozOn.ru™ © 2008-2016


Кнопка 88х31 сайта ucozon.ru