CSS3 Text Overflow(text-overflow) Property with example

The text-overflow property specifies what should happen when text overflows the containing element.

syntax of this property is

text-overflow: clip|ellipsis|string;

All the latest browsers support this property.

The possible values are

• clip : Clips the text
• ellipsis : Render an ellipsis ("...") to represent clipped text
• string : Render the given string to represent clipped text

JavaScript syntax of this property is object.style.textOverflow="ellipses"

Example for text-overflow property..

.mydiv{
text-overflow:ellipsis;
width:12em;
border:1px solid #000000;
overflow:hidden;
white-space:nowrap;
}

If you apply this to the following div

<div class="test" class="mydiv">Long text that will not fit in the box</div>

It looks like as follows..

Long text that will no...

CSS3 Other text effects Properties..

CSS3 Word Wrap(word-wrap) property with example

The word-wrap property allows to force the text to wrap.
That is, even it also split it in the middle of a word for wrapping.

syntax of this property is

word-wrap: normal|break-word;

All the latest browsers support this property.

The possible values are

• normal : Break words only at allowed break points
• break-word : Allows unbreakable words to be broken

JavaScript syntax of this property is object.style.wordWrap="break-word"

Example for text-shadow property..

p.test {word-wrap:break-word;}

CSS3 Other text effects Properties..

CSS3 Text Shadow(text-shadow) Property with example

The text-shadow property applies shadow to the text.

We need to supply the following data when using this property..

• horizontal shadow
• vertical shadow
• blur distance, this is an optional one
• color of the shadow, this is an optional one

JavaScript syntax for this property is object.style.textShadow="4px 5px 3px #33ff01"

Firefox, Chrome, Opera and Safari supports this property.
But Internet Explorer does not yet support the text-shadow property.

Example for text-shadow property..

h2
{
text-shadow: 15px 5px 5px #FF6600;
}

CSS3 Other text effects Properties..

What are CSS3 Text Effects Properties?

The CSS3 text effects that work on the most of the latest browsers are

1. text-shadow
2. word-wrap
3. text-overflow

Internet Explorer does not yet support the text-shadow property.

Firefox, Chrome, Safari, and Opera support the text-shadow property.

All the above browsers support the word-wrap property.

All the above browsers support the text-overflow property.

Some of the other CSS3 text effects properties, which don't have the browser support are..

1. hanging-punctuation
2. punctuation-trim
3. text-align-last
4. text-emphasis
5. text-justify
6. text-outline
7. text-wrap
8. word-break

CSS3 Mian Page

CSS3 background-clip Property with example

This is used to specify the painting area of the background, this is more similar to the "background-origin", but the "background-origin" should be used when we use image as the background and the "background-origin" positions the image at the specified location..

Where as the "background-clip" should be used when we use color as the background, and it specifies the painting area.

The possible values for this property are..

border-box : The background is clipped to the border box
padding-box: The background is clipped to the padding box
content-box: The background is clipped to the content box

The background-clip property is supported IE9+, Firefox 4+, Opera, and Chrome.

Safari supports an alternative, the -webkit-background-clip property.

Example for background-clip property..

/*for border-box*/
#div1
{
padding:25px;
border:5px dotted #000000;
background-color:green;
background-clip:border-box;
}

/*for padding-box*/
#div1
{
padding:25px;
border:5px dotted #000000;
background-color:green;
background-clip:padding-box;
}


/*for content-box*/
#div1
{
padding:25px;
border:5px dotted #000000;
background-color:green;
background-clip:content-box;
}

CSS3 Other Background Properties..

CSS3 enhancements to the background-image property with example

There are also some changes to the existing "background-image" property, now it allows us to set multiple background images.

As this is allowing multiple images as the background-image, if the upper one is transparent, we can also see the second image which is there behind.

Internet Explorer 9, Firefox 4, Chrome, Safari 5 and Opera support these new background properties.

Example for background-image property..

div
{
background-image:url(upper_img.gif),url(back_img.gif);
}

CSS3 Other Background Properties..

CSS3 background-origin property with example

The "background-origin" property specifies the positioning area of the background images.

Internet Explorer 9, Firefox 4, Chrome, Safari 5 and Opera support these new background properties.

Firefox 3.6 and earlier does not support the background-origin property.

Safari 4 requires the prefix -webkit- to support the new background properties.

The background image can be placed within the content-box, padding-box, or border-box area.
Example for background-origin property..

/*Position the background image within the padding-box..*/

.test
{
background:url(img1.gif);
background-repeat:no-repeat;
background-size:100% 100%;
-webkit-background-origin: padding-box; /* Safari */
background-origin: padding-box;
}

/*Position the background image within the border-box..*/

.test
{
background:url(img1.gif);
background-repeat:no-repeat;
background-size:100% 100%;
-webkit-background-origin:border-box; /* Safari */
background-origin:border-box;
}

