|
導(dǎo)讀網(wǎng)頁的本質(zhì)就是超級文本標(biāo)記語言,通過結(jié)合使用其他的Web技術(shù)(如:腳本語言、公共網(wǎng)關(guān)接口、組件等),可以創(chuàng)造出功能強(qiáng)大的網(wǎng)頁。因而,超級文本標(biāo)記語言是萬維網(wǎng)(Web)編程的基礎(chǔ),也就是說萬維網(wǎng)是建立... 網(wǎng)頁的本質(zhì)就是超級文本標(biāo)記語言,通過結(jié)合使用其他的Web技術(shù)(如:腳本語言、公共網(wǎng)關(guān)接口、組件等),可以創(chuàng)造出功能強(qiáng)大的網(wǎng)頁。因而,超級文本標(biāo)記語言是萬維網(wǎng)(Web)編程的基礎(chǔ),也就是說萬維網(wǎng)是建立在超文本基礎(chǔ)之上的。超級文本標(biāo)記語言之所以稱為超文本標(biāo)記語言,是因為文本中包含了所謂“超級鏈接”點(diǎn)。 本篇文章主要給大家介紹用css3實(shí)現(xiàn)字體凹陷或凸出效果的實(shí)現(xiàn)方法。我們在設(shè)計網(wǎng)頁時,常常會需要考慮到用戶體驗,那么足夠美觀的網(wǎng)頁才能吸引住用戶。為了讓網(wǎng)頁內(nèi)容更加豐富好看,我們可能會使用ps做出很多特效,其實(shí)除了ps,利用css3屬性也能制作出各種好看的特效。 下面我們就給大家介紹一個css3實(shí)現(xiàn)字體凹陷凸出的特效方法,也就是使字體有立體感。 css字體實(shí)現(xiàn)凹陷凸出即立體感的代碼示例如下: <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css3字體實(shí)現(xiàn)立體感</title>
<style>
body {
background: gray;
}
h1 {
font-size: 200px;
color: gray;
text-shadow: 3px 3px 2px black,
-3px -3px 2px white; }
h1:hover {
text-shadow: 3px 3px 2px white,
-3px -3px 2px black;
}
</style>
</head>
<body>
<div class="demo" >
</div>
<h1>
PHP中文網(wǎng)
</h1>
</body>
</html>這里我們要對“PHP中文網(wǎng)”實(shí)現(xiàn)凹陷凸出的效果,并且使用了:hover 選擇器。 :hover 選擇器表示用于選擇鼠標(biāo)指針浮動在上面的元素。 最終此段代碼效果如下圖: 當(dāng)鼠標(biāo)移至文字上效果如下圖,呈現(xiàn)字體凹陷效果:
當(dāng)鼠標(biāo)移開文字后效果如下圖,呈現(xiàn)字體凸出效果:
這里主要用到了text-shadow屬性。 text-shadow屬性:為字體添加陰影, 可以通過對text-shadow屬性設(shè)置相關(guān)的屬性值,來實(shí)現(xiàn)一些需要的字體陰影效果,減少了圖片的使用。 注:所有主流瀏覽器都支持 text-shadow 屬性。但是Internet Explorer 9 以及更早版本的瀏覽器不支持 text-shadow 屬性。 那么本篇文章就是關(guān)于css3實(shí)現(xiàn)字體凹陷及凸出的效果方法介紹,非常淺顯易懂,希望對需要的朋友有所幫助! 以上就是css3怎么實(shí)現(xiàn)字體凹陷凸出效果?(附代碼)的詳細(xì)內(nèi)容,更多請關(guān)注php中文網(wǎng)其它相關(guān)文章! 網(wǎng)站建設(shè)是一個廣義的術(shù)語,涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。 |
溫馨提示:喜歡本站的話,請收藏一下本站!