![](/i/fill.gif) |
![](/i/fill.gif) |
|
![](/i/fill.gif) |
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
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'
![css0.png](/povray.off-topic/attachment/%3C4c98aa10%241%40news.povray.org%3E/css0.png?preview=1)
Preview of image 'css1.png'
![css1.png](/povray.off-topic/attachment/%3C4c98aa10%241%40news.povray.org%3E/css1.png?preview=1)
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
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
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
And lo On Tue, 21 Sep 2010 13:57:13 +0100, Invisible <voi### [at] dev null> 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
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
>> 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
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
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
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
>>> 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
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
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
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
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/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
>> 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
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
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
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |