IST263: Lecture 8.

CSS: Visual effects and filters.

Visual effects

Overflow: the `overflow` property

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). Possible values are:

visible -- This value indicates that content is not clipped, i.e., it may be rendered outside the block box.
hidden -- 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 'clip' property.
scroll -- This value indicates that the content is clipped and that if the user agent uses scrolling mechanism that is visible on the screen (such as a scroll bar or a panner), 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.
auto -- The behavior of the auto value is user agent-dependent, but should cause a scrolling mechanism to be provided for overflowing boxes.

Examples:

Code	Result
<div style="width:300px; height:100px; overflow:scroll;" id=ex_1> This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. </div>	This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text.
<div style="width:300px; height:100px; overflow:visible;" id=ex_1> This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. </div>	This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text.
<div style="width:300px; height:100px; overflow:hidden;" id=ex_1> This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. </div>	This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text.

Code

Result

<div style="width:300px; height:100px; overflow:scroll;" id=ex_1>
 This is some sample text. This is some sample text. 
 This is some sample text. This is some sample text. 
 This is some sample text. This is some sample text. 
 This is some sample text. This is some sample text. 
 This is some sample text. This is some sample text.
</div>

<div style="width:300px; height:100px; overflow:visible;" id=ex_1>
 This is some sample text. This is some sample text. 
 This is some sample text. This is some sample text. 
 This is some sample text. This is some sample text. 
 This is some sample text. This is some sample text. 
 This is some sample text. This is some sample text. 
 This is some sample text. This is some sample text. 
 This is some sample text. This is some sample text. 
 This is some sample text. This is some sample text.
</div>

This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text.

<div style="width:300px; height:100px; overflow:hidden;" id=ex_1>
 This is some sample text. This is some sample text. 
 This is some sample text. This is some sample text. 
 This is some sample text. This is some sample text. 
 This is some sample text. This is some sample text. 
 This is some sample text. This is some sample text. 
 This is some sample text. This is some sample text. 
 This is some sample text. This is some sample text. 
 This is some sample text. This is some sample text.
</div>

Visibility: the `visibility` property

The visibility property specifies whether the boxes generated by an element are rendered. Invisible boxes still affect layout (set the display property to none to suppress box generation altogether). Values have the following meanings:

visible -- The generated box is visible.
hidden -- The generated box is invisible (fully transparent), but still affects layout.
collapse -- Please consult the section on dynamic row and column effects in tables. If used on elements other than rows or columns, collapse has the same meaning as hidden. This property may be used in conjunction with scripts to create dynamic effects.

Examples:

Code	Result
Some text before.<span>Some text inside</span> Some text after.	Some text before. Some text inside Some text after.
Some text before.<span style="visibility:hidden;">Some text inside</span> Some text after.	Some text before. Some text inside Some text after.
Some text before.<span style="visibility:collapse;">Some text inside</span> Some text after.	Some text before. Some text inside Some text after.

Code

Result

Some text before.<span>Some text inside</span> Some text after.

Some text before. Some text inside Some text after.

Some text before.<span style="visibility:hidden;">Some text inside</span> Some text after.

Some text before. Some text inside Some text after.

Some text before.<span style="visibility:collapse;">Some text inside</span> 
Some text after.

Some text before. Some text inside Some text after.

`display`

Some of the possible values of the display property are:

block -- This value causes an element to generate a principal block box.
inline -- This value causes an element to generate one or more inline boxes.
list-item -- This value causes an element (e.g., LI in HTML) to generate a principal block box and a list-item inline box. For information about lists and examples of list formatting, please consult the section on lists.
none -- This value causes an element to generate no boxes in the formatting structure (i.e., the element has no effect on layout). Descendant elements do not generate any boxes either; this behavior cannot be overridden by setting the 'display' property on the descendants.

Examples:

Code	Result
Some text before.<span>Some text inside</span> Some text after.	Some text before. Some text inside Some text after.
Some text before.<span style="display:block;">Some text inside</span> Some text after.	Some text before. Some text inside Some text after.
Some text before.<span style="display:none;">Some text inside</span> Some text after.	Some text before. Some text inside Some text after.

Code

Result

Some text before.<span>Some text inside</span> Some text after.

Some text before. Some text inside Some text after.

Some text before.<span style="display:block;">Some text inside</span> Some text after.

Some text before. Some text inside Some text after.

Some text before.<span style="display:none;">Some text inside</span> 
Some text after.

Some text before. Some text after.

Please notice that when display property is set to none that not only the element does not appear, but also the space for the element is not allocated.

Positioning scheme

`position`

The position property determine which of the CSS2 positioning algorithms is used to calculate the position of a box. The values of this property have the following meanings:

static -- The box is a normal box, laid out according to the normal flow. The left and top properties do not apply.
relative -- The box's position is calculated according to the normal flow (this is called the position in normal flow). Then the box is offset relative to its normal position. When a box B is relatively positioned, the position of the following box is calculated as though B were not offset.
absolute -- The box's position (and possibly size) is specified with the left, right, top, and bottom properties. These properties specify offsets with respect to the box's containing block. Absolutely positioned boxes are taken out of the normal flow. This means they have no impact on the layout of later siblings. Also, though absolutely positioned boxes have margins, they do not collapse with any other margins.

Examples:

Code	Result
.rel_pos { position: relative; top: 5px; left: -5px; } /* element of the class should be shifted 5 pixels down and 5 pixels to the left from its original position */ ... Some text before. <span class=rel_pos>Some text inside</span> Some text after.	Some text before. Some text inside Some text after.

