css3文字颜色渐变和文字阴影特效

这些效果只在WEBKIT内核的浏览器才可以看到，其他浏览器需要添加一些回退代码。

文字颜色渐变的制作

这和制作背景渐变效果是一样的，只是将背景放到了文字上。下面是CSS代码

CSS

h 1 #gradient {      color : #FF0052 ; /* Fallback Color */      text-transform : uppercase ;      font-weight : bold ;      font-family : helvetica ;      text-align : center ;      font-size : 70px ;      letter-spacing : -4px ; } @media  screen and (-webkit-min-device-pixel-ratio: 0 ) {      h 1 #gradient {      background : -webkit-gradient(linear, left top , left bottom ,from( #FF0052 ),to( #802F7B ));      -webkit-background- clip : text;      -webkit-text-fill- color : transparent ;      } }

HTML

< h1 id = "gradient" >CSS3 Rocks!</ h1 >

遗憾的是，这个文字效果只在webkit内核的浏览器上才能正常工作。Firefox 浏览器不支持在文字上使用background-clip属性。所以在其他浏览器上查看这个demo时，将回退到一个默认的颜色。我们使用@media screen and (-webkit-min-device-pixel-ratio:0来防止渐变在不支持的浏览器上显示。

浮雕阴影效果

这个效果是使用2个text-shadow来制作。第一个阴影的颜色和背景颜色一样，它用来制作文字和阴影之间的间隙。第二个阴影才是浮雕阴影。下面是CSS代码：

CSS

body {      background : #441369 ;   }    h 1 #gradient {      text-align : center ; } h 1 #gradient span {      position : relative ;      display : inline-block ;      color : #FF0052 ; /* Fallback Color */      text-transform : uppercase ;      font-weight : bold ;      font-family : helvetica ;      text-align : center ;      font-size : 70px ;      letter-spacing : -4px ;      text-shadow : 4px 4px 0px #441369 , 8px 8px 0px rgba( 255 , 255 , 255 , 0.1 );  /* Fallback Shadow */ } @media  screen and (-webkit-min-device-pixel-ratio: 0 ) {      h 1 #gradient span{          background : -webkit-gradient(linear, left top , left bottom ,from( #FF0052 ),to( #802F7B ));          -webkit-background- clip : text;          -webkit-text-fill- color : transparent ;          text-shadow : none !important ;      }      h 1 #gradient span:after {          background : none ;          content : attr (data-text);          left : 0 ;          position : absolute ;          text-shadow : 4px 4px 0px #441369 , 8px 8px 0px rgba( 255 , 255 , 255 , 0.1 ); //relief shade effect          top : 0 ;          z-index : -1 ;      } }

HTML

< h1 id = "gradient" >CSS3 Rocks!</ h1 >

阴影纹理效果

这个效果是在上面的基础上为阴影添加一些图案纹理，使阴影效果更加好看。

CSS

body {      background : #441369 ;   }    h 1 #gradient {      text-align : center ; } h 1 #gradient span {      position : relative ;      display : inline-block ;      color : #FF0052 ; /* Fallback Color */      text-transform : uppercase ;      font-weight : bold ;      font-family : helvetica ;      text-align : center ;      font-size : 70px ;      letter-spacing : -4px ;      text-shadow : 4px 4px 0px #441369 , 8px 8px 0px rgba( 255 , 255 , 255 , 0.1 );  /* Fallback Shadow */ } @media  screen and (-webkit-min-device-pixel-ratio: 0 ) {      h 1 #gradient span{        background : -webkit-gradient(linear, left top , left bottom ,from( #FF0052 ),to( #802F7B ));        -webkit-background- clip : text;        -webkit-text-fill- color : transparent ;        text-shadow : none !important ;      }      h 1 #gradient span:after {          content : attr (data-text);          left : 8px ;          position : absolute ;          background : url (RkDRMcJ.png); /* image source for your texture */          -webkit-background- clip : text;          -webkit-text-fill- color : transparent ;          text-shadow : -4px -4px 0px #441369 , -1px 0px 0px rgba( 255 , 255 , 255 , 0.1 );          top : 8px ;          z-index : -1 ;          width : 100% ;      } }

HTML

< h1 id = "gradient" >CSS3 Rocks!</ h1 >

通过调整text-shadow的位置和添加一个图片纹理，就可以完成这种效果。

转载于:https://www.cnblogs.com/weiyanan/p/5465870.html