So check it out. Take a bland, normal looking web page (first 
attachment), and then go mental with CSS (second attachment). Makes 
quite a difference, eh?

Yeah, I know, there's hardly anything ground-breaking in here. But if 
you look at my old website, it's all very HTML 2.0. I used CSS to make 
the background green instead of white, but that's about it. All the 
other formatting is just the browser's defaults. But with a little 
imagination, it seems you can make a page look significantly more 
interesting.

(I got bored before I got as far as styling the body text and so forth...)

Post a reply to this message

Attachments:
Download 'css0.png' (6 KB) Download 'css1.png' (38 KB)

Preview of image 'css0.png'

Preview of image 'css1.png'

On 21/09/2010 01:50 PM, Invisible wrote:

> Yeah, I know, there's hardly anything ground-breaking in here.

I'm particularly pleased with how I managed to insert chevrons *between* 
the links, but not before or after them. That look some figuring out.

(The trick is to do :before {content: " > ";} and then do 
:first-child:before {content: "Navigation: ";}. You can even put 
additional styling in there; I've put "Navigation" in bold, for example.)

Irritatingly, what you *cannot* do is content: " → ". This is 
extremely frustrating, and currently I cannot find any way around this flaw.

> But if
> you look at my old website, it's all very HTML 2.0. I used CSS to make
> the background green instead of white, but that's about it.

http://www.orphi.me.uk/

Amusingly, if you click on the validator icons, the CSS validator has 
moved to another URL so it doesn't work, and the HTML validator no 
longer accepts my pages (which validated perfectly when I tested it a 
few years ago). Nice how what were perfectly valid pages a year or two 
ago are now no longer considered valid, eh? :-P

Post a reply to this message

And lo On Tue, 21 Sep 2010 13:57:13 +0100, Invisible <voi### [at] devnull> did  
spake thusly:

> On 21/09/2010 01:50 PM, Invisible wrote:
>
>> Yeah, I know, there's hardly anything ground-breaking in here.
>
> I'm particularly pleased with how I managed to insert chevrons *between*  
> the links, but not before or after them. That look some figuring out.
>
> (The trick is to do :before {content: " > ";} and then do  
> :first-child:before {content: "Navigation: ";}. You can even put  
> additional styling in there; I've put "Navigation" in bold, for example.)
>
> Irritatingly, what you *cannot* do is content: " → ". This is  
> extremely frustrating, and currently I cannot find any way around this  
> flaw.

content: "\2192" use the escaped hex value.

-- 
Phil Cook

--
I once tried to be apathetic, but I just couldn't be bothered
http://flipc.blogspot.com

Post a reply to this message

>> Irritatingly, what you *cannot* do is content: " → ". This is
>> extremely frustrating, and currently I cannot find any way around this
>> flaw.
>
> content: "\2192"

Oh God, you *are* kidding me, right?? o_O

Post a reply to this message

Le 21/09/2010 16:19, Invisible a écrit :
>>> Irritatingly, what you *cannot* do is content: " → ". This is
>>> extremely frustrating, and currently I cannot find any way around this
>>> flaw.
>>
>> content: "\2192"
> 
> Oh God, you *are* kidding me, right?? o_O

content: is not reparsed by the engine, so no entities would be
substituted, but that should not stop you to encode the right char.

Give it a try.
(U+2192 is unicode for → )
Of course, your font must support it...

Post a reply to this message

>>> content: "\2192"
>>
>> Oh God, you *are* kidding me, right?? o_O
>
> content: is not reparsed by the engine, so no entities would be
> substituted, but that should not stop you to encode the right char.

Yeah. I already discovered that you can't use it to insert any new tags 
either. (I guess if you could, it would be a macro expansion engine...)

> Give it a try. (U+2192 is unicode for→ )

Cool. So now I have to memorise character codes. Yay. :-(

> Of course, your font must support it...

Yeah, well, that's always entertaining. ;-)

(The again, I've installed a pack of MathML fonts, so it's usually OK.)

Post a reply to this message

OK, wanna see something weird?

   line-height: 100%;

You'd think this sets the line height to its default value. You'd be 
wrong. As best as I can tell, the default hight (for Firefox) is 120%. 
And, as far as I can tell from the W3C spec, this default value is 
allowed to vary arbitrarily for each browser.

Yay, that's useful! :-/

Post a reply to this message

Invisible escreveu:
> On 21/09/2010 01:50 PM, Invisible wrote:
> 
>> Yeah, I know, there's hardly anything ground-breaking in here.
> 
> I'm particularly pleased with how I managed to insert chevrons *between* 
> the links, but not before or after them. That look some figuring out.
> 
> (The trick is to do :before {content: " > ";} and then do 
> :first-child:before {content: "Navigation: ";}. You can even put 
> additional styling in there; I've put "Navigation" in bold, for example.)

I was thinking about how you managed that one.
Guess I'm missing latest CSS goodies, cause I've not heard of "content:" 
before...

-- 
a game sig: http://tinyurl.com/d3rxz9

Post a reply to this message

>> I'm particularly pleased with how I managed to insert chevrons
>> *between* the links, but not before or after them. That look some
>> figuring out.
>
> I was thinking about how you managed that one.

I was beginning to think it wouldn't be possible. I could put one in 
front of *every* link, or after *every* link, but not *between* links 
only. It took some tweaking to get it to work. (There is a :first-child 
selector, but no :last-child selector, crucially enough...)

> Guess I'm missing latest CSS goodies, cause I've not heard of "content:"
> before...

I read about the "content:" property way, waaaaaay back in 1998 or so. 
The idea is that, in combination with the ":before" and ":after" 
psuedo-element selectors and the automatic counters, you're supposed to 
be able to do things like automatically number section headings, like 
TeX does.

Of course, reading about this, I was very excited, and immediately went 
to try it out. But, as it turns out, neither Netscape nor IE took any 
notice of these properties at all. I promptly forgot all about them, 
since they don't work.

(In a similar vein, it's supposed to be possible to add drop shadows to 
text and so on. That didn't work either.)

Fast forward 10 years, and it seems these funky features are actually 
*implemented* now. (I didn't bother to check whether IE supports it - 
mainly since I don't give a damn.)

I have no idea whether the drop shadows work now. I don't even remember 
the property names...

-- 
http://blog.orphi.me.uk/
http://www.zazzle.com/MathematicalOrchid*

Post a reply to this message

Le 21/09/2010 21:21, Orchid XP v8 nous fit lire :

> I have no idea whether the drop shadows work now. I don't even remember
> the property names...
> 
It does... for some browsers.
And round corners too... also for some.

Post a reply to this message