html中字体纹理效果,CSS3 文本特效 - 浮雕（雕刻）纹理

CSS

语言：

CSSSCSS

确定

*,

*:after,

*:before {

padding: 0;

margin: 0;

}

body {

font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;

font-weight: 600;

font-size: 3em;

background: #ccc;

}

.wrapper {

margin: 40px auto;

/*EXAMPLE ONE - EMBOSS, NEW BROWSERS*/

text-align: center;

}

p {

background: #fff;

-webkit-background-clip: text;

color: transparent;

text-shadow: rgba(0, 0, 0, 0.2) 1px 1px 1px;

font-size: 3em;

/*EXAMPLE TWO - INLET, NEW BROWSERS*/

line-height: 1.2em;

}

p:nth-child(2) {

font-size: 3em;

background: #bababa;

-webkit-background-clip: text;

color: transparent;

/*EXAMPLE THREE - CROSS-BROWSER COMPATIBLE*/

text-shadow: rgba(255, 255, 255, 0.2) 1px 4px 2px;

}

.inlet {

color: #787878;

position: relative;

font-size: 3em;

}

.inlet:before,

.inlet:after {

content: attr(title);

color: rgba(240, 240, 240, 0.5);

position: absolute;

display: block;

left: 0;

right: 0;

margin: auto;

}

.inlet:before {

top: 1px;

left: 1px;

}

.inlet:after {

top: 2px;

left: 2px;

}