文字颜色渐变的制做
这和制做背景渐变效果是同样的，只是将背景放到了文字上。下面是CSS代码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来防止渐变在不支持的浏览器上显示。html
浮雕阴影效果
这个效果是使用2个text-shadow来制做。第一个阴影的颜色和背景颜色同样，它用来制做文字和阴影之间的间隙。第二个阴影才是浮雕阴影。下面是CSS代码：css3
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
>
|
阴影纹理效果
这个效果是在上面的基础上为阴影添加一些图案纹理，使阴影效果更加好看。web
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的位置和添加一个图片纹理，就能够完成这种效果。浏览器