BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

Главная » Рецепты CSS » Зеркальный эффект отражения текста в CSS

Зеркальный эффект отражения текста в CSS

2015-06-08 / Вр:01:10 / просмотров: 6654

Спешу поделиться готовым кодом, с помощью которого вы сможете сделать зеркальное отражение текста, заголовка или меню.
Теперь не нужно на сайте использовать изображение, чтобы придать тексту зеркальное отражение, так как 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 type="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

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

2 Ответов на комментарий - Зеркальный эффект отражения текста в CSS

  1. Семен

    Степан, сегодня познакомился с вашим блогом. Нашел для себя много чего интересного. Буду присматривать за вашими публикациями :gazeta:
    Хочу задать вам один вопрос, потому что никак не могу найти ответ на него.
    Как выделить шрифтом

    [strong]П[/strong]

    ервую букву в тексте? Видели, наверное, так часто в книгах выделяют…
    Важно сделать так, чтобы не в каждом тексте вручную править, а прописать в коде, чтобы автоматически в статьях выводился стиль для заглавной буквы. Такое вообще возможно?
    Спасибо.

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Здравствуйте, Семен! Можно сделать вот так:

    p{ color: black; font-size: 17pt; }
    p:first-letter{ color: red; font-size: 23pt; }
    

    Этот код ставьте в CSS.

    В HTML примерно так:

    <p>Куда ни глянь, до самого горизонта, повсюду, простерлась широкая степь.</p>

    Ответить

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Метки: , ,

Мои цели на 2018-2019:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Создать портфолио и мини интернет-магазин шаблонов

4). Довести количество статей до 800

5). Добиться посещаемости 3000 человек/сутки

6). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 795
Количество страниц на блоге: 20
Количество рубрик на блоге: 28
Количество меток на блоге: 72
Количество комментариев на блоге: 4419