Question

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?

Answer 1

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