/*Position the background image within the content-box..*/

.test
{
background:url(img1.gif);
background-repeat:no-repeat;
background-size:100% 100%;
-webkit-background-origin:content-box; /* Safari */
background-origin:content-box;
}

CSS3 Other Background Properties..

CSS3 background-size property with example

The "background-size" property specifies the size of the background image.

Until CSS3, the background image size was determined by the actual size of the image.

But CSS3 provides a way to specify the size of the background image, which allows us to
re-use background images in different contexts.

We can specify the size in pixels or in percentages. If you specify the size as a percentage, the size is relative to the width and height of the parent element.

Internet Explorer 9, Firefox 4, Chrome, Safari 5 and Opera support these new background properties.

Firefox 3.6 and earlier requires the prefix -moz- to support the background-size property.

Safari 4 requires the prefix -webkit- to support the new background properties.

Example for background-size property..

/*background image specified in pixels, this will resize the original image to the specified size..*/

.test
{
background:url(img1.gif);
background-size:80px 60px;
background-repeat:no-repeat;
/* Firefox 3.6 */
-moz-background-size:80px 60px;
}


/*background image specified in percentage, this will resize the original image relative to the width and height of the parent element*/

div
{
background:url(img1.gif);
background-size:100% 100%;
background-repeat:no-repeat;
/* Firefox 3.6 */
-moz-background-size:100% 100%;
}

CSS3 Other Background Properties..

How Does CSS3 Backgrounds work?

The new CSS3 background properties are ..

1. background-size
2. background-origin
3. background-clip

There are also some changes to the existing background property "background-image", that is, now it allows us to set multiple background images.

Internet Explorer 9, Firefox 4, Chrome, Safari 5 and Opera support these new background properties.

Firefox 3.6 and earlier does not support the background-origin property, and requires the prefix -moz- to support the background-size property.

Safari 4 requires the prefix -webkit- to support the new background properties.

CSS3 Mian Page

How Does CSS3 Borders work?

We can do the following things with CSS3 Border style properties

1. creating rounded borders
2. adding shadow to boxes
3. using an image as a border

The CSS3 Border style properties are..

1. border-radius
2. box-shadow
3. border-image

The latest versions of IE, Firefox, Chrome, Safari and Opera supports the following two CSS3 Border style properties

1. border-radius
2. box-shadow

IE does not support the "border-image" property. But all the other browsers support the same with some prefix.

Firefox requires the prefix -moz- for border-image.
Chrome and Safari requires the prefix -webkit- for border-image.
Opera requires the prefix -o- for border-image.

Example for box-shadow

.test{
width:200px;
height:100px;
background-color:blue;
box-shadow: 10px 10px 5px #676767;
}

After applying it to a div, it look like as follows

Example for border-radius

.test
{
border:2px solid;
border-radius:25px;
background-color:red;
/* Firefox 3.6 and earlier */
-moz-border-radius:25px;
}

After applying it to a div, it look like as follows


Example for border-image
This has two examples one with option "round" other one with option "stretch", you can copy this play by applying it to some div, to see the immediate output.

#round
{
-moz-border-image:url(border.png) 30 30 round; /* Firefox */
-webkit-border-image:url(border.png) 30 30 round; /* Safari and Chrome */
-o-border-image:url(border.png) 30 30 round; /* Opera */
border-image:url(border.png) 30 30 round;
}

#stretch
{
-moz-border-image:url(border.png) 30 30 stretch; /* Firefox */
-webkit-border-image:url(border.png) 30 30 stretch; /* Safari and Chrome */
-o-border-image:url(border.png) 30 30 stretch; /* Opera */
border-image:url(border.png) 30 30 stretch;
}

CSS3 Mian Page

Understanding CSS3 with examples -Introduction to CSS3

CSS3 include so many new features and functions that it can be hard to achieve before CSS3. The inclusion of native support for things like rounded corners, 2D/3D Transformations and multi-column layouts are just the samples.

Most important CSS3 modules are:

1. Selectors
2. Box Model
3. Backgrounds
4. Borders
5. Text Effects
6. 2D/3D Transformations
7. Animations
8. Multiple Column Layout
9. User Interface

The CSS3 specification is still under development by W3C.
However, many of the new CSS3 properties have been implemented in modern browsers.

CSS3 is completely backwards compatible, so you will not have to change existing designs. Browsers will always support CSS2.

HTML 5 Media Elements With Example

The new HTML5 media elements are ..

<audio> : For audio content, sounds, music or other audio streams
<video> : For video content, such as a movie clip or other video streams
<source> : For media resources for media elements, defined inside video or audio elements
<embed> : For embedded content, such as a plug-in
<track> : For text tracks used in media players

Audio example :

<audio controls="controls">
<source src="song.ogg" type="audio/ogg" />
</audio>

Video example :

<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4" />
</video>