CSS Visual Effects and User Interface
CSS Rendering for HTML – Part 5
Foreword: In this part of the series, I talk about CSS visual effects and user interface.
By: Chrysanthus Date Published: 25 Dec 2015
Introduction
Overflow and Clipping
Generally, the content of a block-level box is confined to the content edges of the box. In certain cases, a box may overflow, meaning its content lies partly or entirely outside of the box. This can happen when:
- A line cannot be broken, causing the line box to be wider than the block box.
- A block-level box is too wide for the containing block. This may happen when an element's 'width' property has a value that causes the generated block box to spill over sides of the containing block.
- An element's height exceeds an explicit height assigned to the containing block (i.e., the containing block's height is determined by its 'height' property, not by content height).
- A descendant box is positioned absolutely, partly outside the box. Such boxes are not always clipped by the overflow property on their ancestors; specifically, they are not clipped by the overflow of any ancestor between themselves and their containing block
- A descendant box has negative margins, causing it to be positioned partly outside the box.
- The 'text-indent' property causes an inline box to hang off either the left or right edge of the block-level box.
Whenever overflow occurs, the 'overflow' property (see below) specifies whether a box is clipped to its padding edge, and if so, whether a scrolling mechanism is provided to access any clipped out content.
The overflow Property
This property specifies whether content of a block container element is clipped when it overflows the element's box. Possible values are the reserved words: visible | hidden | scroll | auto | inherit. The initial value is visible. The values and their meanings are as follows:
visible
This value indicates that content is not clipped, i.e., it may be rendered outside the block-level box.
This value indicates that the content is clipped and that no scrolling user interface should be provided to view the content outside the clipping region.
scroll
This value indicates that the content is clipped and that if the user agent uses a scrolling mechanism that is visible on the screen (such as a scroll bar or a panner), that mechanism should be displayed for the 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', overflowing content may be printed.
auto
The behavior of the 'auto' value is browser-dependent, but should cause a scrolling mechanism to be provided for overflowing boxes.
The visibility Property
The visibility property specifies whether the boxes generated by an element are rendered. An invisible box still affects layout and its vacancy is not taken up by any element. Possible values are: visible | hidden | collapse | inherit. The initial value is visible. The values and their meanings are as follows:
visible
The generated box is visible.
hidden
The generated box is invisible (fully transparent, nothing is drawn), but still affects layout. Furthermore, descendants of the element will be visible if they have “visibility: visible”.
collapse
If used on elements other than rows, row groups, columns, or column groups, 'collapse' has the same meaning as 'hidden'.
In this section, I talk about the different styles the mouse pointer can take. The property to use is cursor. So you can have code like, “cursor:crosshair”. This works for any element (e.g. div). Possible values are: [ [<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | progress ] ] | inherit. The initial value is, auto. The meanings of the values are as follows:
auto
The UA (browser) determines the cursor to display based on the current context.
crosshair
A simple crosshair (e.g., short line segments resembling a "+" sign).
default
The operating system default cursor. Often rendered as an arrow.
pointer
The cursor is a pointer that indicates a link.
move
Indicates something is to be moved.
e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize
Indicate that some edge is to be moved. For example, the 'se-resize' cursor is used when the movement starts from the south-east corner of the box.
text
Indicates text that may be selected. Often rendered as an I-beam.
wait
Indicates that the program is busy and the user should wait. Often rendered as a watch or hourglass.
progress
A progress indicator! The program is performing some processing, but is different from 'wait' in that the user may still interact with the program. Often rendered as a spinning beach ball, or an arrow with a watch or hourglass.
help
Help is available for the object under the cursor. Often rendered as a question mark or a balloon.
uri
The user agent (browser) retrieves the cursor from the resource designated by the URI (URL).
That is it for this part of the series.
Chrys
Related Links
Basics of HTML 5Basics of ECMAScript
HTML DOM Basics
CSS Basics
CSS Rendering for HTML
Simple Guide to Website Design
CSS Multi-column Layout Module
Media and CSS
Responsive Web Design
More Related Links
PurePerl MySQL API
Major in Website Design
Perl Course - Optimized
Web Development Course
BACK