Re: [css-d] Hidden HRs
Definitely. Trial case for lettering jQuery plugin. Apology for not looking deep enough before asking, especially since the answer was one click away. Many thanks, Philip. Though it was not until I read Dave's post here http://daverupert.com/2010/09/lettering-js/ when I got the reason for doing this at all. pozdrawiam, Tomasz Borek __ 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/
Re: [css-d] Hidden HRs
Tomasz Borek wrote:
> What actually puzzles me is why would that site creator have different
> classes (char1, char2, ...) for characters in each letter in "Cowpoke's".
> Including the '.
>
> The only styling he uses is margin-right, like:
>
> h1 .char2 { /* try also char5 and char8 */
> margin-right: -6px; /* the amount here differs */
> }
>
> I mean, wouldn't it be better to use some appropriate font?
Do you not feel that the rationale is adequately explained here ?
http://blog.typekit.com/2011/01/06/type-study-an-example-of-lettering-js/
Philip Taylor
__
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/
Re: [css-d] Hidden HRs
What actually puzzles me is why would that site creator have different
classes (char1, char2, ...) for characters in each letter in "Cowpoke's".
Including the '.
The only styling he uses is margin-right, like:
h1 .char2 { /* try also char5 and char8 */
margin-right: -6px; /* the amount here differs */
}
I mean, wouldn't it be better to use some appropriate font?
pozdrawiam,
Tomasz Borek
__
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/
Re: [css-d] Hidden HRs
On 24/08/2011 4:54 AM, Claude Needham wrote:
On Tue, Aug 23, 2011 at 9:47 AM, Jukka K. Korpela 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
..., with such background set on the and with
suitable padding (and solid color background) on the.
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 #00;
text-align: center;
width: 80%;
margin-left: auto;
margin-right: auto;
}
h2 span {
position: relative;
top: .45em;
border-bottom: none;
background: #ff;
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/
Re: [css-d] Hidden HRs
On Tue, Aug 23, 2011 at 9:47 AM, Jukka K. Korpela wrote:
> 23.8.2011 19:30, Philip TAYLOR (Webmaster, Ret'd) wrote:
> But now you gave me an excuse to jump in, because I don't think the trick is
> particularly clever - it's not reliable, as it requires pixel-exact
> settings, and it is difficult to maintain (people tend to forget tricks they
> have used). 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
> ..., with such background set on the and with
> suitable padding (and solid color background) on the .
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 #00;
text-align: center;
width: 80%;
margin-left: auto;
margin-right: auto;
}
h2 span {
position: relative;
top: .45em;
border-bottom: none;
background: #ff;
padding-left: 1em;
padding-right: 1em;
}
Regards,
Claude Needham
__
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/
Re: [css-d] Hidden HRs
23.8.2011 19:30, Philip TAYLOR (Webmaster, Ret'd) wrote: Chetan Crasta wrote: Using Firebug, this is what I found: The "two" lines is actually a bottom border on the h1. The p element is relatively positioned to overlap the bottom part of the h1. A background color is set on the p to prevent the border from being seen over the letters. Clever ! Clever coding, and even cleverer detective work. I was still instigating when Chetan published the solution. I know the feeling... I had discovered the solution (after using Firefox Web Developer Extension, Edit CSS function, setting the background of the element with the text to none) when I noticed that a solution has been posted. :-( But now you gave me an excuse to jump in, because I don't think the trick is particularly clever - it's not reliable, as it requires pixel-exact settings, and it is difficult to maintain (people tend to forget tricks they have used). 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 ..., with such background set on the and with suitable padding (and solid color background) on the . -- Yucca, http://www.cs.tut.fi/~jkorpela/ __ 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/
Re: [css-d] Hidden HRs
Thanks for the replies. Yes, it's quite clever coding! On Tue, Aug 23, 2011 at 9:42 PM, thameera...@gmail.com < thameera...@gmail.com> wrote: > In this page -> http://trentwalton.com/examples/cowpoke/ > how has the designer introduced two lines on both sides of 'wide brim > hats'? > I don't seem to understand how it is done. :S > -- Sent from my iPad http://twitter.com/thameera http://thameera.wordpress.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/
Re: [css-d] Hidden HRs
Chetan Crasta wrote: > Using Firebug, this is what I found: > > The "two" lines is actually a bottom border on the h1. The p element is > relatively positioned to overlap the bottom part of the h1. A background > color is set on the p to prevent the border from being seen over the > letters. Clever ! Clever coding, and even cleverer detective work. I was still instigating when Chetan published the solution. Philip Taylor __ 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/
Re: [css-d] Hidden HRs
Using Firebug, this is what I found: The "two" lines is actually a bottom border on the h1. The p element is relatively positioned to overlap the bottom part of the h1. A background color is set on the p to prevent the border from being seen over the letters. Regards, Chetan Crasta __ 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/
[css-d] Hidden HRs
In this page -> http://trentwalton.com/examples/cowpoke/ how has the designer introduced two lines on both sides of 'wide brim hats'? I don't seem to understand how it is done. :S __ 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/
