Эффект подъёма текста с тенью

Эффект подъёма текста при наведении с отбрасываемой тенью

---

Эффект создаёт иллюзию подъёма текста с отбрасываемой тенью, выделяя его из остального при наведении мышки на задействованный участок элемента. Можно применить эффект подъёма как к отдельным словам, так и к целым предложениям или параграфам. Эффект имеет простое использование свойств CSS в качестве перехода состояния и создания тени выделенному элементу. Все параметры эффекта Вы сможете настроить по своему усмотрению, в коде для установки сделаны комментарии в местах регулировок значениями.
Применение эффекта к определённому элементу
В этом примере показано как можно применить эффект подъёма к отдельному текстовому элементу. Добавляете class эффекта и слово отображает его работу. 
Текстовый эффект подъёма с отбрасываемой тенью
Применение эффекта к большому количеству текста
В примере ниже class применяется ко всему предложению, т.к указан для тега в который помещён весь текст.

<style>
.ds-text-effect {
display: inline-block;
/* Внутренний отступ до наведения */
padding: 3px;
/* Бордюр до наведения */
border: 1px solid transparent;
outline: 0;
/* Округление бордюра */
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
/* Свойства перехода */
-webkit-transition: box-shadow 0.7s ease,
background 0.7s ease,
border 0.7s ease;
-moz-transition: box-shadow 0.7s ease,
background 0.7s ease,
border 0.7s ease;
transition: box-shadow 0.7s ease,
background 0.7s ease,
border 0.7s ease;
}
.ds-text-effect:hover {
/* Фон при наведении */
background: #BEBEBE;
/* Бордюр при наведении */
border: 1px solid #666;
/* Цвет текста при наведении */
color:#444;
text-decoration: none;
/* Тени текста (отключены) */
text-shadow: none;
/* Тени при наведении */
-moz-box-shadow: 1em 1em 1em -0.5em rgba(0,0,6,0.5);
-webkid-box-shadow: 1em 1em 1em -0.5em rgba(0,0,6,0.5);
box-shadow: 1em 1em 1em -0.5em rgba(0,0,6,0.5);
}
</style>
<p class="ds-text-effect">Текстовый эффект подъёма с отбрасываемой тенью</p>

Применение эффекта к большому количеству текста в работе
Наведите мышкой на текст чтобы посмотреть эффект в работе.

Текстовый эффект подъёма с отбрасываемой тенью

Применение эффекта к ссылке
В этом примере class применён к ссылке, при этом ссылка может наследовать уже применённые значения в "Таблице стилей".


<style> a.ds-text-effect {
display: inline-block;
/* Внутренний отступ до наведения */
padding: 3px;
/* Бордюр до наведения */
border: 1px solid transparent;
outline: 0;
/* Округление бордюра */
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
/* Свойства перехода */
-webkit-transition: box-shadow 0.7s ease,
background 0.7s ease,
border 0.7s ease;
-moz-transition: box-shadow 0.7s ease,
background 0.7s ease,
border 0.7s ease;
transition: box-shadow 0.7s ease,
background 0.7s ease,
border 0.7s ease;
}
a.ds-text-effect:hover {
/* Фон при наведении */
background: #BEBEBE;
/* Бордюр при наведении */
border: 1px solid #666;
/* Цвет текста при наведении */
color:#444;
text-decoration: none;
/* Тени текста (отключены) */
text-shadow: none;
/* Тени при наведении */
-moz-box-shadow: 1em 1em 1em -0.5em rgba(0,0,6,0.5);
-webkid-box-shadow: 1em 1em 1em -0.5em rgba(0,0,6,0.5);
box-shadow: 1em 1em 1em -0.5em rgba(0,0,6,0.5);
}
</style>
<a class="ds-text-effect" href="#">Наведи на меня мышкой</a>



Применение эффекта к ссылке в работе
Наведите мышкой на ссылку чтобы посмотреть эффект в работе.
Наведи на меня мышкой

Применение эффекта ко всем ссылкам
При добавлении кода для установки на определённую страницу, все ссылки будут подвержены прикреплению эффекта подъёма. В данном случае эффект применяется не к class, тоесть не к определённому классу, а ко всем тегам <a> имеющимся на странице. Если код поместить в "Глобальный блок", например "Нижнюю часть сайта", тогда ссылки на всех страницах сайта будут подвержены эффекту.



<style>
a {
display: inline-block;
/* Внутренний отступ до наведения */
padding: 3px;
/* Бордюр до наведения */
border: 1px solid transparent;
outline: 0;
/* Округление бордюра */
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
/* Свойства перехода */
-webkit-transition: box-shadow 0.7s ease,
background 0.7s ease,
border 0.7s ease;
-moz-transition: box-shadow 0.7s ease,
background 0.7s ease,
border 0.7s ease;
transition: box-shadow 0.7s ease,
background 0.7s ease,
border 0.7s ease;
}
a {
/* Фон при наведении */
background: #BEBEBE;
/* Бордюр при наведении */
border: 1px solid #666;
/* Цвет текста при наведении */
color:#444;
text-decoration: none;
/* Тени текста (отключены) */
text-shadow: none;
/* Тени при наведении */
-moz-box-shadow: 1em 1em 1em -0.5em rgba(0,0,6,0.5);
-webkid-box-shadow: 1em 1em 1em -0.5em rgba(0,0,6,0.5);
box-shadow: 1em 1em 1em -0.5em rgba(0,0,6,0.5);
}
</style>
<a href="#">Наведи на меня мышкой</a>

источник:http://delaisait.ucoz.ru/blog/ehffekt_podjoma_teksta_s_tenju/2014-05-07-667