3D эффект текста с помощью CSS

3D эффект текста с помощью CSS

12

HTML

<h1><span class="dark">Нажми</span><span class="light">На меня</span></h1>

И CSS Стили

@import url(http://fonts.googleapis.com/css?family=Montserrat:700);

*{transition: all 0.08s ease-in-out;}

::selection{background: rgba(, , , 0.1);}

body{ background: #9FA7B2 url(https://dl.dropbox.com/u/40671103/bgColor1.jpg); background-size: cover;}

h1{
display: block;
width: 800px;
height: 200px;
line-height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin: -100px -400px;
text-align:center;
font-family: 'Montserrat', sans-serif;
text-transform:uppercase;
font-size: 80px;
border-top: 4px solid white;
border-bottom: 4px solid white;
cursor:pointer;
}

h1 span.light{
color:#fefefe;
text-shadow:
0px 1px 0px #c0c0c0,
0px 2px 0px #b0b0b0,
0px 3px 0px #a0a0a0,
0px 4px 0px #909090,
0px 5px 10px rgba(, , , 0.6)
;
}

h1 span.dark{
color: #101010;
text-shadow:
0px 1px 0px #555555,
0px 2px 0px #454545,
0px 3px 0px #353535,
0px 4px 0px #252525,
0px 5px 10px rgba(, , , 0.6)
;
}

h1:active{
line-height: 205px;
}

h1:active span.light{
color:#fefefe;
text-shadow:
0px 0px 0px #c0c0c0,
0px 0px 0px #b0b0b0,
0px 0px 0px #a0a0a0,
0px 0px 0px #909090,
0px 1px 3px rgba(, , , 0.4)
;
}

h1:active span.dark{
color: #101010;
text-shadow:
0px 0px 0px #555555,
0px 0px 0px #454545,
0px 0px 0px #353535,
0px 0px 0px #252525,
0px 1px 3px rgba(, , , 0.4)
;
}

Результат

See the Pen funky teCSSt by zetwin (@zetwin) on CodePen.

Читайте также  Бургер меню без плагинов.

Фон на всю ширину и высоту страницы... body { background: url(...) no-repeat center center fixed; -webkit-background-size: 100%; -moz-background-size: 100%; -o-backgroun...
Равномерное выравнивание блоков по ширине.... css #elsewhere { background-color: #222; } .zone { padding-left: 1.25rem; padding-right: 1.25rem; margin-left: -1.25rem; margin-right: -1....
Google Chrome как текстовый редактор... Да еще с подсветкой кода! Все что нам потребуется так это вставить в адресную строку вот этот код: data:text/html;base64,PHN0eWxlIHR5cGU9InRleHQ...
Простой и приятный шрифт Простой и приятный шрифт. font: 16px/1.5 "PT Sans",Arial,sans-serif; font-size: 14px; color: #837666; /* font-weight: bold; */

Сохрани, чтобы не потерять