Войти на сайт Регистрация
Добавить файлВ каталоге: 678
Эффект отражения CSS для uCoz
21.11.2018
Эффект отражения CSS для uCoz
  • 464 Просмотров:
  • 0 Скачиваний:
  • 0 Комментариев:
  • 0.0 Рейтинг:
  • (Голосов: 0)
Описание:
Давно хотел найти подобный эффект для картинок, но вот наткнулся на эффект отражения текста, которое выполняется с помощью css.

Установка:

1. В css стили ставим этот код:

Код
.main {  
  width: 900px;  
  margin: 0 auto;  
  padding-top: 30px;  
}  
/* отражаем текст */  
.h1-css {  
  color: #000066;  
  font-size: 24px;  
  margin-bottom: 30px;  
  position: relative;  
  line-height: 24px;  
}  
.h1-css:after,  
.menu-css a:after {  
  content: attr(title);  
  position:absolute;  
  left:0;  
  top:100%;  
  width:100%;  
  height:100%;  
  -moz-transform: scaleY(-1);  
  -o-transform: scaleY(-1);  
  -webkit-transform: scaleY(-1);  
  -ms-transform: scaleY(-1);  
  transform: scaleY(-1);  
  z-index: 1;  
}  
.h1-css:before,  
.menu-css:before {  
  content: "";  
  display: block;  
  width: 100%;  
  height: 80%;  
  background:-moz-linear-gradient(top, rgba(255,255,255,0.7), rgba(255,255,255,1));  
  background: -o-linear-gradient(top, rgba(255,255,255,0.7), rgba(255,255,255,1));  
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.7)), to(rgba(255,255,255,1)));  
  position: absolute;  
  left: 0;  
  top: 110%;  
  z-index: 2;  
}  
ul {  
  list-style: none;  
  margin-bottom: 30px;  
}  
li {  
  display: inline;  
  margin-right: 30px;  
  color: #000099;  
}  
li a {  
  text-decoration: none;  
  font-size: 14px;  
  color: #000099;  
  display: inline-block;  
  position: relative;  
}  
li a:hover {  
  color: #FF0000;  
}  
.menu-css {  
  position: relative;  
}


А это ставте в то место где хотите видеть эффект отражения, предварительно изменив текст на свой

Код
<div class="main"><div class="h1-css" title="Пример отражения текста с помошью CSS">Пример отражения текста с помошью CSS</div><ul class="menu-css"><li><a href="#" title="Главная">Главная</a></li><li><a href="#" title="Форум">Форум</a></li><li><a href="#" title="Профиль">Профиль</a></li><li><a href="#" title="Контакты">Контакты</a></li></ul></div>


На этом всё. Тестируйте!
Эффект отражения CSS для uCoz" title="Скачать Эффект отражения CSS для uCoz бесплатно, без смс и регистрации" target="_blank">Сервер Скачать файл
Источник: Неизвестно
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]