如何使用CSS3

我想讓我的標題文本在我的網頁金子般的我不令金價效果文本希望彩色像這樣#ffd700我想相同的外觀和感覺像任何圖形設計人員可以在Photoshop中的金色效果。在這裏，我附上了一個我想要的例子。 Gold text example 如何使用CSS3

來源

2015-04-15 Developer_world

你知道Photoshop和CSS是兩個完全不同的事情？ CSS的這種效果是不可能的。 –

到目前爲止您嘗試了什麼？ – progsource

@UweAllner是的，我知道這兩個不同，因爲我認爲它可能以某種方式在CSS3中。 –

在css3中使用text-shadow屬性來獲取所需的黃金效果。請參閱http://css3gen.com/text-shadow/以獲得最佳結果。

來源

2015-04-15 07:27:11 Binoop

感謝您幫助我親愛的，但我想手動編寫代碼。 –

免責聲明

這是唯一可用的（目前）的WebKit瀏覽器

您可以使用

-webkit-background-clip

屬性來獲取你想要的結果。

樣品將是：

#wrap { 
 
    width: 100%; 
 
} 
 
.gradient { 
 
    font-size: 64px; 
 
    background: linear-gradient(#00AC97 50%, #E4CDA4 50%); 
 
    -webkit-background-clip: text; 
 
    -webkit-text-fill-color: transparent; 
 
}

<div id="wrap"> 
 
    <span class="gradient">Cross browser? Not yet...</span> 
 
</div>

爲了使此以更跨瀏覽器方式「工作」，I（一次）將具有使用用於圖像建議這個:(

來源

2015-04-15 08:08:16 jbutler483

我做了使用梯度和陰影的例子下面是HTML代碼：

<div class="block"> 
    <p class="golden-base golden3">Golden Text</p> 
    <p class="golden-base golden1">Using Only CSS</p> 
    <p class="golden-base golden2">NO JavaScript!</p> 
<div>

這裏的CSS：

.block { 
    padding: 1em; 
    text-align: center; 
    font-family: sans; 
    font-size: 2em; 
} 
.golden-base { 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
    font-weight:bold; 
    -webkit-margin-before: 0.3em; 
    -webkit-margin-after: 0.2em; 
} 
.golden1 { 
    background-image: -webkit-linear-gradient(#FFF65C, #3A2C00); 
    text-shadow: -0.02em -0.03em 0.005em rgba(255, 223, 0, 0.60); 
} 
.golden2 { 
    background-image: -webkit-linear-gradient(#E8D800, #E0CF00 52%, #A86800 55%, #A86800); 
    text-shadow: -0.02em -0.03em 0.005em rgba(255, 255, 0, 0.56); 
} 
.golden3 { 
    background-image: -webkit-linear-gradient(#FFF65C 45%, #9A8000 75%); 
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.09), 
    -1px -1px 0 rgba(255, 220, 0, 0.670); 
    font-size:2em; 
}

它看起來像這樣：

golden text using css only

我不是一個設計師。所以我很難根據你的需要調整顏色。但是，您可以對其進行測試並進行調整here @ codepen - link

聲明：我已經使用Google Chrome對其進行了測試。爲了讓你有口-webkit-tricks-...不同瀏覽器中工作，如果可能的話。

編輯基於意見，更漸變效果。

來源

2015-04-15 08:22:49 kravemir

你會多次複製文本？還包括內聯樣式？ – jbutler483

@ jbutler483在生產中：沒有。沙盒：取決於。例如：是 - 更容易理解。 – kravemir

在生產中：沒有。沙箱：不。例如：no - 使新開發人員認爲這是好的 – jbutler483

我知道你想使用CSS3，但正如你所提到HTML5我想在這裏發表一個帆布替代。如果您使用畫布元素，您將獲得更好的瀏覽器支持。畫布2D API有一個名爲createLinearGradient通過使用不同的顏色，以顏色漸變應用於文本方法停止：

var c = document.getElementById("stage"); 
var ctx = c.getContext("2d"); 

ctx.font = "30px Arial"; 
/* Color gradient */ 
var gradient = ctx.createLinearGradient(0, 30, 0, 10); 
gradient.addColorStop("0", "#a68841"); 
gradient.addColorStop("0.5", "#5a4917"); 
gradient.addColorStop("0.6", "#836A28"); 
gradient.addColorStop("1.0", "#E9D07C"); 
/* Text shadow */ 
ctx.shadowColor = "rgba(0, 0, 0, 0.6)"; 
ctx.shadowOffsetX = 1; 
ctx.shadowOffsetY = 1; 
ctx.shadowBlur = 0; 
ctx.fillStyle = gradient; 
ctx.fillText("JANDUS TECHNOLOGIES", 0, 30);

Demo

你也可以很容易地應用其他效果，如文本的陰影。

enter image description here

來源

2015-04-15 08:26:30 enyce12

您可以使用svg獲得效果

在線梯度發電機svg - http://10k.aneventapart.com/1/Uploads/319/

svg { 
 
    text-shadow: -1px 0px 1px rgb(97, 100, 5); 
 
}

<svg width="550" height="50" xmlns="http://www.w3.org/2000/svg"> 
 
    <defs> 
 
    <linearGradient id="grad2" y2="1" x2="1" id="g" x1="1" y1="0.1433"> 
 
     <stop stop-color="rgb(255, 213, 127)" offset="0" /> 
 
     <stop stop-color="rgb(179, 149, 0)" offset="0.4817" /> 
 
     <stop stop-color="rgb(179, 149, 0)" offset="1" /> 
 
    </linearGradient> 
 
    </defs> 
 
    <text font-family="arial" font-size="40" id="svg_1" y="45" x="288" fill="url(#grad2)" font-weight="bold"> 
 
    <tspan x="10" y="45">JANDUS TECHNOLOGIES</tspan> 
 
    </text> 
 
</svg>

來源

2015-04-15 09:22:10

回答

相關問題