需要帮助才能在头部和按钮上获得效果

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); 
} 

这应该足以让你开始。