你不能錯過的創(chuàng)意CSS文字陰影效果第三彈

.時髦的雙影

要創(chuàng)建此效果，文本將被賦予兩個硬陰影，沒有模糊半徑。第一個陰影被賦予背景顏色并被放置在文本附近，第二個陰影被賦予文本顏色并且放置的距離大于文本中的第一個陰影。

CSS

color: #dfdfdf;
text-shadow: 4px 4px 0px #000, 
 -4px 0 0px #000,
 7px 4px 0 #fff;

22.彩色陰影

在這個演示中，每個字母都有不同顏色漸變的陰影，使它看起來非常令人印象深刻。

HTML

<p>
 <span id="y">Y</span>
 <span id="o">O</span>
 <span id="u">U</span
</p>

CSS

color: #dfdfdf;
#y {
 text-shadow: 0 1px 2px #75b663,
 1px 3px 1px #5ea04b, 
 2px 5px 1px #5b9c49, 
 4px 7px 1px #518b41, 
 6px 9px 1px #477939,
 8px 11px 1px #3d6831,
 10px 13px 1px #335729,
 12px 15px 1px #294521,
 14px 17px 1px #1e3418;
}
#o {
 text-shadow: 0 1px 2px #9d64c4,
 1px 3px 1px #9759c0, 
 2px 5px 1px #8b46b9, 
 4px 7px 1px #7d3fa6, 
 6px 9px 1px #6f3894,
 8px 11px 1px #613181,
 10px 13px 1px #532a6f,
 12px 15px 1px #45235c,
 14px 17px 1px #381c4a;
}
#u {
 text-shadow: 0 1px 2px #c48564,
 1px 3px 1px #c07d59, 
 2px 5px 1px #b96e46, 
 4px 7px 1px #a6633f, 
 6px 9px 1px #945838,
 8px 11px 1px #814d31,
 10px 13px 1px #6f422a,
 12px 15px 1px #5c3723,
 14px 17px 1px #4a2c1c;
}

3.陷落的文本

實際上，您可以使用CSS使文本看起來像在本演示中所做的那樣。它的方向和位置使用transform 屬性進行更改，并給出不同的陰影組，使其看起來更自然。

HTML

<p data-text='FALLEN'>FALLEN</p>

CSS

p {
 transform: skew(40deg)rotate(-10deg)rotateX(50deg)translate3d(0, 0, 0);
 -webkit-perspective: 100px;
 perspective: 100px;
}
p::before {
 text-shadow: 0 2px 3px #747474, 
 -3px 3px 1px #222, 
 -6px 5px 1px #474747, 
 -9px 7px 1px #747474,
 -12px 9px 1px #565656,
 -15px 11px 1px #343434,
 -22px 15px 1px #171717;
}
p:before,
p:after {
 position: absolute;
 left: 0;
 right: 0;
 top: 0;
 content: attr(data-text)
}
p:after {
 color: #edc;
}

4.多個彩色陰影

這是通過使用藍色和粉紅色的兩個遠距離陰影創(chuàng)建的多文本陰影效果的另一個令人印象深刻的示例。

CSS

color: #474747; 
 
text-shadow: 20px 10px 0px #ff99cc,
 -15px -6px 0px #64a5b7;

5.淘汰文本

這是淘汰文本的一個示例，它允許通過它可以看到它的背景。使用text-shadow 和 mix-blend-mode屬性創(chuàng)建此效果。

渴望了解更多有關(guān)淘汰文本的信息？訪問鏈接如何使用CSS創(chuàng)建Knockout Text 并學習創(chuàng)建不同類型的挖空文本效果。

HTML

<div id="parent">
 <p>Hey there!</p>
</div>

CSS

div {
 background: url('https://www.dl.dropboxusercontent.com/s/rv0tbpx6fmtr4vi/texture.jpg') repeat;
 padding: 10px;
}
p {
 padding: 30px;
 mix-blend-mode: multiply;
 text-shadow: 5px 4px 11px rgb(0,0,0), 0 2px 5px rgb(0,0,0);
 text-align: center;
}

結(jié)論

文本陰影在網(wǎng)站中廣泛使用，并且很容易實現(xiàn)。您可以直接選擇本文中給出的任何文本陰影并增強您的設(shè)計。您還可以通過提供不同顏色和其他變化來創(chuàng)建自己的顏色，從這些陰影中獲取想法。我們很快就會發(fā)布一篇文章，討論創(chuàng)建這里給出的文本效果的提示和技巧。

整理不易，請大家多多關(guān)注支持我，謝謝！

用HTML的顏色代碼，您可以設(shè)置網(wǎng)站的背景、文字顏色的顏色、表格單元格顏色、CSS樣式表中眾多元素的顏色搭配等等，不僅可以使用#80BFFF和顏色的英文名稱(red)這樣的代碼，還能使用RGBA、HSLA等帶透明通道的顏色代碼。

