如何使用CSS渐变创建像这样的“闪亮”效果?
是否可以仅使用CSS创建以下内容?如何使用CSS渐变创建像这样的“闪亮”效果?
我所创建的容器和圆角。小提琴here。
但我不知道如何获得轻微的闪亮效果。有没有可能在CSS中做到这一点?如果是这样如何?
以下是我迄今为止编写的代码。
HTML
<div id="phone-outer">
<div id="phone-inner">
</div>
</div>
CSS
#phone-outer {
margin-bottom:200px;
margin:0 auto;
width:400px;
height:500px;
background-color:#333;
-webkit-border-bottom-right-radius:25px;
-webkit-border-bottom-left-radius:25px;
-moz-border-radius-bottomright:25px;
-moz-border-radius-bottomleft:25px;
border-bottom-right-radius:25px;
border-bottom-left-radius:25px;
}
#phone-inner {
margin:0 auto;
background-color:#FFF;
width:360px;
height:460px;
}
足够接近,我希望:
#phone-outer {
border: 1px solid #FFFFFF;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
box-shadow: 0 3px 0.7px 1px #777777, 0 -7px rgba(0, 0, 0, 0.4) inset;
height: 500px;
width: 400px;
margin: 0 auto;
background-image: linear-gradient(right, #111 11%, #333 56%);
background-image: -o-linear-gradient(right, #111 11%, #333 56%);
background-image: -moz-linear-gradient(right, #111 11%, #333 56%);
background-image: -webkit-linear-gradient(right, #111 11%, #333 56%);
background-image: -ms-linear-gradient(right, #111 11%, #333 56%);
background-image: gradient(right, #111 11%, #333 56%);
}
非常感谢。这很好用!我做了一些调整,比如删除这行'border:1px solid #FFFFFF;'并调整'box-shadow'的值。现在看起来很好。再次感谢:) – Isuru 2013-02-13 15:13:05
@KBN不错的工作。 – 2014-11-27 10:36:15
玩弄这一点http://www.colorzilla.com/gradient-editor/,你也许能够想办法的。然而,背景图像会更容易。任何你不能只使用这个图像的理由?
我有几个表单控件进入白色区域。如果我使用图片,当浏览器调整大小时,图片会在控件位于同一位置时移动。这是为了水平布局。早些时候用类似的方法解决了很多麻烦。再加上这个网站已经有很多大的图片了。我试图保持图像的使用最小化,以挤出一些表现。 – Isuru 2013-02-13 13:15:19
是的,你可以使用box-shadow属性,
box-shadow:0px 0px 0px 3px #666;
更新小提琴是在这里:
UPDATE:
对于您可以使用边界:
更新提琴:
如果您正在寻找微妙的渐变发光,这样的事情应该这样做:
background:#222 -webkit-radial-gradient(20% 80%, 60% 60%, rgba(255,255,255,.15), rgba(255,255,255,0));
这是WebKit的,可以申请取决于-moz和-o等效您支持表。
您还可以添加多个盒子阴影创建黑影为好,这样的:
box-shadow:0px 2px .7px 1px #777, inset 0 -7px rgba(0,0,0,.4);
这里是一个演示:http://jsbin.com/opinaj/4
非常感谢,大卫。 :)这工作得很好,但只在Chrome中。我尝试添加背景:#222 -webkit-radial-gradient(20%80%,60%60%,rgba(255,255,255,.15),rgba(255,255,255,0));''带有'-moz- '和'-o',但它们在Firefox和Opera中不起作用。 – Isuru 2013-02-13 15:14:30
@Isuru FF和Opera有不同的渐变语法,您可以在这里阅读其中的一些内容(只需将Google自己添加到其他文档中):https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_gradients – David 2013-02-13 15:17:56
谢谢, 大卫。会做:) – Isuru 2013-02-13 17:03:40
我不够好,用渐变来正确回答,但你可能想尝试一个大的径向渐变,使用rgba颜色来创建半透明的白色阴影,这是重新定位,使其大部分都落后白色区域。 – 2013-02-13 13:13:21
谢谢。我会试一试。我对基本的CSS没问题,但渐变对我来说也一直是个难题。 – Isuru 2013-02-13 13:36:11
和一些灵感! HTTP:// tjrus。com/iphone :) – 2013-02-13 13:47:50