Пример CSS отражения

• Главная
• О компании
• Каталог
• Наши контакты

Исходный код этого примера:

<style type="text/css">
h1.h1-css {
    font-size: 28px;
    margin-bottom: 30px;
    position: relative;
    line-height: 28px;
}
.h1-css:after,
.menu-css a:after {
	content: attr(title);
	position:absolute;
	left:0;
	top:100%;
	width:100%;
	height:100%;
	transform: scaleY(-1);
	z-index: 1;
}
.h1-css:before,
.menu-css:before {
	content: "";
	display: block;
	width: 100%;
	height: 80%;
	background: linear-gradient(to bottom, rgba(255,255,255,0.7), rgba(255,255,255,1));
	position: absolute;
	left: 0;
	top: 110%;
	z-index: 2;
}
ul.menu-css {
    line-height: 14px;
	list-style: none;
	margin-bottom: 30px;
    position: relative;
}
ul.menu-css li {
	display: inline;
	margin-right: 30px;
	color: #009;
}
ul.menu-css li a {
	text-decoration: none;
    font-size: 14px;
	color: #009;
	display: inline-block;
	position: relative;
}
ul.menu-css li a:hover {
	color: #f00;
}
</style>
<h1 class="h1-css" title="Пример CSS отражения">Пример CSS отражения</h1>
<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>