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

Приветствую вас, друзья. Текстовые эффекты на CSS всегда привлекают внимание посетителей. Покажу вам сегодня, как оформить текст или отдельно выделить слово, когда при наведении на него курсора происходит лёгкое движение этого участка вперёд. И ещё зададим всей этой конструкции тень.

Вы наверняка это видели на некоторых сайта, попробуйте и у себя создать иллюзию подъёма текста с тенью.

Наведите на участок абзац ниже, чтобы посмотреть результат.

Вот так выглядит эффект подъёма с отбрасываемой тенью. Вы можете изменить цвет фона при наведении, цвет текста, цвет тени. Рамку так же можно убрать совсем или изменить её свойства. Всё это я отметила непосредственно в самом коде.

Код

<style>
.bv-text-effect {
display: inline-block;
padding: 3px; /* Внутренний отступ до наведения */
border: 1px solid transparent; /* Рамка до наведения */
outline: 0;
/* Округление рамки */
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-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;
}
.bv-text-effect:hover {
background: #DCDCDC; /* Фон при наведении */
border: 1px solid #A9A9A9; /* Цвет рамки при наведении */
color:#FA8072; /* Цвет шрифта при наведении */
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>

<div class="bv-text-effect">
Здесь ваш текст
</div>

Можно применить это и к отдельному слову, предложению. А можно таким образом оформить и ссылки в блоге, чтобы были более привлекательными. Давайте смотреть пример со ссылками.

Спасибо что читаете шпаргалки блогерши

Код

<style> a.bv-text-effect {
display: inline-block;
padding: 3px; /* Внутренний отступ до наведения */
border: 1px solid transparent; /* Рамка до наведения */
outline: 0;
/* Округление рамки */
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
/* Свойства перехода */
-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.bv-text-effect:hover {
background:  #8FBC8F; /* Фон при наведении */
border: 1px solid #DCDCDC; /* Цвет рамки при наведении */
color:#2F4F4F; /* Цвет текста при наведении */
text-decoration: none;
text-shadow: none; /* Тени текста (отключены) */
/* цвет тени при наведении */
-moz-box-shadow: 1em 1em 1em -0.5em rgba(142, 213, 87, 0.6);
-webkid-box-shadow: 1em 1em 1em -0.5em rgba(142, 213, 87, 0.6);
box-shadow: 1em 1em 1em -0.5em rgba(142, 213, 87, 0.6);
}
</style>

Спасибо что читаете <a class="bv-text-effect" href="http://www.shpargalochki.ru/">шпаргалки блогерши</a>

В Блоггере код устанавливается в тело сообщения в режиме HTML. Сам эффект появится только после публикации поста. Потренируйтесь на тестовом блоге или в этом редакторе. Хотя сложного в этом ничего нет. Коды уже готовые к применению. Только замените на свой текст нужные строчки.

В самом коде я сделала комментарии, где можно поменять все свойства CSS.

Если захотите часто  использовать эффект подъёма текста, разумнее будет установить код CSS непосредственно в шаблоне (теме) блога, перед строкой ]]></b:skin>, но только без тегов  <style> тут весь код </style>.  И останется только, когда есть необходимость, добавить в сообщение, при оформлении участка текста или выделении ссылки, код HTML

<div class="bv-text-effect">
Здесь ваш текст
</div>

или

<a class="bv-text-effect" href="http://www.shpargalochki.ru/">шпаргалки блогерши</a>

Для полноты картины добавлю ещё один код, когда все ссылки будут работать с предложенным выше эффектом. Это уже на любителя, но попробовать рекомендую, может кому и понравится. Стоит учесть, что абсолютно все ссылки в гаджетах, в тексте, в навигации, в заголовках и другие будут именно так себя вести. Как - то так.

В этом случае эффект применяется не к определённому классу, а ко всем тегам <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>

Пробуйте, экспериментируйте и всё получится. Спасибо всем за визит и до встречи.

Получайте новые сообщения с блога прямо на почту

Введите Ваш email