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.

Читайте также  Карусель изображений jquery. fade effect

Google Chrome как текстовый редактор... Да еще с подсветкой кода! Все что нам потребуется так это вставить в адресную строку вот этот код: data:text/html;base64,PHN0eWxlIHR5cGU9InRleHQ...
CSS Styling Radio Button and Checkboxes The idea is simple. We want to change the look and feel of existing radio buttons into more of a push button. The above image pretty much t...
Внутренние тени в CSS Обычные тени легко реализовать с помощью box-shadow или text-shadow. Но как быть, если необходимо сделать внутренние тени? В этой статье описывается, ...
Фон на всю ширину и высоту страницы... body { background: url(...) no-repeat center center fixed; -webkit-background-size: 100%; -moz-background-size: 100%; -o-backgroun...

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