Den 2017-04-03 20:46, skrev "Kent Karlsson" <kent.karlsson14_at_telia.com>:
>
> Den 2017-04-03 19:51, skrev "markus.icu_at_gmail.com" <markus.icu_at_gmail.com>:
>
>> > It seems to me that higher-level layout (e.g, HTML+CSS) is appropriate for
>> the
>> > board layout (e.g., via a table), board frame style, and cell/field
>> shading.
>> > In each field, the existing characters should suffice.
>> >
>> > markus
>
> True, and one can easily find an example online.
>
> Slightly modified from
> http://stackoverflow.com/questions/18505921/chess-using-tables
>
> [...]
>
A bit more modification: more colourful, even with /// striped backgrounds.
One disadvantage
is that the "white" pieces interior get the background colour rather than
being actually white.
To get them actually white (not just the interiors, but the entire pieces),
use the "black"(!) pieces,
and (via CSS) colour them white (need to be set on a non-white background to
be visible...).
I know, the latter trick will make parsing even more tricky (needing to
interpret not only the
HTML tag markup and chess characters, but also (say) HTML class attribute to
distinguish "white"
from "black" pieces).
And, parsing (for other things than display in a browser), will be quite
sensitive to the exact
way of expressing this in HTML. There are many quite different ways of
expressing this
in HTML (+CSS).
But... with a bit of JavaScript savvyness, you can program moving the pieces
around... ;-) And
substitute the chess characters to more emoji style images of chess
pieces... Still in ;-) mode.
<html>
<head>
<style>
a {
color: #f00;
display: block;
font-size: 24px;
height: 32px;
width: 32px;
position: relative;
text-decoration: none;
text-shadow: 0 1px #fff;
}
a.white { color: #0ff; }
#chess_board { border: 2px solid #333; }
#chess_board td {
background: #ffa;
background: -moz-linear-gradient(top, #ffa, #eea);
background: -webkit-gradient(linear,0 0, 0 100%, from(#ffa), to(#eea));
box-shadow: inset 0 0 0 1px #ffa;
-moz-box-shadow: inset 0 0 0 1px #ffa;
-webkit-box-shadow: inset 0 0 0 1px #ffa;
height: 32px;
width: 32px;
text-align: center;
vertical-align: middle;
}
#chess_board tr:nth-child(odd) td:nth-child(even),
#chess_board tr:nth-child(even) td:nth-child(odd) {
/*background: #acc;
background: -moz-linear-gradient(top, #acc, #aee);
background: -webkit-gradient(linear,0 0, 0 100%, from(#acc), to(#aee));*/
background: repeating-linear-gradient(
-45deg,
#a0adbc,
#a0adbc 2px,
#465298 2px,
#465298 4px
);
box-shadow: inset 0 0 10px rgba(0,0,0,.4);
-moz-box-shadow: inset 0 0 10px rgba(0,0,0,.4);
-webkit-box-shadow: inset 0 0 10px rgba(0,0,0,.4);
}
</style>
</head>
<body>
<table id="chess_board" cellpadding="0" cellspacing="0">
<tr>
<td id="A8">♜</td>
<td id="B8">♞</td>
<td id="C8">♝</td>
<td id="D8">♛</td>
<td id="E8">♚</td>
<td id="F8">♝</td>
<td id="G8">♞</td>
<td id="H8">♜</td>
</tr>
<tr>
<td id="A7">♟</td>
<td id="B7">♟</td>
<td id="C7">♟</td>
<td id="D7">♟</td>
<td id="E7">♟</td>
<td id="F7">♟</td>
<td id="G7">♟</td>
<td id="H7">♟</td>
</tr>
<tr>
<td id="A6"></td>
<td id="B6"></td>
<td id="C6"></td>
<td id="D6"></td>
<td id="E6"></td>
<td id="F6"></td>
<td id="G6"></td>
<td id="H6"></td>
</tr>
<tr>
<td id="A5"></td>
<td id="B5"></td>
<td id="C5"></td>
<td id="D5"></td>
<td id="E5"></td>
<td id="F5"></td>
<td id="G5"></td>
<td id="H5"></td>
</tr>
<tr>
<td id="A4"></td>
<td id="B4"></td>
<td id="C4"></td>
<td id="D4"></td>
<td id="E4"></td>
<td id="F4"></td>
<td id="G4"></td>
<td id="H4"></td>
</tr>
<tr>
<td id="A3"></td>
<td id="B3"></td>
<td id="C3"></td>
<td id="D3"></td>
<td id="E3"></td>
<td id="F3"></td>
<td id="G3"></td>
<td id="H3"></td>
</tr>
<tr>
<td id="A2">♙</td>
<td id="B2">♙</td>
<td id="C2">♙</td>
<td id="D2">♙</td>
<td id="E2">♙</td>
<td id="F2">♙</td>
<td id="G2">♙</td>
<td id="H2">♙</td>
</tr>
<tr>
<td id="A1">♖</td>
<td id="B1">♘</td>
<td id="C1">♗</td>
<td id="D1">♕</td>
<td id="E1">♔</td>
<td id="F1">♗</td>
<td id="G1">♘</td>
<td id="H1">♖</td>
</tr>
</body>
</html>
Received on Mon Apr 03 2017 - 16:25:19 CDT
This archive was generated by hypermail 2.2.0 : Mon Apr 03 2017 - 16:25:19 CDT