1. 首頁
  2. 問答
  3. 寬度約束的徑向CSS漸變？

寬度約束的徑向CSS漸變？

2010-12-22 139 views
4

這裏是按鈕梯度我試圖建立與剛剛CSS漸變：寬度約束的徑向CSS漸變？

alt text

這通常是很容易做到，但你可以看到，頂部的梯度看起來更像一個大的修剪徑向漸變，因爲它在中間稍稍下沉，並且不會一直延伸到邊緣。

那麼，任何想法如何將這與CSS拉？

來源

2010-12-22 Shpigford

回答

6

在CSS中的徑向背景中心不能位於外它的容器中，但是可以通過一個子元件定位與梯度抵消徑向背景。基本上你正在尋找做這樣的事情：

gradient

，接近simshaun的優秀的解決方案。但是，因爲我愛，我想嘗試用零額外的標記什麼挑戰，我想出了這個：

alt text

http://jsfiddle.net/xB4DU/

其中涉及相當接近你，以零額外的標記解決方案。這只是一個帶有陰影的線性漸變，可以減弱按鈕的左側和右側邊緣。

來源

2010-12-24 00:34:42 Duopixel

+0

+1無額外標記。 – prodigitalson 2010-12-24 02:17:00

1

不是完整的答案，但這可能會有用。

http://css-tricks.com/css3-gradients/

克里斯這裏有一個例子：

http://css-tricks.com/examples/CSS3Gradient/

具有徑向梯度。這是使用CSS3和舊版瀏覽器可能不支持的瀏覽器特定實現。

否則，我不知道如何在不使用圖像的情況下關閉此功能。

希望這會有所幫助。

鮑勃

來源

2010-12-22 22:11:09 rcravens

+0

如果你決定走這條路。我只是發現這個很酷的工具來嘗試各種徑向漸變選項。 http://www.westciv.com/tools/radialgradients/index.html – rcravens 2010-12-22 22:13:15

1

只是踢我把這個在一起，但誰知道它會做的鍍鉻外。我從來沒有玩過徑向漸變，但這很有趣 - 我想也許我的（可怕的）CSS可以爲您的項目提供一些啓發。

CSS：

#button { 
display: table; 
-moz-border-radius: 5px; 
border-radius: 5px; 
margin: 50px auto; 
padding: 10px; 
background: 
    -webkit-gradient(radial, 50% -200%, 180, 50% -110%, 35, from(#f81499), to(#fff), color-stop(.7,#f81499)); 
color: #fff; 
text-shadow: 0px -1px 0 rgba(0,0,0,.25); 
font-family: "droid sans", sans-serif; 
font-size: 13px; 
-webkit-box-shadow: 0px 1px 0px rgba(0,0,0,0.25);

}

HTML：

<html> 
<head> 
    <title></title> 
    <link type="text/css" href="test.css" rel="stylesheet" /> 
</head> 
<body> 
    <div id="button">Upgrade for more</div> 
</body> 
</html>

來源

2010-12-22 22:19:13

4

這肯定會採取一些調整，使它看起來在不同瀏覽器的權利（這我還沒有真正完成） ：

CSS

.upgrade { 
    background: #FF3397; 
    color: #FFF; 
    float: left; 
    height: 30px; 
    line-height: 30px; 
    position: relative; 
    text-align: center; 
    width: 160px; 

    -webkit-box-shadow: 0px 0px 3px #999; 
    -moz-box-shadow: 0px 0px 3px #999; 
    box-shadow: 0px 0px 3px #999; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    text-shadow: 1px -1px 3px #E60071; 
    filter: dropshadow(color=#666, offx=2, offy=-2); 

    font-family: Verdana, Sans-Serif; 
    font-size: 12px; 
    font-weight: bold; 
} 

.upgrade span { 
    background-image: -moz-radial-gradient(50% 50% 90deg,ellipse contain, #FFFFFF, rgba(255, 255, 255, 0)); 
    background-image: -webkit-gradient(radial, 50% -50%, 51, 50% 0, 110, from(#FFFFFF), to(rgba(255, 255, 255, 0))); 
    display: block; 
    height: 100px; 
    left: -50px; 
    position: absolute; 
    top: -70px; 
    width: 260px; 
    z-index: 1; 
} 
.upgrade div { 
    z-index 2; 
}

HTML

<div class="upgrade"><span></span><div>Upgrade for more</div></div>

http://jsfiddle.net/AvkTH/3/

來源

2010-12-22 22:27:24 simshaun

+0

適用於FF 3.6 Mac :-) – prodigitalson 2010-12-22 22:30:29

相關問題

 相關問題