Текстовые эффекты (http://www.shpargalochki.ru/2016/12/jeffekty-teksta-css.html) на CSS всегда привлекают внимание посетителей. Как оформить текст (http://www.shpargalochki.ru/2015/11/kak-oformit-tekst-v-krasivuju-ramku.html) или отдельно выделить слово, когда при наведении на него курсора происходит лёгкое движение этого участка вперёд. Ещё зададим всей этой конструкции тень.
Наведите на участок абзац ниже, чтобы посмотреть результат.
Вот так выглядит эффект подъёма с отбрасываемой тенью. Вы можете изменить цвет фона при наведении, цвет текста, цвет тени. Рамку так же можно убрать совсем или изменить её свойства. Всё это я отметила непосредственно в самом коде.
Код
<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:#02BB06; /* Цвет шрифта при наведении */
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="[url]http://www.shpargalochki.ru/[/url]">шпаргалки блогерши</a>
В Блоггере код устанавливается в тело сообщения в режиме HTML. Сам эффект появится только после публикации поста. Потренируйтесь на тестовом блоге или в этом(http://www.shpargalochki.ru/p/html.html) редакторе. Коды уже готовые к применению. Только замените на свой текст нужные строчки.
Если захотите часто использовать эффект подъёма текста, разумнее будет установить код CSS непосредственно в шаблоне (теме) блога, перед строкой ]]></b:skin>, но только без тегов <style> тут весь код </style>. Останется только, когда есть необходимость, добавить в сообщение, при оформлении участка текста или выделении ссылки, код HTML
<div class="bv-text-effect">
Здесь ваш текст
</div>
или
<a class="bv-text-effect" href="[url]http://www.shpargalochki.ru/[/url]">шпаргалки блогерши</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>
Пробуйте, экспериментируйте и всё получится. Спасибо всем за визит и до встречи.
http://www.shpargalochki.ru/2018/01/effekt-podyoma-teksta-s-tenyu.html
0 коммент.:
Отправить комментарий