Ваш IP: 18.225.255.196
Изменить стиль
Главная » Файлы » 5. CSS эффекты » Crooked Photo

Crooked Photo


Этот эффект очень прост, но он отлично подойдёт для галереи миниатюр. Для начала вам нужно создать сетку с изображениями, а затем вращать изображения при наведении курсора мыши на них, что создает привлекательный эффект.

Здесь нужно использовать много новых значений CSS, поэтому стоит рассматривать также вариант отката для более ранних версий браузеров. В нашей галерее будут использованы переходы, трансформации, а также тени блоков, правда, по вашему желанию. Трансформация будет отвечать за вращение изображения, а переходы будут отвечать за мягкий и плавный эффект.

Здесь вы можете применять псевдо-селекторы.

CSS-код для Crooked Photo
Код
#ex4 {  
  width: 800px;  
  margin: 0 auto;  
  }  

  #ex4 img {  
  margin: 20px;  
  border: 5px solid #eee;  
  -webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);  
  -moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);  
  box-shadow: 4px 4px 4px rgba(0,0,0,0.2);  
  -webkit-transition: all 0.5s ease-out;  
  -moz-transition: all 0.5s ease;  
  -o-transition: all 0.5s ease;  
  }  

  #ex4 img:hover {  
  -webkit-transform: rotate(-7deg);  
  -moz-transform: rotate(-7deg);  
  -o-transform: rotate(-7deg);  
  }



  Мне Нравится 0


Всего комментариев: 0
Информация:
Посетители, находящиеся в группе Гости, не могут оставлять комментарии.








Счётчик материалов

     60 - Комментариев
     142 - Тем форума
     2694 - Постов форума
     31 - Фотографий
     11 - Новостей
     301 - Скачиваний
     5 - Видео

Новые пользователи

Популярные теги

Статистика сайта

Кто сегодня был?
Хостинг от uCoz
счетчик хитов сайта
Хиты сайта