Эффект подъёма текста с тенью - Скрипты для uCoz | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Суббота, 10.12.2016
Скрипты для uCoz » Текстовые эффекты » Эффект подъёма текста с тенью

Аудиоплеер для сайта uCozАудиоплеер с плейлистом для сайта
Видеоплеер для сайта uCozВидеоплеер с плейлистом для сайта
Меню для сайта uCozВертикальное меню для сайта uCoz
Выпадающее меню для сайта uCozГоризонтальное меню для сайта uCoz
Круглое меню для сайта uCozВид материалов для сайта uCoz
Вид материалов Аудио для uCozВид материалов Видео для uCoz
Галерея для сайта uCozГенераторы для сайта uCoz
Контейнер для контентаКнопки для сайта uCoz
Слайдер для сайта uCozСчётчик для сайта uCoz
Часы для сайта uCozТекстовые эффекты
Таблица цветов для сайта uCozЭффекты для сайта uCoz
Эффекты курсораЭффекты увеличения
Мини чат для сайта uCozРадио для сайта uCoz
Скрипты для юКозИгры для сайта uCoz
Окна для сайта uCozИнформеры для сайта uCoz
Флеш и анимации для сайтаКалендарь для сайта uCoz
Мониторинг серверов для ucozСлайдшоу для сайта uCoz



Адаптивный сайт - aTmpl



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

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


Текстовый эффект подъёма



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





Применение эффекта к определённому элементу

В этом примере показано как можно применить эффект подъёма к отдельному текстовому элементу. Добавляете 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>Текстовый эффект <span class="ds-text-effect">подъёма</span> с отбрасываемой тенью</p>



Применение эффекта к определённому элементу в работе

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


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


Применение эффекта к большому количеству текста

В примере ниже 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>










Русские шрифты



Ссылка:
BB code:




  • ©
  • | Просмотров: 1396 | Добавил: IZOTOP | Рейтинг: 0.0/0
    | Теги: эффект, с тенью, effect, text, Текстовый

    Всего комментариев: 2
    0   Спам
    1 Vladimir   (11.08.2014 12:39)
    Аватар Vladimir Михаил добрый день я бы хотел применить вашу фишку на своём сайте http://alpps.ru/, в левом основном сайт баре мне необходимо прописать скрипт для каждой ссылки в таблице стилей или возможно применить какой то другой скрипт каторый бы работал для каждой ссылки отдельно

    0  
    2 IZOTOP   (11.08.2014 16:33)
    Аватар IZOTOP У Вас меню находится в блоке с ID catmenu, можно применить стили эффекта только к ссылкам в блоке:

    Код

    <style>  
    #catmenu 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;
    }
    #catmenu a: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>


    Добавлять комментарии могут только зарегистрированные пользователи.
    [ Регистрация | Вход ]