網(wǎng)頁配色使用背景的HTML顏色代碼：<body bgcolor="#80BFFF">
網(wǎng)頁配色使用文字的HTML顏色代碼：<font color="#80BFFF">
網(wǎng)頁配色使用表格的HTML顏色代碼：<table bgcolor="#80BFFF">
網(wǎng)頁配色使用連接的HTML顏色代碼：<a style="color:#80BFFF">
網(wǎng)頁配色使用CSS背景的HTML顏色代碼：.bgcolor{backgroun:#FF0000;}
網(wǎng)頁配色使用CSS文字顏色的HTML顏色代碼：.txtcolor{color:#424242;}

常見色彩搭配問題解答

紫色配什么顏色好看？
墨綠色配什么顏色好看？
粉色配什么顏色好看？
綠色配什么顏色好看？
藍色配什么顏色好看？

橙色配什么顏色好看？
玫紅色配什么顏色好看？
咖啡色配什么顏色好看？
紅色配什么顏色好看？
天藍色配什么顏色好看？

卡其色配什么顏色好看？
駝色配什么顏色好看？
淺綠色配什么顏色好看？
橘紅色配什么顏色好看？
橘色配什么顏色好看？

紫色配什么顏色好看

紫色配黃色系，視覺沖擊力強，會使人眼前一亮；藍色系，比較協(xié)調(diào)、不張揚。

#F1B000
#5C0C7B
#7B76AC
#2059A6

墨綠色配什么顏色好看

墨綠色比較沉穩(wěn)，可以搭配活潑跳躍一點的顏色，黃色是綠色的臨近色，應(yīng)該搭配不成問題，只有穿的場合問題，天藍色配個今年流行的撞色也不錯啊！

#669934
#346633
#65CC66
#0099CB

粉色配什么顏色好看

粉色這類顏色的組合多用于女性主題，例如：化妝品、服裝等，鮮嫩而充滿誘惑，傳達著柔情、嬌媚、溫柔、甜蜜、純真、誘惑的心理感受。

#FE6767
#FFCC9A
#FF6766
#CB3398

綠色配什么顏色好看

當綠色搭配同色系的亮色如檸檬黃綠、嫩草綠或白色，會給人清爽、生動的感覺；當綠色與暖色系的黃色或橙色相配，會有青春、活潑之感。而綠色與藍色、紫色或黑色相配時，高貴華麗，但是最好不要過多使用。

#346633
#669934
#9ACC99
#D6E6B5

藍色配什么顏色好看

藍色搭配：在所有顏色中，藍色服裝最容易與其他顏色搭配。不管是近似于黑色的藍色，還是深藍色，都比較容易搭配，而且，藍色具有緊縮身材的效果，極富魅力。

#30588C
#77C3F2
#B6DBF2
#3A758C

橙色配什么顏色好看

橙色是歡快活潑的光輝色彩，是暖色系中最溫暖的色，它使人聯(lián)想到金色的秋天，豐碩的果實，是一種富足、快樂而幸福的顏色。橙色稍稍混入黑色或白色，會變成一種穩(wěn)重、含蓄又明快的暖色，但混入較多的黑色，就成為一種燒焦的色；橙色中加入較多的白色會帶來一種甜膩的感覺。

橙色明視度高，在工業(yè)安全用色中，橙色即是警戒色，如火車頭，登山服裝，背包，救生衣等，橙色一般可作為喜慶的顏色，同時也可作富貴色，如皇宮里的許多裝飾。橙色可作餐廳的布置色，據(jù)說在餐廳里多用橙色可以增加食欲。

橙色與淺綠色和淺藍色相配，可以構(gòu)成最響亮、最歡樂的色彩。橙色與淡黃色相配有一種很舒服的過渡感。橙色一般不能與紫色或深藍色相配，這將給人一種不干凈、晦澀的感覺。由于橙色非常明亮刺眼，有時會使人有負面低俗的意象，這種狀況尤其容易發(fā)生在服飾的運用上，所以在運用橙色時，要注意選擇搭配的色彩和表現(xiàn)方式，才能把橙色明亮活潑具有口感的特性發(fā)揮出來。

節(jié)我們講文本樣式，像比如設(shè)置文本顏色呀，首行縮進、水平對齊等，可以對網(wǎng)頁進行排本設(shè)置等。

將要學習的文本屬性有如下幾個：

color

首先我們來講文本顏色設(shè)置，前面我們講過一節(jié)關(guān)于如何設(shè)置顏色，所以想必大家對如何給文本設(shè)置顏色不會。

示例：

例如給下面的 <p> 標簽中的 <span> 標簽中的文本，顏色設(shè)置為粉色：

 <p>盛年不重來，<span>一日難再晨</span>。及時宜自勉，歲月不待人。</p>

CSS 樣式代碼：

span{
    color: pink;
}

或者使用十六進制顏色值：

span{
    color: #FFC0CB;
}

text-index

一般我們在寫作文的時候，所有段落的首行都會首行縮進兩個字，而我們?nèi)绻Ｍ诰W(wǎng)頁中的段落也能實現(xiàn)首行縮進呢，這就可以通過 CSS 中的 text-index 屬性來設(shè)置首行文本的縮進。

text-index 屬性直接將縮進距離以數(shù)字表示，單位為 em 或 px。一般我們使用 em 更多，通常將值設(shè)置為 2em，表示縮進兩個字符。

em 是相對單位，表示的長度相當于文本中字符的倍數(shù)，會根據(jù)字符的大小，自動適應(yīng)，空出設(shè)置字符的倍數(shù)。

text-index 屬性允許使用負值，如果使用負值，那么首行會被縮進到左邊。

示例：

實現(xiàn)第一個段落和最后一個段落的首行縮進：

<!DOCTYPE>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS學習(9xkd.com)</title>
        <link rel="stylesheet" type="text/css" href="index.css">
    </head>
    <body>
        <p class="index">蒹葭蒼蒼，白露為霜。所謂伊人，在水一方。</p>
        <p>溯洄從之，道阻且長。溯游從之，宛在水中央。</p>
        <p>蒹葭萋萋，白露未晞。所謂伊人，在水之湄。</p>
        <p>溯洄從之，道阻且躋。溯游從之，宛在水中坻。</p>
        <p>蒹葭采采，白露未已。所謂伊人，在水之涘。</p>
        <p class="index">溯洄從之，道阻且右。溯游從之，宛在水中沚。</p>
    </body>
</html>

CSS 樣式代碼：

.index{
    text-indent: 2em;
}

在瀏覽器中的演示：

text-align

text-align 屬性用于設(shè)置元素中文本的水平對齊方式。

屬性值有下面幾種：

示例：

看一下不同屬性值能實現(xiàn)的效果：

<!DOCTYPE>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS學習(9xkd.com)</title>
        <link rel="stylesheet" type="text/css" href="index.css">
    </head>
    <body>
        <p class="text1">內(nèi)容居中</p>
        <p class="text2">內(nèi)容居左</p>
        <p class="text3">內(nèi)容居右</p>
        <p>內(nèi)容不添加樣式</p>
    </body>
</html>

CSS 樣式代碼：

.text1{
    text-align: center;
}
.text2{
    text-align: left;
}
.text3{
    text-align: right;
}

在瀏覽器中的演示：

line-height

line-height 用于設(shè)置行高，也就是設(shè)置行間的距離。

屬性值可以是下面幾種：

一般我們使用數(shù)字來表示，單位為 px，如果不添加單位，則表示按倍數(shù)表示，這時行高是字體大小的倍數(shù)。

示例：

例如下面第一個 <p> 標簽中的內(nèi)容字體大小為14px，將行高設(shè)置為 21px，和將行高設(shè)置為 2（字體大小的兩倍）是一樣的效果：

 <body>
    <p class="text">魯迅的成功，有一個重要的秘訣，就是珍惜時間。魯迅十二歲在紹興城讀私塾的時候，父親正患著重病，兩個弟弟年紀尚幼，魯迅不僅經(jīng)常上當鋪，跑藥店，還得幫助母親做家務(wù)，為免影響學業(yè)，他必須作好精確的時間安排。</p>
    <p>此后，魯迅幾乎每天都在擠時間。他說過：「時間，就像海綿里的水，只要你擠，總是有的。」魯迅讀書的興趣十分廣泛，又喜歡寫作，他對于民間藝術(shù)，特別是傳說、繪畫，也深切愛好。</p>
</body>

CSS 樣式代碼：

.text{
    font-size: 14px;
    line-height: 28px;
    /* 相當于 line-height:2; */
}

在瀏覽器中的演示：

text-decoration

text-decoration 屬性用于設(shè)置文本的裝飾，也就是給文本設(shè)置某種效果，例如下劃線、刪除線等。

屬性值可以是下面幾種：

示例：

除了給文本添加裝飾，我們還可以通過text-decoration 屬性去掉鏈接下面的下劃線：

<p>默認文本</p>
<p class="p1">設(shè)置下劃線</p>
<p class="p2">設(shè)置上劃線</p>
<p class="p3">設(shè)置刪除線</p>
<p class="p4">文本閃爍</p>
<a href="#">去掉鏈接的下劃線</a>

CSS 樣式代碼：

.p1{
    text-decoration: underline;
}
.p2{
    text-decoration: overline;
}
.p3{
    text-decoration: line-through;
}
.p4{
    text-decoration: blink;
}
a{
    text-decoration: none;
}

在瀏覽器中的演示：

總結(jié)：本節(jié)所學習的文本樣式，在實際應(yīng)用中我們會經(jīng)常用到，所以大家要弄清楚這幾個屬性的使用，以及當賦值不同的屬性值時，展示出來的效果是什么。

想看更多可以：https://www.9xkd.com/

在線咨詢

上一篇：我用Python做了一個植物大戰(zhàn)僵尸！「附源碼」
下一篇：個體工商戶自行申報操作指引（網(wǎng)頁端）

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

你不能錯過的創(chuàng)意CSS文字陰影效果第三彈

color

text-index

text-align

line-height

text-decoration

您的項目需求