Как сделать эффект угасания текста

Как сделать эффект угасания текстаСегодня мы расскажем как легко сделать эффект угасания текста. К сожалению, этот эффект не работает в IE, даже включая 8 версию браузера, а в Opera эффект работает слегка некорректно, но зато во всех остальных браузерах он работает как часы.

И так, всё что нам нужно будет сделать это внести пару строк кода в два файла. Первый файл это ваш html файл, в котором описана ваша страница.

А второй файл, как вы уже успели догадаться это файл стилей, в котором мы при помощи нескольких строк опишем этот эффект.

Преимущества этого эффекта заключаются в том, что

1. Эффект не зависит от размера блока, в который помещён текст

2. Текст никогда не выпадет из потока и вы можете добавлять любой по размеру контент

3. Текст может быть полностью выделен

4. Эффект угасания действуют в любую сторону, влево, вправо, а также вниз и верх.

И так, приступим к коду.

<div class="shadow">
        <div class="text">
            ----------------------------
        </div>
    </div>

А код для файла стилей так.

.shadow{
width:400px;
margin:20px auto;
cursor:text;
box-shadow:inset 0px -190px 190px -50px #add7f8;
}
 
.text{
color:#000;
position:relative;
z-index:-1;
background:#f9fca3;
}

Урок написан Софтлинк
Наш html код выглядит слудеющим образом



Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *