1

Design I need to convert to markup / css

Given the above dynamically generated text (meaning that I can't just use an image), I am trying to recreate the design using just html and css selectors.

I would like to just use a single h4 with the containing text, but am open to other solutions. I would prefer to not use absolute positioning, but again, if that is the only way, then so be it.

I have tried surrounding with span tags, but those are inline elements that don't have an inherent width.

The h4 will be nested within a div, though not always of the same class or id.

Any ideas or resources to get me started?

4

2 回答 2

2

Check out how they do the text underneath Contact me on this form. Pretty clean and simple. http://www.onextrapixel.com/examples/html5-css3-contact-form/

Here is the actual CSS that does it:

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 */
}

Sorry for yet another edit, but here is an explanation. h1 { ... } styles the actual text, so "Event Schedule" for you, and h1:before { ... } does the cool line effect. h1:after { ...} does the ampersand, so this is actually where you would put your text i suppose

于 2012-06-11T22:16:21.150 回答
1

您可以做的是用 a 包装您的文本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/

于 2012-06-11T22:30:39.757 回答