Skip to content

Commit 9cbf3a7

Browse files
author
Arron Eicholz
committed
Adding missing file for long description
1 parent bd28bb5 commit 9cbf3a7

1 file changed

Lines changed: 52 additions & 0 deletions

File tree

‎css3-positioning/images/longdesc/rect-inset-desc.html‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Long description for example of clipping region</title>
5+
</head>
6+
<body>
7+
<h1>Long description for example clipping region</h1>
8+
<p>
9+
This diagram illustrates two block boxes, one next to the other, with rectangular
10+
clipping regions of similar dimensions but using the two different value functions
11+
and producing the same visual result.
12+
</p>
13+
<p>
14+
The block boxes (generated for a P element) are identical and depicted with a dashed
15+
dark gray border and a light gray background.
16+
</p>
17+
<p>
18+
The clipping region of the first box, demonstrating the rect() function, shows the first
19+
P box lies entirely within it, offset 30% from the top edge, 25% from the left edge of
20+
the P box, and 100% from the left edge (representing the right edge) and 70% from the
21+
top edge (representing the bottom edge). The clipping region has a solid border and a
22+
white background and is labeled "clip region".
23+
</p>
24+
<p>
25+
Additionaly the first box has four red arrows representing the four offsets in the
26+
coresponding style rule: one short, vertical arrow labeled "30%" goes from the top edge
27+
of the block box to the top of the clipping region; one longer, vertical arrow labeled
28+
"70%" goes from the top of the block box to the bottom of the clipping region; one
29+
short, horizontal arrow labeled "25%" goes from the left edge of the block box to the
30+
left edge of the clipping region; and one long, horizontal arrow labeled "100%" that
31+
goes from the left edge of the block box to the right edge of the clipping region (which
32+
in this case, is also the right edge fo the block box).
33+
</p>
34+
<p>
35+
The clipping region of the second box, demonstrating the inset() function, shows the
36+
second P box lies entirely within it, offset 30% from the top edge, 25% from the left
37+
edge of the P box, and 0% from the right edge and 30% from the bottom edge. The clipping
38+
region has a solid border and a white background and is labeled "clip region".
39+
</p>
40+
<p>
41+
The second box has three red arrows representing the three of the four offsets in the
42+
coresponding style rule: one short, vertical arrow labeled "30%" goes from the top edge
43+
of the block box to the top of the clipping region; one short, vertical arrow labeled
44+
"30%" goes from the bottom of the block box to the bottom of the clipping region; one
45+
short, horizontal arrow labeled "25%" goes from the left edge of the block box to the
46+
left edge of the clipping region; and the final (right) side of the clipping region is
47+
labled "0%" and is not represented by an arrow since the right edge of the block box and
48+
the right edge of the clipping region are the same.
49+
</p>
50+
<p><a href="../../Overview.html#img-clipping">Return to image.</a></p>
51+
</body>
52+
</html>

0 commit comments

Comments
 (0)