• Страница 1 из 1
  • 1
Форум » Веб-дизайн » Элементы дизайна сайта » Зеркальный эффект CSS отражения текста (Создание красивого отражение текста при помощи CSS)
Зеркальный эффект CSS отражения текста
Kosten
Дата: Вторник, 2019-12-03, 00:06 | Сообщение 1
Оффлайн
Администраторы
Сообщений:25282
Награды: 58


В этой статье представлен простой способ, это как создать простой эффект по отражению текста. Что смотрится просто оригинально. Это отлично можно реализовать на светлом формате, что темный не исключаю. Ведь все создано на чистом CSS, где вы уже самостоятельно выставляете то отражение знаков, которое посчитаете нужным.



HTML

Код
<div class="kesaitada-kyetsuva" title="Пример CSS отражения на ZORNET.RU">Пример CSS отражения на ZORNET.RU</div>

CSS

Код
/* отражаем текст */
.kesaitada-kyetsuva {
    color: #000066;
    font-size: 24px;
    margin-bottom: 30px;
    position: relative;
    line-height: 24px;
}
.kesaitada-kyetsuva: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;
}
.kesaitada-kyetsuva: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;
}

Демонстрация
Прикрепления: 6616750.png(11.8 Kb) · mugdsa.zip(2.8 Kb)
Страна: (RU)
Форум » Веб-дизайн » Элементы дизайна сайта » Зеркальный эффект CSS отражения текста (Создание красивого отражение текста при помощи CSS)
  • Страница 1 из 1
  • 1
Поиск: