[英]How to make gold effect text using CSS3
我想讓我的網頁中的標題文本像金色一樣我不想要這樣的顏色#ffd700
我想要相同的外觀和感覺,就像任何圖形設計師都可以在 Photoshop 中制作金色效果一樣。 在這里,我附上了一個我想要的例子。
您可以使用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>
我知道你想使用 CSS3,但正如你提到的 HTML5,我想在這里發布一個畫布替代品。 如果您使用畫布元素,您將獲得更好的瀏覽器支持。 canvas 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);
您還可以輕松應用其他效果,例如文本陰影。
我用漸變和陰影做了一個例子。 這是 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;
}
它看起來像這樣:
我不是設計師。 所以我很難根據你的需要調整顏色。 但是,您可以在這里測試並調整@codepen - 鏈接
免責聲明:我僅使用 Google Chrome 對其進行了測試。 為了讓它在不同的瀏覽器上工作,如果可能的話,你必須移植-webkit-tricks-...
。
根據評論和更多漸變效果進行編輯。
免責聲明
這僅(目前)在 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>
為了使其以更跨瀏覽器的方式“工作”,我(一次)不得不建議為此使用圖像:(
你可以試試這個 css text gold 漸變:
background: #FECA00;
background: -webkit-linear-gradient(to bottom left, #FECA00 38%, #D07800 74%, #FF9300 91%);
background: -moz-linear-gradient(to bottom left, #FECA00 38%, #D07800 74%, #FF9300 91%);
background: linear-gradient(to bottom left, #FECA00 38%, #D07800 74%, #FF9300 91%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
結果:
或者如果你想探索另一個方向,你可以檢查css 文本漸變生成器
使用 css3 中的 text-shadow 屬性來獲得你需要的金色效果。 請參閱http://css3gen.com/text-shadow/以獲得最佳效果。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.