Спешу поделиться готовым кодом, с помощью которого вы сможете сделать зеркальное отражение текста, заголовка или меню.
Теперь не нужно на сайте использовать изображение, чтобы придать тексту зеркальное отражение, так как CSS обо всем позаботился.
Немножко о коде. Давайте рассмотрим HTML код:
<div class="h1-css" title="Пример CSS отражения на BlogGood.ru">Пример CSS отражения на BlogGood.ru</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>
Обратите внимание на title в коде:
title="Пример CSS отражения"
title="Главная"
title="О компании"
title="Портфолио"
title="Наши контакты"
Текст в title отвечает за вывод зеркального отражения. Так что текст в title должен быть идентичным названию заголовка, текста или ссылки.
На счет кода, вот готовый код:
<html>
<head>
<title>Пример CSS отражения - bloggood.ru</title>
<style ENGINE="text/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;
}
</style>
<!--[if lte IE 9]>
<style>
.h1-after,
.menu-after {
position:absolute;
left:0;
top:100%;
z-index: 1;
background: #fff;
-ms-filter: "flipV progid:DXImageTransform.Microsoft.Alpha(opacity=50, style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy=70)";
filter: flipV progid:DXImageTransform.Microsoft.Alpha(opacity=50, style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy=70);
}
.h1-css:after,
.menu-css a:after {
display: none;
}
</style>
<script>
textReflect = function()
{
// отражение для заголовка
var el = document.getElementsByTagName("h1")[0];
el.insertAdjacentHTML("afterBegin", "<span class='h1-after'>"+el.firstChild.nodeValue+"</span>");
// отражения для меню
var menu = document.getElementsByTagName("a"),
i,
lenMenu = menu.length;
for(i=0;i<lenMenu;i++) menu[i].insertAdjacentHTML("afterBegin", "<span class='menu-after'>"+menu[i].firstChild.nodeValue+"</span>");
}
window.onload=textReflect;
</script>
<![endif]-->
</head>
<body>
<div class="main">
<div class="h1-css" title="Пример CSS отражения на BlogGood.ru">Пример CSS отражения на BlogGood.ru</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>
</body>
</html>
Вот таким будет результат:
Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓
Последние новости категории:
Как растянуть блок на всю высоту экрана с помощью CSS
Анимация (покачивание-swing) текста или изображения при наведении мыши
CSS стили для горизонтальных линий «HR»
Как сделать простой эффект Lightbox на CSS3Похожие статьи
Программа Notepad++
Эффект падающего снега
Звук при наведении курсора мышки на ссылку
Популярные статьи:
-
Как узнать id компьютера
Дата: 29 марта 2013
Прокомментировано:90
просмотров: 330325 -
Размеры форматов листов А0 – А7
Дата: 23 января 2013
Прокомментировано:3
просмотров: 274682 -
Смешные логические загадки с подвохом, отгадки прилагаются
Дата: 12 ноября 2014
Прокомментировано:5
просмотров: 222435 -
Готовые макеты блоков для веб-страниц на HTML и CSS
Дата: 25 июня 2014
Прокомментировано:23
просмотров: 187485 -
Установка windows 7 на ноутбук
Дата: 18 декабря 2012
Прокомментировано:169
просмотров: 186558
2 Ответов на комментарий - Зеркальный эффект отражения текста в CSS
Добавить комментарий
Метки: css, для сайта, эффекты для сайта
Степан, сегодня познакомился с вашим блогом. Нашел для себя много чего интересного. Буду присматривать за вашими публикациями
Хочу задать вам один вопрос, потому что никак не могу найти ответ на него.
Как выделить шрифтом
ервую букву в тексте? Видели, наверное, так часто в книгах выделяют…
Важно сделать так, чтобы не в каждом тексте вручную править, а прописать в коде, чтобы автоматически в статьях выводился стиль для заглавной буквы. Такое вообще возможно?
Спасибо.
Здравствуйте, Семен! Можно сделать вот так:
p{ color: black; font-size: 17pt; } p:first-letter{ color: red; font-size: 23pt; }Этот код ставьте в CSS.
В HTML примерно так: