CSS 文字立體凸起效果
分享一段程式碼例項,它利用CSS3實現了文字帶有凸起立體感效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> *{ padding: 0; margin: 0; } .box { width: 100%; height: 400px; background: #01838E; cursor: pointer; } .font { width: 100%; height: 400px; text-align: center; font-size: 150px; color: #01838E; font-weight: bold; line-height: 400px; text-shadow: white 0 0px 1px, black 1px 0px 2px, white -1px 0px 2px; } </style> </head> <body> <div class="box"> <div class="font">螞蟻部落</div> </div> </body> </html>
上面程式碼實現了預期效果,下面介紹一下它的實現過程。
一.實現原理:
立體感是視覺上的,首先在原來位置上實現陰影,然後再左右分別設定兩個陰影就實現了要求。
很難用語言表述,大家增減text-shadow三組屬性值檢視效果。
二.相關閱讀:
(1).text-shadow參閱CSS3 text-shadow一章節。
相關文章
- CSS3 文字立體凸起效果CSSS3
- CSS3 文字立體翻轉效果CSSS3
- css立體按鈕效果CSS
- css實現帶有陰影的立體文字效果CSS
- CSS 例項之文字的凸起與凹陷CSS
- css立體效果程式碼例項CSS
- css3實現的立體滾動效果CSSS3
- css實現立體效果橫向導航選單CSS
- CSS3簡單圓角立體按鈕效果CSSS3
- CSS3 文字效果CSSS3
- canvas立體效果的圓環Canvas
- css3實現的3D立體旋轉效果CSSS33D
- CSS文字環繞圖片效果CSS
- CSS多行文字垂直居中效果CSS
- CSS3花屏文字效果CSSS3
- CSS 陰影進階,實現更加的立體的陰影效果!CSS
- CSS3文字模糊效果CSSS3
- css3實現的滑鼠懸浮立體動態按鈕效果CSSS3
- css3實現的水平立體動態導航選單效果CSSS3
- CSS3文字豎排效果CSSS3
- css實現文字和圖片居中效果CSS
- CSS文字模糊效果程式碼例項CSS
- CSS3文字閃爍效果CSSS3
- 指令碼和css控制!文字漸變效果!指令碼CSS
- css3實現的書本立體翻頁效果程式碼例項CSSS3
- CSS3具有3D立體效果的數字分頁CSSS33D
- css3實現的立體導航選單效果程式碼例項CSSS3
- 強大的CSS:文字下波浪線動畫效果CSS動畫
- CSS文字交錯滑動效果-001CSS
- CSS題目系列(3)- 實現文字切割效果CSS
- CSS3帶有倒影的文字效果CSSS3
- css input文字框中的內容居中效果CSS
- CSS實現文字框中的英文字母大寫效果CSS
- CSS 文字陰影 text-shadow 懸停效果CSS
- CSS3文字動態填充背景效果CSSS3
- 純CSS實現四種方式文字反差色效果CSS
- css實現的文字標題向前縮排效果CSS
- css如何實現div中的文字垂直居中效果CSS