這些效果只在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的位置和添加一個圖片紋理，就可以完成這種效果。