鉴于以上动态生成的文本(意味着我不能只使用图像),我试图仅使用html和css选择器重新创建设计。
我想只使用包含文本的单个h4
,但我对其他解决方案持开放态度。我宁愿不使用绝对定位,但同样,如果这是唯一的方法,那就这样吧。
我尝试使用span
标记,但这些是没有固有宽度的内联元素。
h4
将嵌套在div
中,但并不总是具有相同的类或ID。
让我开始的任何想法或资源?
答案 0 :(得分:2)
查看他们如何处理下面的文本在此表单上与我联系。非常干净简单。 http://www.onextrapixel.com/examples/html5-css3-contact-form/
以下是执行此操作的实际CSS:
h1 {
font-family: 'Questrial', Verdana, sans-serif;
text-align:center;
font-size:40px;
padding:0;
margin:0 0 20px 0;
position:relative;
color:#8C8C8C;
}
/** have a nice ampersand **/
h1:after {
font-size:25px;
color:#D6CFCB;
content: '&';
text-align:center;
display:block;
width:100%;
font-family: 'Alice', Verdana, serif;
text-shadow: 0px 1px 0px #fff;
}
/** create the gradient bottom **/
h1:before {
position:absolute;
bottom:15px;
content: ' ';
text-align:center;
display:block;
height:2px;
width:100%;
background: linear-gradient(left, rgba(255,255,255,0) 0%,rgba(182,180,180,0.7) 42%,rgba(180,178,178,0) 43%,rgba(168,166,166,0) 50%,rgba(180,178,178,0) 57%,rgba(182,180,180,0.7) 58%,rgba(238,237,237,0.3) 90%,rgba(255,255,255,0) 100%); /* W3C */
}
很抱歉还有另一个编辑,但这是一个解释。 h1 {...}为实际文本设置样式,因此“事件计划”为你,而h1:在{...}之前执行酷线效果。 h1:在{...}之后做&符号,所以这实际上就是你想把你的文字放在哪里
答案 1 :(得分:1)
您可以使用span
包装文本并将其放在容器div
内。
<div id='container'>
<span id='text'>EVENT SCHEDULE</span>
</div>
然后给你的容器border-bottom
并且高度低于你的文字(半尺寸应该给你你想要的效果)。
#container {border-bottom:solid 1px #333; text-align:center; height:10px;}
#text { background:#fff; padding:0 20px; }
您可以在此处查看实时示例:http://jsfiddle.net/vzjxA/13/