forked from w3c/csswg-drafts
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathvisufx.src
More file actions
317 lines (257 loc) · 10.7 KB
/
Copy pathvisufx.src
File metadata and controls
317 lines (257 loc) · 10.7 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Visual effects</title>
</head>
<body>
<h1 align="center">Visual effects</h1>
<P><em>The visual effects discussed in these sections do not alter layout,
only presentation.</em>
<H2><a name="overflow-clipping">Overflow and clipping</a></H2>
<P>Generally, the content of a block box is confined to the
content edges of the box. In certain cases, a box may <span
class="index-def"
title="overflow|box::overflow"><dfn>overflow</dfn></span>, meaning its
content lies partly or entirely outside of the containing block:</P>
<ul>
<li>Content is too wide for the containing block. This may happen when an
element's <span class="propinst-width">'width'</span> property has a
value that causes the generated block box to spill over
sides of the containing block. An inline replaced element
(e.g., an image) that has a large <span class="index-inst"
title="intrinsic width">intrinsic width</span> may also overflow.
<li>An element's height exceeds an explicit height assigned to the containing
block (i.e., the containing block's height is determined by the <span
class="propinst-height">'height'</span> property, not by content
height).
<li>It is <a href="visuren.html#absolute-positioning">positioned
absolutely</a>.
<li>It has <a href="box.html#margin-properties">negative margins</a>.
</ul>
<p>Whenever overflow occurs, the <span
class="propinst-overflow">'overflow'</span> property specifies how a
box is clipped. The <span class="propinst-clip">'clip'</span> property
specifies the size and shape of the clipping region. Specifying a
small clipping region may cause clipping of otherwise visible
contents.
<H3><a name="overflow">Overflow</a>: the <span
class="propinst-overflow">'overflow'</span> property</H3>
<!-- #include src=properties/overflow.srb -->
<P>This property specifies whether the content of a block-level
element is clipped when it overflows the element's box (which is
acting as a containing block for the content). Values have the
following meanings:</p>
<dl>
<dt><strong>visible</strong>
<dd>This value indicates that content is not clipped, i.e., it
may be rendered outside the block box.
<dt><strong>hidden</strong>
<dd>This value indicates that the content is clipped and that no
scrolling mechanism should be provided to view the content outside the
clipping region; users will not have access to clipped
content. The size and shape of the clipping region is specified
by the <span class="propinst-clip">'clip'</span> property.
<dt><strong>scroll</strong>
<dd>This value indicates that if the user agent supports a visible
scrolling mechanism, that mechanism should be displayed for a box
whether or not any of its content is clipped. This avoids any problem
with scrollbars appearing and disappearing in a dynamic
environment. When this value is specified and the target medium is
'print' or 'projection', overflowing content should be printed.
<dt><strong>auto</strong>
<dd>The behavior of the 'auto' value is user agent-dependent, but
should cause a scrolling mechanism to appear for overflowing boxes.
</dl>
<P> Even if <span class="propinst-overflow">'overflow'</span> is set
to 'visible', content may be clipped to a UA's document window by the
native operating environment.
<div class="example"><P>
Consider the following example, of a block quotation
(BLOCKQUOTE) that is too big
for its containing block (established by a DIV). Here is
the source document:</p>
<PRE class="html-example">
<DIV>
<BLOCKQUOTE>
<P>I didn't like the play, but then I saw
it under adverse conditions - the curtain was up.
<DIV class="attributed-to">- Groucho Marx</DIV>
</BLOCKQUOTE>
</DIV>
</PRE>
<P>Here is the style sheet controlling the sizes and style of the
generated boxes:
<PRE>
DIV { width : 100px; height: 100px;
border: thin solid red
}
BLOCKQUOTE { width : 125px; height : 100px;
position: absolute;
top: 50px; left: 50px;
border: thin dashed black
}
DIV.attributed-to { text-align : right; }
</PRE>
<P>The initial value of <span
class="propinst-overflow">'overflow'</span> is 'visible', so
the BLOCKQUOTE would be formatted without clipping, something like this:</P>
<div class="figure">
<P><img src="./images/overflow1.gif" alt="Rendered overflow"></p>
</div>
<P>Setting <span class="propinst-overflow">'overflow'</span> to
'hidden' for the DIV element, on the other hand, causes the
BLOCKQUOTE to be clipped by the containing block:
<div class="figure">
<P><img src="./images/overflow2.gif" alt="Clipped overflow"></p>
</div>
<P>A value of 'scroll' would tell UAs that support
a visible scrolling mechanism to display one so that users
could access the clipped content.
</div>
<H3><a name="clipping">Clipping</a>: the <span
class="propinst-clip">'clip'</span> property</h3>
<p>A <span class="index-def" title="clipping region"><dfn>clipping
region</dfn></span> defines what portion of an element's <a
href="conform.html#rendered-content">rendered content</a> is
visible. By default, the containing block established by the element
acts as the clipping region for the element's content (i.e., the
clipping region has the same size as the containing block). However,
the clipping region dimensions may be modified by the <span
class="propinst-clip">'clip'</span> property.
<!-- #include src=properties/clip.srb -->
<P>Values have the following meanings:</p>
<dl>
<dt><strong>auto</strong>
<dd>The clipping region has the same size and location
as the containing block established by the element.
<dt><span class="index-def" title="<shape>::definition of"><a
name="value-def-shape"
class="value-def"><strong><shape></strong></a></span>
<dd>In CSS2, the only valid <shape> value is:
rect (<span
class="value-inst-top"><top></span> <span
class="value-inst-right"><right></span> <span
class="value-inst-bottom"><bottom></span> <span
class="value-inst-left"><left></span>)
where <span class="value-inst-top"><top></span>, <span
class="value-inst-bottom"><bottom></span> <span
class="value-inst-right"><right></span>, and <span
class="value-inst-left"><left></span> specify offsets from the
respective sides of the box.
<P><span class="index-def" title="<top>::definition of"><a
name="value-def-top" class="value-def"><top></a></span>, <span
class="index-def" title="<right>::definition of"><a
name="value-def-right" class="value-def"><right></a></span>,
<span class="index-def" title="<bottom>::definition of"><a
name="value-def-bottom" class="value-def"><bottom></a></span>,
and <span class="index-def" title="<left>::definition of"><a
name="value-def-left" class="value-def"><left></a></span> may
either have a <span class="value-inst-length"><length></span>
value or 'auto'. Negative lengths are permitted. The value 'auto'
means that a given edge of the clipping region will be the same as the
edge of the element's generated box (i.e., 'auto' means the same as '0'.)
<P> When converted to pixel coordinates, the bottom-right corner is
excluded from the clipping rectangle. This rule is necessary to permit
the definition of zero-width or zero-height rectangles.
</dl>
<P>If the clipping region exceeds the bounds of the UA's
document window, content may be clipped to that window by the
native operating environment.
<div class="example"><P>
The following two rules:</P>
<PRE>
P { clip: rect(5px, 10px, 10px, 5px); }
P { clip: rect(5px, -5px, 10px, 5px); }
</PRE>
<P>will create the rectangular clipping regions delimited
by the dashed lines in the following illustrations:</p>
<div class="figure">
<P><IMG src="images/clip.gif" alt="Two clipping regions"></p>
</div>
</div>
<div class="note"><P>
<em><strong>Note.</strong>
In CSS2, all clipping regions are rectangular. We anticipate
future extensions to permit non-rectangular clipping.
</em>
</div>
<H2><a name="visibility">Visibility</a>: the <span
class="propinst-visibility">'visibility'</span> property</H2>
<!-- #include src=properties/visibility.srb -->
<p>The <span class="propinst-visibility">'visibility'</span> property
specifies whether the boxes generated by an element are
rendered. Invisible boxes still affect layout (set the <span
class="propinst-display">'display'</span> property to 'none' to
suppress box generation altogether). Values have the following
meanings:</p>
<dl>
<dt><strong>visible</strong>
<dd>The generated box is visible.
<dt><strong>hidden</strong>
<dd>The generated box is invisible, but still affects layout.
<dt><strong>collapse</strong>
<dd>Please consult the section on
<a href="tables.html#dynamic-effects">dynamic row and column
effects</a> in tables. If used on elements other than rows or columns,
'collapse' has the same meaning as 'hidden'.
</dl>
<P>This property may be used in conjunction with scripts to create
dynamic effects.
<div class="html-example"><P>
In the following example, pressing either form button invokes a
user-defined script function that causes the corresponding box to
become visible and the other to be hidden. Since these boxes
have the same size and position, the
effect is that one replaces the other.
<pre>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<STYLE type="text/css">
<!--
#container1 { position: absolute;
top: 2in; left: 2in; width: 2in }
#container2 { position: absolute;
top: 2in; left: 2in; width: 2in;
visibility: hidden; }
-->
</STYLE>
</HEAD>
<BODY>
<P>Choose a suspect:</P>
<DIV id="container1">
<IMG alt="Al Capone"
width="100" height="100"
src="suspect1.jpg">
<P>Name: Al Capone</P>
<P>Residence: Chicago</P>
</DIV>
<DIV id="container2">
<IMG alt="Lucky Luciano"
width="100" height="100"
src="suspect2.jpg">
<P>Name: Lucky Luciano</P>
<P>Residence: New York</P>
</DIV>
<FORM method="post"
action="http://www.suspect.org/process-bums">
<P>
<INPUT name="Capone" type="button"
value="Capone"
onclick='show("container1");hide("container2")'>
<INPUT name="Luciano" type="button"
value="Luciano"
onclick='show("container2");hide("container1")'>
</FORM>
</BODY>
</HTML>
</pre>
<P>Note that the <span class="propinst-position">'position'</span>
property of each DIV element has the value 'relative'. A more
visually appealing version of the above might be designed using
overlapping <a href="visuren.html#absolute-positioning">
absolutely positioned</a> boxes.</p>
</div>
</body>
</html>