наверх





Текст появился, убрали курсор - текст исчез. Оригинальный эффект, который легко создается.


В этом примере я покажу, как сделать эффект исчезания и появления текста. Делаться это будет без JS и т.д., на чистом CSS3 и HTML.

Эффект будет заключаться в следующем. В документе будут два небольших текста. Один будет цвета фона, а второй будет какого-либо другого цвета. При наведении на второй текст, он исчезнет, примет цвет фона, а первый текст появится, приняв другой цвет. Эффект простой и красивый. Перейдем к созданию:

HTML


<div class="NewText">А это новый текст
<p>
Это текст
</p>
</div>


CSS



Сначала поработаем с тегом <p>, заставив его исчезать и появляться.

p {
color:#969799; /* Цвет */
font:16pt Verdana; /* Размер, семейство шрифта */
}


Добавим свойство transition, что бы выглядело все плавно:

p {
...

-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
}


Перейдем к псевдоклассу :hover:

p:hover {
color:transparent;    /* Делает текст бесцветным */
}


При наведении текст становится бесцветным. То есть он исчезает.

Теперь перейдем к созданию появления нового текста:

.NewText {
position:absolute;    /* Задаем абсолютное позиционирование */
font:16pt Verdana;    /* Размер, семейство шрифта */
-webkit-transition:All 1s ease;    /* Размер, семейство шрифта */
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
color:transparent;    /* Делает текст безцветным */
}


То есть данный текст в обычном состоянии имеет бесцветный текст. Так же, можно добавить и свойства transition, что я сделал.
Теперь нужно создать появление нового текста через псевдокласс :hover:

.NewText:hover {
line-height:3;    /* Заставляем текст перенестись на 1 строку ниже */
color:#7F7F7F;    /* Цвет */
}


Свойство line-height отвечает за перенос строки. Его можно убрать, я же добавил, что бы новый текст занял прежнее место старого. Выглядит красивее.




Просмотр демо-варианта


Поделиться
Text-shadow генератор
Занимаетесь веб-разработкой? Полноценный кроссбраузерный text-shadow генератор с поддержкой нескольких теней.


Комментарии — 0


У вас нет прав для добавления комментария. Зарегистрируйтесь или авторизуйтесь.