Домой / Рецепты CSS / Hover-эффекты превращений для текста с помощью CSS
Hover-эффекты превращений для текста с помощью CSS

Hover-эффекты превращений для текста с помощью CSS

Примеры создания hover-эффектов для текста. Все превращения созданы с помощью CSS свойств text-shadow или box-shadow.

 

Демо

HTML

<h2 id="zoom-fade">Постепенное исчезновение</h2>
<h2 id="glow">Свечение</h2>
<h2 id="slide-up">Скольжение вверх</h2>
<h2 id="slide-right">Скольжение вправо</h2>
<h2 id="diag-topLeft">Диагонально сверху-влево</h2>
<h2 id="flood-right">Заливание вправо</h2>

CSS

* {
 font-family: helvetica neue, helvetica, arial, sans-serif;
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 -o-user-select: none;
 user-select: none;
}

h1, h2, p {
 text-align: center;
 display: block;
 width: 500px;
 margin: 50px auto;
}
@media all and (max-width: 500px) {
 h1, h2, p {
 width: 100%;
 }
}

h1 {
 font-weight: 200;
}

h2 {
 cursor: pointer;
 font-weight: 900;
}

p {
 font-weight: 200;
}

#zoom-fade {
 -webkit-transition: 0.5s ease-in-out;
 -moz-transition: 0.5s ease-in-out;
 -ms-transition: 0.5s ease-in-out;
 -o-transition: 0.5s ease-in-out;
 transition: 0.5s ease-in-out;
 -webkit-text-shadow: 0 0 50px transparent;
 -moz-text-shadow: 0 0 50px transparent;
 -ms-text-shadow: 0 0 50px transparent;
 -o-text-shadow: 0 0 50px transparent;
 text-shadow: 0 0 50px transparent;
 color: rgba(0, 0, 0, 0.1);
 overflow: visible;
}
#zoom-fade:hover {
 -webkit-text-shadow: 0 0 0px black;
 -moz-text-shadow: 0 0 0px black;
 -ms-text-shadow: 0 0 0px black;
 -o-text-shadow: 0 0 0px black;
 text-shadow: 0 0 0px black;
}

#glow {
 -webkit-transition: 0.5s ease-in-out;
 -moz-transition: 0.5s ease-in-out;
 -ms-transition: 0.5s ease-in-out;
 -o-transition: 0.5s ease-in-out;
 transition: 0.5s ease-in-out;
 -webkit-text-shadow: 0 0 0 transparent, 0 0 0 transparent;
 -moz-text-shadow: 0 0 0 transparent, 0 0 0 transparent;
 -ms-text-shadow: 0 0 0 transparent, 0 0 0 transparent;
 -o-text-shadow: 0 0 0 transparent, 0 0 0 transparent;
 text-shadow: 0 0 0 transparent, 0 0 0 transparent;
 color: rgba(0, 0, 0, 0.1);
 overflow: visible;
}
#glow:hover {
 color: white;
 -webkit-text-shadow: 0 0 10px #ff401a, 0 0 50px #ff9b1a;
 -moz-text-shadow: 0 0 10px #ff401a, 0 0 50px #ff9b1a;
 -ms-text-shadow: 0 0 10px #ff401a, 0 0 50px #ff9b1a;
 -o-text-shadow: 0 0 10px #ff401a, 0 0 50px #ff9b1a;
 text-shadow: 0 0 10px #ff401a, 0 0 50px #ff9b1a;
}

#slide-up {
 -webkit-transition: 0.25s ease-in-out;
 -moz-transition: 0.25s ease-in-out;
 -ms-transition: 0.25s ease-in-out;
 -o-transition: 0.25s ease-in-out;
 transition: 0.25s ease-in-out;
 -webkit-text-shadow: 0 30px 0px transparent;
 -moz-text-shadow: 0 30px 0px transparent;
 -ms-text-shadow: 0 30px 0px transparent;
 -o-text-shadow: 0 30px 0px transparent;
 text-shadow: 0 30px 0px transparent;
 color: rgba(0, 0, 0, 0.1);
 overflow: visible;
}
#slide-up:hover {
 -webkit-text-shadow: 0 0px 0px black;
 -moz-text-shadow: 0 0px 0px black;
 -ms-text-shadow: 0 0px 0px black;
 -o-text-shadow: 0 0px 0px black;
 text-shadow: 0 0px 0px black;
}

