Домой / Рецепты CSS / 3D текст с hover-эффектом на CSS
3D текст с hover-эффектом на CSS

3D текст с hover-эффектом на CSS

3D текст на чистом CSS. Эффект 3D  текста достигается благодаря использованию CSS свойства text-shadow. Для смены времени hover-эффекта необходимо изменить значения свойства transition.

 

Демо

HTML

<h1>Hover over me.<br>I'll surprise you.</h1>

CSS

body {
 background-color:#2d3e43;
 overflow:hidden;
}

h1 {
 margin:100px auto;
 text-align:center;
 font-size:100px;
 color:white;
 position:relative;
 left:0;
 text-shadow:
 1px 1px 0px #c4dbe2,
 2px 2px 0px #b4d1d9,
 3px 3px 0px #a6c6cf,
 4px 4px 0px #94b8c3,
 5px 5px 0px #87aeb9,
 6px 6px 0px #7aa3af,
 7px 7px 0px #6d97a3,
 8px 8px 0px #618b98,
 9px 9px 0px #56818e,
 10px 10px 0px #4c7683,
 15px 15px 25px rgba(0,0,0,.9);
 transition: .5s ease-in-out;
}

h1:hover {
 left:20px;
 text-shadow:
 -1px 1px 0px #c4dbe2,
 -2px 2px 0px #b4d1d9,
 -3px 3px 0px #a6c6cf,
 -4px 4px 0px #94b8c3,
 -5px 5px 0px #87aeb9,
 -6px 6px 0px #7aa3af,
 -7px 7px 0px #6d97a3,
 -8px 8px 0px #618b98,
 -9px 9px 0px #56818e,
 -10px 10px 0px #4c7683,
 -15px 15px 25px rgba(0,0,0,.9);
}

3D текст на чистом CSS. Эффект 3D  текста достигается благодаря использованию CSS свойства text-shadow. Для смены времени hover-эффекта необходимо изменить значения свойства transition. &nbsp; HTML CSS body { background-color:#2d3e43; overflow:hidden; } h1 { margin:100px auto; text-align:center; font-size:100px; color:white; position:relative; left:0; text-shadow: 1px 1px 0px #c4dbe2, 2px 2px 0px #b4d1d9, 3px 3px 0px #a6c6cf, 4px 4px 0px #94b8c3, 5px 5px 0px #87aeb9, 6px 6px 0px #7aa3af, 7px 7px 0px #6d97a3, 8px 8px 0px #618b98, 9px 9px 0px #56818e, 10px 10px 0px #4c7683, 15px 15px 25px rgba(0,0,0,.9); transition: .5s ease-in-out; } h1:hover {&hellip;

Обзор

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

Оценка

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

Рейтинг: 4.85 ( 2 голосов )
100

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

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

*