Плавное угасание текста на CSS3 by Apocalypse
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
.apo-block a { display: block; max-width: 300px; white-space: nowrap; overflow: hidden; vertical-align: bottom; } .apo-block a:after { content: ''; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,1+100 */ background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */ float: right; width: 50px; height: 30px; margin-top: -30px; position: relative; } |
|
1 2 3 4 |
<div class="apo-block"> <a href="#">Здесь любой текст, который будет плавно обрезан с использованием градиента 1</a> <a href="#">Здесь любой текст, который будет плавно обрезан с использованием градиента 2</a> </div> |
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
Очень хорошо, спасибо
Пожалуйста 🙂
Классный материал 🙂