Отражение любого текста на CSS3
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
.ref { color: #000066; font-size: 24px; margin-bottom: 30px; position: relative; display: inline-block; } .ref:after { content: attr(data); 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; } .ref: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; } |
1 |
<div data="IMAPO.RU - Только уникальные скрипты" class="ref">IMAPO.RU - Только уникальные скрипты</div> |