需要幫助才能在頭部和按鈕上獲得效果

Question

我想要爲樣機的頭部獲得一定的效果。它有幾乎不明顯的白光。你會在這幅圖中看到我提供的標題和子標題。我怎樣才能獲得與CSS發光效果？我確實有一個標題，但整個標題使用圖像是一個好主意嗎？另外我想要這些字幕附近的兩行。是否可以對這些行進行編碼？最後，按鈕「現在訂購」，這將是可能使用CSS或我應該只使用一個圖像，並鏈接它？

樣機

的jsfiddle - http://jsfiddle.net/ezdr3xdg/1/ [我目前有]

<header> 
    <h1>Taffies Cupcakes</h1> 
    <h2>Fresh and tasty</h2> 
</header> 



body{ 
    background-color:#e7d2c9; 
} 

header h1{ 
    font-family:georgia; 
    font-size:46px; 
    color:#784f3d; 
    text-align:center; 
    margin-top:50px; 
} 

header h2{ 
    font-family:segoe script; 
    font-size:32px; 
    color:#846a5f; 
    text-align:center; 
} 

Answer 1

所有這些都可以在CSS 3中完成，但我不會推薦它。如果您希望它在所有瀏覽器中看起來都一樣，那麼使用按鈕和標題的圖像是最好的辦法。如果你想這樣做的CSS反正試試這個：

HTML：

<header> 
    <div class="shadow"></div> 
    <h1>Taffies Cupcakes</h1> 
    <h2><div class="line"></div>Fresh and tasty<div class="line"></div></h2> 
</header> 

CSS：

header > .shadow { 
    width: 0px; 
    height: 0px; 
    margin: 0px 50%; 
    box-shadow: 0px 0px 200px 100px white; 
} 
header h2 > .line { 
    height: 1px; 
    width: 100px; 
    margin: 5px 20px; 
    background-color: #846a5f; 
    display: inline-block; 
    vertical-align: middle; 
} 

至於其他的答案也提到，radial-gradient可能是去這裏的路。只要將它應用到header元素上，而不是使用我的版本和box-shadow（對某些人來說可能有些不好意思）。

更新按鈕：

HTML：

<button class="special"><div class="icon"></div><div class="headline">ORDER NOW</div><div class="description">We deliver in 24 hours</div></button> 

CSS：

button.special { 
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #784f3d), color-stop(1, #846a5f)); 
    background:-moz-linear-gradient(center top, #784f3d 5%, #846a5f 100%); 
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#784f3d', endColorstr='#846a5f'); 
    background-color:#784f3d; 
    color: #e7d2c9; 
    text-align: left; 
    border: 0; 
    outline: 0; 
    border-radius: 5px; 
    height: 42px; 
} 
button.special > .icon { 
    width: 27px; 
    height: 27px; 
    /*background-image: url('triangle-button.png')*/ 
    position: absolute; 
    margin: 5px; 
} 
button.special > .headline { 
    margin-left: 42px; 
    font-size: 18px; 
} 
button.special > .description { 
    margin-left: 42px; 
    font-size: 12px; 
} 

http://jsfiddle.net/ezdr3xdg/17/

Answer 2

使用CSS radial-gradient()

DEMO 1:

body { 
height: 100vh; 
background-color: #e7d2c9; 
background-image: -webkit-radial-gradient(center top, ellipse farthest-corner, #fff 0%, #e7d2c9 50%); 
} 

DEMO 2:

body{ 
    height:100vh; 
    background-color:#e7d2c9; 
    background-image: -webkit-radial-gradient(center top, ellipse farthest-corner, #fff 0%, #e7d2c9 100%); 
} 

DEMO 3:

body { 
    height: 100vh; 
    background-color: #e7d2c9; 
    position:relative; 
} 
body:after { 
content: ''; 
position: absolute; 
left: 50%; 
top: -150px; 
margin-left: -100px; 
width: 200px; 
height: 200px; 
border-radius: 50%; 
    z-index:-1; 
background: rgba(255, 255, 255, 0.42); 
box-shadow: 0 0 40px 64px rgba(255, 255, 255, 0.42); 
} 

Answer 3

我有各種各樣的起始模板更新您的jsfiddle。它的CSS＃漸變和邊框半徑。http://jsfiddle.net/ezdr3xdg/7/

按鈕：

<div id="order_now"> 
<div id="triangle-right"></div> 
<div id="text"> 
ORDER NOW 
<div id="sub_order">we deliver in 24hours</div> 
</div> 
</div> 

CSS： 的按鈕：

#order_now{ 
    background: linear-gradient(#846a5f, brown); 
    width: 200px; 
    border-radius: 5px; 
    padding: 5px; 
    color: white; 
    font-size: 12pt; 
    font-weight: bold; 
} 
#sub_order{ 
    font-size: 10pt; 
    font-style: italic; 
} 

#triangle-right { 
width: 0; 
height: 0; 
border-top: 25px solid transparent; 
border-left: 50px solid white; 
border-bottom: 25px solid transparent; 
display: inline-block; 
} 

#text{ 
    display: inline-block; 
} 

背景：

body{ 
    background:linear-gradient(to right, red, blue, red); 
} 

這應該足以讓你開始。