Пример отражения текста с помошью CSS
- ЛентаЧетверг 14.05.2026 03:28
in.uCoz.org - создан в помощь uCмастеру и служит для решения проблем возникших у пользователей администрирующих сайты системы uCoz. Все вопросы пишите на форуме в соответствующий раздел
Наш опросСлучайный анекдот84 Для съемок одного фильма в Нью-Йорке понадобился разбитый автобус. Нашли один подходящий, с хорошей вмятиной от фонарного столба. Правда, на другом конце города. Снарядили мужика доставить сие транспортное средство на съемочную площадку. Благо, автобус на ходу, мужик сел, завел, поехал. По дороге решил перекусить, остановился у Макдональса, и ради шутки решил припарковаться таким образом, что бы вмятина пришлась как раз на фонарный столб. Зашел внутрь, перекусил. Выходит - а в салоне автобуса сидят с десяток евреев с порезами и царапинами на фейсах и названивают по сотовым своим адвокатам.СтатистикаОнлайн всего: 1Гостей: 1Пользователей: 0
» Сегодня нас посетили:» Зарег. на сайте
Всего: 3502
Новых за месяц: 2
Новых за неделю: 2
Новых вчера: 0
Новых сегодня: 0
» Из них
Администраторов: 1
Модераторов: 3
С активностью: 177
Авторизованных: 3321Отражение текста с помошью CSS
Давно хотел найти подобный эффект для картинок, но вот наткнулся на эффект отражения текста, которое выполняется с помощью css.
Установка:
В 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>
Html редактор
Вставте код в поле и нажмите проверить.
Не забывайте указывать путь к файлам и картинкам в скриптах!!!Просмотров: 1109016.05.2013
Другие статьи почитайка;)
Поделись ссылкой на форумах
Ссылка: BB-code: HTML:
« Пред. Отражение текста с помошью CSS След. »
Форма входаМини-чатТоп пользователейProsvetekvator 190 startsmart 72 DoG 24 Reactor 10 HACKER 6 Алена 2 na3uTuB4uk 1 Diz24 1 creat1vex 1 haCker8055 1 Новое на форуме
Комментарии11.06.2022
02.04.2020
Может это по тому, что редактировали скрипт? 