#slide-right {
 -webkit-transition: 0.25s ease-in-out;
 -moz-transition: 0.25s ease-in-out;
 -ms-transition: 0.25s ease-in-out;
 -o-transition: 0.25s ease-in-out;
 transition: 0.25s ease-in-out;
 -webkit-text-shadow: -200px 0 0px transparent;
 -moz-text-shadow: -200px 0 0px transparent;
 -ms-text-shadow: -200px 0 0px transparent;
 -o-text-shadow: -200px 0 0px transparent;
 text-shadow: -200px 0 0px transparent;
 color: rgba(0, 0, 0, 0.1);
 overflow: visible;
}
#slide-right:hover {
 -webkit-text-shadow: 0px 0 0px black;
 -moz-text-shadow: 0px 0 0px black;
 -ms-text-shadow: 0px 0 0px black;
 -o-text-shadow: 0px 0 0px black;
 text-shadow: 0px 0 0px black;
}

#diag-topLeft {
 -webkit-transition: 0.25s ease-in-out;
 -moz-transition: 0.25s ease-in-out;
 -ms-transition: 0.25s ease-in-out;
 -o-transition: 0.25s ease-in-out;
 transition: 0.25s ease-in-out;
 -webkit-text-shadow: -30px -30px 0px transparent;
 -moz-text-shadow: -30px -30px 0px transparent;
 -ms-text-shadow: -30px -30px 0px transparent;
 -o-text-shadow: -30px -30px 0px transparent;
 text-shadow: -30px -30px 0px transparent;
 color: rgba(0, 0, 0, 0.1);
 overflow: visible;
}
#diag-topLeft:hover {
 -webkit-text-shadow: 0px 0 0px black;
 -moz-text-shadow: 0px 0 0px black;
 -ms-text-shadow: 0px 0 0px black;
 -o-text-shadow: 0px 0 0px black;
 text-shadow: 0px 0 0px black;
}

#flood-right {
 -webkit-transition: 0.25s ease-in-out;
 -moz-transition: 0.25s ease-in-out;
 -ms-transition: 0.25s ease-in-out;
 -o-transition: 0.25s ease-in-out;
 transition: 0.25s ease-in-out;
 -webkit-box-shadow: inset 0px 0 0 0 #ff401a;
 -moz-box-shadow: inset 0px 0 0 0 #ff401a;
 -ms-box-shadow: inset 0px 0 0 0 #ff401a;
 -o-box-shadow: inset 0px 0 0 0 #ff401a;
 box-shadow: inset 0px 0 0 0 #ff401a;
 color: rgba(0, 0, 0, 0.1);
 overflow: hidden;
}
#flood-right:hover {
 color: white;
 -webkit-box-shadow: inset 500px 0 0 0 #ff401a;
 -moz-box-shadow: inset 500px 0 0 0 #ff401a;
 -ms-box-shadow: inset 500px 0 0 0 #ff401a;
 -o-box-shadow: inset 500px 0 0 0 #ff401a;
 box-shadow: inset 500px 0 0 0 #ff401a;
}

Примеры создания hover-эффектов для текста. Все превращения созданы с помощью CSS свойств text-shadow или box-shadow. &nbsp; HTML CSS * { font-family: helvetica neue, helvetica, arial, sans-serif; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } h1, h2, p { text-align: center; display: block; width: 500px; margin: 50px auto; } @media all and (max-width: 500px) { h1, h2, p { width: 100%; } } h1 { font-weight: 200; } h2 { cursor: pointer; font-weight: 900;&hellip;

Обзор

Проголосуйте за урок

Оценка

Итог : Уважаемые читатели! Если вам понравилась статья не поленитесь проголосовать и оставить комментарий, ведь так я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!

Рейтинг: 4.75 ( 3 голосов )
90

Один комментарий

  1. наталия

    я только начинаю изучать вордпресс, но от Вашего сайта я в восторге — мне, чайнику без особых знаний языков программирования, все понятно! СПАСИБО!!!!!!!!!!!!!!!

Оставить комментарий

Ваш email не будет опубликован.

*