css3浮雕文字

下载代码

html

css

分享到微信朋友圈

html

css

*,*: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;
  text-align:center;
}

/*EXAMPLE ONE - EMBOSS, NEW BROWSERS*/

p {
  background:#fff;
  -webkit-background-clip: text;
  color: transparent;
  text-shadow: rgba(0,0,0,0.2) 1px 1px 1px;
  font-size:3em;
  line-height:1.2em;
}

/*EXAMPLE TWO - INLET, NEW BROWSERS*/

p:nth-child(2) {
  font-size:3em;
  background:#BABABA;
  -webkit-background-clip: text;
  color: transparent;
  text-shadow: rgba(255,255,255,0.2) 1px 4px 2px;
}

/*EXAMPLE THREE - CROSS-BROWSER COMPATIBLE*/

.inlet {
  color: rgba(120,120,120,1.0);
  position: relative;
  font-size:3em;
}

.inlet:before, .inlet:after {
  content: attr(title);
  color: rgba(240,240,240,.5);
  position: absolute;
  display:block;
  left: 0;
  right: 0;
  margin: auto;
}

.inlet:before { 
  top: 1px; 
  left: 1px;
}
.inlet:after  { 
  top: 2px; 
  left: 2px; 
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg