我正在尝试制作一个超出侧边栏边框的标题,并且有一个阴影图像,使它看起来像是一个书签。
类似的东西: http : //inelmo.com/images/img2.png
现在我尽我所能,但看起来不正确。 这是我的侧边栏和标题的代码我认为应该有效,但事实并非如此。
HTML
<!-- Sidebar --> <aside id="sidebar"> <!-- header div --> <div id="sideProfile"> <!-- Span with image background --> <span id="sideHshadow"></span> </div> </aside>CSS
#sidebar { padding: 15px; width: 400px; } /*Span with shadow image to make it look like a bookmark */ #SideHshadow { height: 6px; width: 12px; margin: 0 0 -6px 0; float: right; background: url("../images/sidebar_header_shadow.png") no-repeat; } #sideProfile { background:#333333; border-bottom: 1px solid #2d2d2d; height: 50px; width: 400px; margin: 0 -12px 0 0; box-shadow: 0 1px 2px #77bee6; -moz-box-shadow: 0 1px 2px #77bee6; -webkit-box-shadow: 0 1px 2px #77bee6; -webkit-border-radius: 7px 7px 0 7px; -khtml-border-radius: 7px 7px 0 7px; -moz-border-radius: 7px 7px 0 7px; border-radius: 7px 7px 0 7px; }任何人都知道如何让它看起来像在例子中? 日Thnx
这是#sideHshadow背景图片文件: http ://inelmo.com/images/sidebar_header_shadow.png
I'm trying to make a header that goes outside the borders of my sidebar and has a shadow image that makes it look like it is a book-mark.
Something similar to this: http://inelmo.com/images/img2.png
Right now I tried my best, but it is not looking correct. here is my code for sidebar and header That I think should work to make this effect, but it isn't.
HTML
<!-- Sidebar --> <aside id="sidebar"> <!-- header div --> <div id="sideProfile"> <!-- Span with image background --> <span id="sideHshadow"></span> </div> </aside>CSS
#sidebar { padding: 15px; width: 400px; } /*Span with shadow image to make it look like a bookmark */ #SideHshadow { height: 6px; width: 12px; margin: 0 0 -6px 0; float: right; background: url("../images/sidebar_header_shadow.png") no-repeat; } #sideProfile { background:#333333; border-bottom: 1px solid #2d2d2d; height: 50px; width: 400px; margin: 0 -12px 0 0; box-shadow: 0 1px 2px #77bee6; -moz-box-shadow: 0 1px 2px #77bee6; -webkit-box-shadow: 0 1px 2px #77bee6; -webkit-border-radius: 7px 7px 0 7px; -khtml-border-radius: 7px 7px 0 7px; -moz-border-radius: 7px 7px 0 7px; border-radius: 7px 7px 0 7px; }Anyone knows how to make it look like in example? Thnx
Here is the #sideHshadow background image file: http://inelmo.com/images/sidebar_header_shadow.png
最满意答案
这是一个纯CSS版本: http : //jsfiddle.net/bcZKh/2/
代码如下:
<div id="list"> <div class="item selected">Nationwide Coverage Area</div> <div class="shadow"></div> </div> body {margin:40px} #list {width:200px;border-radius:8px;min-height:200px;background:#E6E5E0;padding:20px 0;position:relative} .item {color:#fff;font-size:0.8em;line-height:24px;font-family:sans-serif;text-indent:24px;margin-right:-12px;margin-left:-12px;position:relative;z-index:1} .item.selected {background:#C74312;border-radius:4px;border-bottom-left-radius:0} .shadow {border-color:transparent #733411 transparent transparent;border-width:12px;border-style:solid;height:0;width:0;position:absolute;top:32px;left:-24px;z-index:0}Here's a pure CSS version: http://jsfiddle.net/bcZKh/2/
Code below:
<div id="list"> <div class="item selected">Nationwide Coverage Area</div> <div class="shadow"></div> </div> body {margin:40px} #list {width:200px;border-radius:8px;min-height:200px;background:#E6E5E0;padding:20px 0;position:relative} .item {color:#fff;font-size:0.8em;line-height:24px;font-family:sans-serif;text-indent:24px;margin-right:-12px;margin-left:-12px;position:relative;z-index:1} .item.selected {background:#C74312;border-radius:4px;border-bottom-left-radius:0} .shadow {border-color:transparent #733411 transparent transparent;border-width:12px;border-style:solid;height:0;width:0;position:absolute;top:32px;left:-24px;z-index:0}更多推荐
发布评论