CSS Universe - Tips, Hacks: css properties

Showing posts with label css properties. Show all posts

Thursday, June 11, 2009

blockquotes CSS

Source Code is:

<head>
<style>
blockquote{background:transparent url(quoleft.gif) left top no-repeat;}
blockquote .blockDiv{padding:0 48px;background:transparent url(quoright.gif) right bottom no-repeat;}
.blockDiv{width:300px;font:11px/1.1em Arial, Helvetica, sans-serif;color:#777;text-align:justify;}
</style>
</head>

<body>>
<blockquote cite="http://www.w3.org/TR/REC-html40/struct/tables.html#h-11.1">
<div class="blockDiv">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</blockquote>
</body>

Download the blockquote source code from here

There’s a simple trick at work here. CSS backgrounds are extremely powerful but in CSS2 only one background can be applied to any single element. The blockquote effect requires two background images, one for the quote mark on the left hand side and one for the one on the right. The additional nested <div> </div> allows us to do this, by applying one background image to the <blockquote></blockquote> and one to the <div> </div>.

The padding is applied to the <div> </div> rather than the <blockquote></blockquote> because the <div> </div> needs to stretch the entire width of the <blockquote></blockquote> in order for the background image to appear in the right place. The images are 38 pixels wide, so a padding is applied to the left and right hand sides of the <div> </div> to allow space for the images and give an extra 10 pixels of whitespace.

You can see the technique being used by downloading the free source code from here.

Thursday, May 21, 2009

CSS Property: white-space

White Space (CSS Property) - white-space: { normal | nowrap | pre | pre-line | pre-wrap | inherit };

Description

This property controls the handling of whitespace inside an element. Whitespace is a collective name for one or more occurrences of the characters space, tab, line feed, carriage return, and form feed. Typically, within an HTML element, user agents will collapse a sequence of whitespace characters into a single space character.

Note that this property only handles whitespace characters; a common beginner’s mistake is to try to use it to prevent floated elements from dropping down if there isn’t enough room on a
line.

Example

This style rule makes elements that belong to the "poetry" class retain and render all
whitespace in the document markup:

<code class="css">.poetry {
 white-space: pre;
}</code>

Value

normal: A value of normal dictates that sequences
of whitespace will collapse into a single space character. Line
breaks will occur wherever necessary to fill line boxes.
nowrap: Specifying nowrap ensures that sequences of
whitespace will collapse into a single space character, but line
breaks will be suppressed.
pre: Specifying pre ensures that sequences of
whitespace won’t collapse. Lines are only broken at new lines in the
markup (or at occurrences of "\a" in generated
content).
pre-line: This value will cause sequences of whitespace to collapse into a
single space character. Line breaks will occur wherever necessary to
fill line boxes, and at new lines in the markup (or at occurrences
of "\a" in generated content). In other words,
it’s like normal except that it’ll honor
explicit line breaks.
pre-wrap: Specify pre-wrap to ensure that sequences
of whitespace won’t collapse. Line breaks will occur wherever
necessary to fill line boxes, and at new lines in the markup (or at
occurrences of "\a" in generated content). In
other words, it’s like pre except that it’ll
wrap the text at the end of line boxes.

Compatibility

Internet Explorer: 5.5,6.0.7.0 (Partial)

Firefox 1.0,2.0,3.0 (Partial)

Safari 1.3,2.0,3.0 (Full)

Opera 9.2 (Partial) ,9.5 (Full)

Internet Explorer for Windows versions up to and including 7 don’t support the values
pre-line or pre-wrap. The values normal and pre behave like pre-wrap on textarea elements. The value nowrap behaves like pre-line on textarea elements.

Internet Explorer for Windows versions up to and including 7 don’t support the value inherit.

Firefox versions up to and including 2 don’t support the values pre-line and pre-wrap (although -moz-pre-wrap is similar to the latter). The values normal, nowrap, and pre behave like pre-wrap on textarea elements.

Opera 9.2 and prior versions don’t support the value pre-line. The values normal and pre behave like pre-wrap on textarea elements. The value nowrap behaves like pre-line on textarea elements.

CSS Property - Clip

Clip (CSS Property) - clip: {shape | auto | inherit};

Description

For all the absolutely positioned elements this property sets the clipping region. Any part of an element that would render outside the clipping region will be invisible. This includes the content of the element and its children, backgrounds, borders, outlines, and even any visible scrolling mechanism.

Clipping may be further influenced by any clipping regions that are set for the element’s ancestors, and whether or not those have a visibility property whose value is something other than visible. Clipping may also occur at the edges of the browser window, or the margins of the paper (when printing).

The default clipping region is a rectangle with the samedimensions as the element’s border box.

Example

This style rule assigns a clipping region of 200×100 pixels for the element with ID "tunnel-vision". The upper left-hand corner of the clipping region is at position (50,50) with respect to the element’s box:

<code class="css">#tunnel-vision {
width: 400px;
height: 200px;
clip: rect(50px, 250px, 150px,50px);
}</code>

Value

If the value is specified as auto, no clipping will be applied.

The only shape value that’s allowed in CSS2.1 is a rectangle, which must be specified using the rect() functional notation. The function takes four comma-separated arguments—top, right, bottom, and left—in the usual TRouBLe order. Each argument is either auto or a length, and negative length values are allowed. The top and bottom positions are relative to the top border edge of the element’s box. The left and right positions are relative to the left border edge in a left-to-right environment, or to the right border edge in a right-to-left environment. When specified as auto, the position is that of the corresponding border edge.

Note that the interpretation of positions specified in the rect() functional notation changed between CSS2 and CSS2.1. In CSS2, each value specified the offset from the corresponding border edge.

Compatibility

Internet Explorer: 5.5,6.0.7.0 (Partial)

Firefox 1.0,2.0,3.0 (Full)

Safari 1.3,2.0,3.0 (Full)

Opera 9.2,9.5 (Full)

Internet Explorer for Windows versions up to and including 7 do not support the recommended
syntax for the rect() notation. However, they do support a deprecated syntax where the arguments are separated by whitespace rather than commas.

Internet Explorer for Windows versions up to and including 7 don’t support the value inherit.