Пример отражения текста с помошью CSS
- ЛентаПятница 29.11.2024 08:29
in.uCoz.org - создан в помощь uCмастеру и служит для решения проблем возникших у пользователей администрирующих сайты системы uCoz. Все вопросы пишите на форуме в соответствующий раздел
ПопулярноеНаш опросСлучайный анекдот6 Сидит наркоман в чистом поле, накуренный в хлам. Хорошо ему... Вдруг слышит где-то вдали сирены. И тут его на испуг-то и пробило. Вскакивает и в ужасе кричит сам себе: - Что делать? Вдруг видит, неподалёку стадо кенгуру скачет. Ну, думает, ща пристроюсь к стаду, авось фараоны не заметят. Скидывает он резко одежду и прискакивает к остальным кенгуру... И вот, скачут они по полю, а сирены полицейских все ближе и ближе... И тут кенгуру, который скачет рядом и говорит нарку: Слышь, чувак, носки сними, а то всё стадо запалишь!!!СтатистикаОнлайн всего: 1Гостей: 1Пользователей: 0
» Сегодня нас посетили:» Зарег. на сайте
Всего: 3477
Новых за месяц: 2
Новых за неделю: 0
Новых вчера: 0
Новых сегодня: 0
» Из них
Администраторов: 1
Модераторов: 3
С активностью: 176
Авторизованных: 3297Отражение текста с помошью 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 редактор
Вставте код в поле и нажмите проверить.
Не забывайте указывать путь к файлам и картинкам в скриптах!!!Просмотров: 1010016.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
Может это по тому, что редактировали скрипт? 