On 24/08/2011 4:54 AM, Claude Needham wrote:
On Tue, Aug 23, 2011 at 9:47 AM, Jukka K. Korpela<jkorp...@cs.tut.fi> wrote:
It would probably be more robust to use a background image that
consists of a horizontal line, positioning it suitably using the em unit, so
that the position gets adjusted by font size. What I mean is
<p><span>...</span></p>, with such background set on the<p> and with
suitable padding (and solid color background) on the<span>.
Jukka, hopefully that is not a background-image containing a URL since
gradients are far superior.
I thought the lines were a fun idea.
But, also had some misgivings about how robust this particular solution was.
I've tried the following and found it fairly stable in the half-dozen
browsers I tested it in. I live in a zero bar geography so no mobile
tests at the moment.
h2 {
border-bottom: 2px solid #000000;
text-align: center;
width: 80%;
margin-left: auto;
margin-right: auto;
}
h2 span {
position: relative;
top: .45em;
border-bottom: none;
background: #ffffff;
padding-left: 1em;
padding-right: 1em;
}
Regards,
Claude Needham
No need to add extra elements or position: relative or borders (unless
you want to support 1E9-).
Going to the original page.
http://trentwalton.com/examples/cowpoke/
Replace the style declarations for h1#company and p#tagline with this
CSS based in ems. I do expect it to work consistently.
h1#company {
font-size: 4em;
text-transform: uppercase;
font-weight: normal;
}
#tagline{
font-size: 2em;
background-color:#fefee8;
font-style: italic;
margin-bottom: 0.7em;
background: url(line-background-for-ie9876.jpg) center;
background: -webkit-linear-gradient(left, #fefee8, #fefee8),
-webkit-linear-gradient(left, black, black);
background: -moz-linear-gradient(left, #fefee8, #fefee8),
-moz-linear-gradient(left, black, black);
background: -ms-linear-gradient(left, #fefee8, #fefee8),
-ms-linear-gradient(left, black, black);
background: -o-linear-gradient(left, #fefee8, #fefee8),
-o-linear-gradient(left, black, black);
background: linear-gradient(to right, #fefee8, #fefee8),
linear-gradient(to right, black, black);
background-size: 7em 2em, 100% 0.07em;
background-position: center, center 0.7em;
background-repeat: no-repeat;
}
I call this technique, 'block color gradients'. Here is a demo showing
how it works.
http://css-class.com/test/css/3/gradients/gradient-art.htm
--
Alan Gresley
http://css-3d.org/
http://css-class.com/
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
