Пример отражения текста с помошью CSS
- ЛентаВоскресенье 12.05.2024 16:08
in.uCoz.org - создан в помощь uCмастеру и служит для решения проблем возникших у пользователей администрирующих сайты системы uCoz. Все вопросы пишите на форуме в соответствующий раздел
ПопулярноеНаш опросСлучайный анекдот7 Стали волки часто на стадо овец нападать. Пошёл мужик на базар покупать подходящую собаку. Все с овчарками стоят, а один мужичек мелкую шавку расхваливает. - Да ну, её ж любой волк пополам перекусит! - Ты что, мужик, это ж собака-Боробака! Гроза всех волков, бери, не пожалеешь. Купил её мужик, поставил стадо охранять. И вот ночью бежит стая волков. Все большие серьезные такие волки. Смотрят, на лугу стадо коров пасется. Обрадовались волки, со всех ног бросились они к коровам. - Вон та моя!!! - кричит один волк. - А вон та моя!!! И тут смотрят большие серьезные такие волки маленькая собачонка стадо охраняет: - Тяф, тяф! Испугались волки и бросились наутёк. Подбегает самый молодой и горячий волк к вожаку и говорит: - Да ты что, вождь?? Что мы такой маленькой собачонки испугались?? Да максимум на что она способна так это поцеловать меня в задницу!!! - Оо-о-о-о... А ты знаешь, какие у нее холодные губы?СтатистикаОнлайн всего: 1Гостей: 1Пользователей: 0
» Сегодня нас посетили: camila89» Зарег. на сайте
Всего: 3474
Новых за месяц: 1
Новых за неделю: 1
Новых вчера: 0
Новых сегодня: 1
» Из них
Администраторов: 1
Модераторов: 3
С активностью: 176
Авторизованных: 3294Отражение текста с помошью 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 редактор
Вставте код в поле и нажмите проверить.
Не забывайте указывать путь к файлам и картинкам в скриптах!!!Просмотров: 980116.05.2013
Другие статьи почитайка;)
Поделись ссылкой на форумах
Ссылка: BB-code: HTML:
« Пред. Отражение текста с помошью CSS След. »
Форма входаМини-чатТоп пользователейProsvetekvator 190 startsmart 72 DoG 24 vasilievaleksei 12 Reactor 10 HACKER 6 sarstar 3 Алена 2 Diz24 2 na3uTuB4uk 1 Новое на форуме
Комментарии11.06.2022
02.04.2020
Может это по тому, что редактировали скрипт? 