Code

Result

.rel_pos {
  position: relative;
  top: 5px;
  left: -5px;
}
/* element of the class should be shifted 5 pixels down 
   and 5 pixels to the left from its original position */
...
Some text before.
<span class=rel_pos>Some text inside</span> 
Some text after.

Some text before. Some text inside Some text after.

To illustrate the usage of the absolute positioning we need to use a little bit of JavaScript. Please click on the button to see what happens if we switch position of the element to absolute and leave top and left the same: When you click on the first button text "Some text inside" should disappear from the result area. You can find it at the very beginning of the document, more precisely at position top=5px left=-5px of the document. After clicking on the second button the element should return to its place. Check out the official CSS 2 documentation for more details.

An element is said to be positioned if its position property has a value other than static. Positioned elements generate positioned boxes, laid out according to four properties:

`left`

This property specifies how far a box's left content edge is offset below the left edge of the box's containing block. Can be measured in either any valid measurement units or in percents. When assigned as percentage, the refer to width of containing block.

`top`

This property specifies how far a box's top content edge is offset below the top edge of the box's containing block. Can be measured in either any valid measurement units or in percents. When assigned as percentage, the refer to width of containing block.

`right`

This property specifies how far a box's right content edge is offset to the left of the right edge of the box's containing block. Can be measured in either any valid measurement units or in percents. When assigned as percentage, the refer to width of containing block.

`bottom`

This property specifies how far a box's bottom content edge is offset above the bottom of the box's containing block. Can be measured in either any valid measurement units or in percents. When assigned as percentage, the refer to width of containing block. When a value is specified as a length (in units), then the offset is a fixed distance from the reference edge. When a value is assigned in percents, then the offset is a percentage of the containing block's width (for left or right) or height (for top and bottom). For top and bottom, if the height of the containing block is not specified explicitly (i.e., it depends on content height), the percentage value is interpreted like auto. When a value is assigned as auto, then the effect of this value depends on which of related properties have the value auto as well. See the sections on the width and height of absolutely positioned, non-replaced elements for details.

Filters

Filters allow us to change the default view of almost any HTML object. Here is a small example. Filter chroma makes pixel of a given color transparent. Designer should provide the desired color as an argument. To properly assign the property filter we need to write:

 filter: chroma(color=desired_color);

Let's look at the following example. We want to create a button that contains a picture and some text. The problem is we have our picture on white background and we don't know the default button background. We also don't want to make it white. Using the described filter we can make all pixel of white color transparent. The first example below illustrates button without color and the second example shows how the filter changes it:

Code	Result
<form> <button><img src="../images/check.bmp">OK</button> </form>
<form> <button> <img src="../images/check.bmp" style="filter:chroma(color=white);"> OK </button> </form>

Let us shortly describe some CSS filters:

Filter Parameters Code Result

FlipH none
<div style="width:200px; filter: fliph();"> Horizontal flip filter </div>

Horizontal flip filter

FlipV none
<div style="width:200px; filter: flipv();"> Vertical flip filter </div>

Vertical flip filter

Shadow
Color shadow color
Direction shadow direction (0--315)

#shadow_fltr { width: 200px; filter: shadow(color=blue, direction=100); } ... <div id=shadow_fltr> Shadow filter </div>

Shadow filter

Glow
Color
Strength

#glow_fltr { width: 200px; filter: glow(color=#f4ef98, strength=4); } ... <div id=glow_fltr> Glow filter </div>

Glow filter

DropShadow
Color color shadow
OffX shadow offset along X-axis
OffY shadow offset along Y-axis
Positive 0 or 1 (it's too long to explain just check for yourself)

#drop_shadow_fltr { width: 200px; filter: dropshadow(color=gray, OffX=3, offy=3); } ... <div id=drop_shadow_fltr> Drop shadow filter </div>

Drop shadow filter

And finally, one small example that show how to add some visual effects to your page. We created here the same button as above, but now we applied filter Gray() by default (this filter losses all colors displaying everything with gray). We remove this filter when mouse cursor is over the button and set it back when the cursor is out of it:

Filter	Parameters	Code	Result
`FlipH`	none	<div style="width:200px; filter: fliph();"> Horizontal flip filter </div>	Horizontal flip filter
`FlipV`	none	<div style="width:200px; filter: flipv();"> Vertical flip filter </div>	Vertical flip filter
`Shadow`	`Color` shadow color `Direction` shadow direction (0--315)	#shadow_fltr { width: 200px; filter: shadow(color=blue, direction=100); } ... <div id=shadow_fltr> Shadow filter </div>	Shadow filter
`Glow`	`Color` `Strength`	#glow_fltr { width: 200px; filter: glow(color=#f4ef98, strength=4); } ... <div id=glow_fltr> Glow filter </div>	Glow filter
`DropShadow`	`Color` color shadow `OffX` shadow offset along X-axis `OffY` shadow offset along Y-axis `Positive` 0 or 1 (it's too long to explain just check for yourself)	#drop_shadow_fltr { width: 200px; filter: dropshadow(color=gray, OffX=3, offy=3); } ... <div id=drop_shadow_fltr> Drop shadow filter </div>	Drop shadow filter

Note: Most filters work only in MSIE.

CSS: Visual effects and filters.

Visual effects

Overflow: the overflow property

Visibility: the visibility property

display

Positioning scheme

position

left

top

right

bottom

Filters

Links

Overflow: the `overflow` property

Visibility: the `visibility` property

`display`

`position`

`left`

`top`

`right`

`bottom`