В этой статье представлен простой способ, это как создать простой эффект по отражению текста. Что смотрится просто оригинально. Это отлично можно реализовать на светлом формате, что темный не исключаю. Ведь все создано на чистом 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;
}
Демонстрация
