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.

Difference between CSS Class and ID selector

The first difference is
An ID selector can be called only once in a document.
A class selector can be called multiple times in a document.

The second difference is
ID can be called by Javascript's getElementByID function.

Note1: There is no hard rule on when to use ID and when to use Class. Use class as much as possible for maximum flexibility, with the only exception being when you want to use Javascript's getElementByID function, in which case you need use ID.

Note2: Class and ID names are both case sensitive. For example, .divclass and .DivClass are two different classes.

How to Achieve Double Border HTML Button Using CSS Pseudo-classes

We can Achieve Double Borders HTML Buttons Using CSS Pseudo-classes

That is without using the border-style:double;(As we know these are not easy to control)

Double border means we can have one outer border and one inner border, this can be achieved by using the simple html and applying custom styles.

Here is an example for the same...

<HTML>
<HEAD>
<STYLE>
.spancls
{
border-top: solid 3px #A9B7C6;
border-left: solid 3px #A9B7C6;
border-bottom: solid 3px #657f97;
border-right: solid 3px #657f97;
padding:2px;
background: #EAF5FC;
width:50px;

}
.btncls
{
border:1px solid #EAF5FC;
background:#EAF5FC;
width:50px;
}

.spancls:hover
{
border-top: solid 3px #FFC727;
border-left: solid 3px #FFC727;
border-bottom: solid 3px #D39300;
border-right: solid 3px #D39300;
padding:2px;
background:#FEFAE7;
width:50px;

}
.spancls:active
{
border-top: solid 3px #D39300;
border-left: solid 3px #D39300;
border-bottom: solid 3px #FFC727;
border-right: solid 3px #FFC727;
padding:2px;
background:#FEFAE7;
width:50px;

}

.btncls:hover
{
border:1px solid #FFF1D3 ;
background:#FFF1D3;
width:50px;
}

.btncls:active
{
border:1px solid #FFFFFF ;
background:#FFFFFF;
width:50px;
}
</STYLE>
</HEAD>

<BODY>
<span class="spancls" >
<input type="button" value="hello" class="btncls">
</span>
</BODY>
</HTML>

Here to achieve the double border, we have used a span and added the button inside that span, as we have a 2px padding, it is looking like one more border(internal border) for the button.

And the different states of the button will look like as follows


Plain state of the Button :

Hover(mouse over) state of the Button:

Active(mouse click) state of the Button:

Simple example for css class and id selector

While defining the css block, we can use either the class name or id as the selector.

example:

selector {
property1:value1;
property2:value2;
}

Using the class name as the selector:

.[Class Name] {
property1:value1;
}

That is..

.nav {
color:#0220FF;
}

can be used in html as follows

<div class="nav">using a class selector.</div>

We can specify different instances of a class selector, by using the following syntax:

[tag type].[class] {
property:value;
}

example:

div.clr {
color:#02400FF;
}

span.clr {
color:#1F0E00;
}

can be used in html as follows

<div class="clr">div one</div>
<span class="clr">span one..</span>

We can use multiple selectors for an html component


.fntsize{
font-size:22px;
}

.fntcolor{
color:#FF4710;
}
can be used as follows..
<p class="fntsize fntcolor">multiple classes.</p>

Using ID as selector :

#[ID Name] {
property:value;
}

#test {
color:#FF00FF;
}

<p id="test">using ID as selector.</p>

Linking (including) an external CSS (style sheet) to a HTML page

An external style sheet can be linked to the page with a <link> tag.

Example link tag which includes an external style sheet is as follows..

<link rel="stylesheet" type="text/css" href="xyz.css" />

The advantage of doing this is that the same style sheet can be used in every page on your site. And the entire site's styling can be managed by changing just this one file.

When the CSS is defined inside the html page, the css classes can be declared with in the <style> tags, but we do not put <style> tags inside an external style sheet.

What is CSS? Where is CSS Used? and an example HTML that uses CSS

CSS is nothing but Cascading Style Sheets, these are used to separate the content from design of the HTML page, so that in future if we want to change the design and layout of the HTML page, without disturbing the content, it will become any easy job. That is we can change the layout / design by simply modifying the CSS.

The CSS can be declared with in the html file or in a separate CSS file.

The structure of the simple CSS is as follows,

.leftcol
{
float: left;
width: 33%;
background:#908800;
}
.middlecol
{
float: left;
width: 34%;
background:#effefe;
}
.rightcol
{
float:left;
width: 33%;
background:#dddd11;
}

In the above example the "leftcol","middlecol","rightcol" are the css class names, which defines its own styling, these classes need to be applied on the HTML elements to see these styling effects.

simple html that uses the above declared css class

<html>

<head>

<style type=​"text/​css">
.leftcol
{
float: left;
width: 33%;
background:#908800;
}
.middlecol
{
float: left;
width: 34%;
background:#effefe;
}
.rightcol
{
float:left;
width: 33%;
background:#dddd11;
}
</style>

</head>

<body>

<div class="leftcol">this is a left div ...</div>
<div class="middlecol">this is a middle div ...</div>
<div class="rightcol">this is a right div ...</div>

</body>

</html>

Good code snippets for Java Script, HTML, PHP, CSS, Ruby and Objective C

we can find some good code snippets here.. for Java Script, HTML, PHP, CSS, Ruby and Objective C!

http://snipplr.com/popular/..