Пример отражения текста с помошью CSS
- ЛентаЧетверг 21.11.2024 23:52
in.uCoz.org - создан в помощь uCмастеру и служит для решения проблем возникших у пользователей администрирующих сайты системы uCoz. Все вопросы пишите на форуме в соответствующий раздел
ПопулярноеНаш опросСлучайный анекдот107 У Путина по пути сломалась машина возле психушки, пока машину ремонтировали он вышел подышать свежим воздухом. И тут ему псих с окна кулак показывает. Ну и Путин ему кулак. Псих ему два кулака. Путин покрутил пальцем у виска, мол, дурак и уехал. Рассказывает Медведеву, вот такой дурак был, он мне кулак ну и я ему, он мне два, я у виска покрутил, мол, дурак. А псих у себя там рассказывает: Путина видел. Показываю ему, держи крепче Россию. Он показывает, держу. Я ему двумя руками держи, а он мне показывает "мозгов не хватает".СтатистикаОнлайн всего: 4Гостей: 4Пользователей: 0
» Сегодня нас посетили:» Зарег. на сайте
Всего: 3476
Новых за месяц: 1
Новых за неделю: 0
Новых вчера: 0
Новых сегодня: 0
» Из них
Администраторов: 1
Модераторов: 3
С активностью: 176
Авторизованных: 3296Отражение текста с помошью 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 редактор
Вставте код в поле и нажмите проверить.
Не забывайте указывать путь к файлам и картинкам в скриптах!!!Просмотров: 1009316.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
Может это по тому, что редактировали скрипт? 