How to Display Overlaps Layer on one Another in CSS

What is Layer :-

        Layer means peace of Html display on a top of the page with in pixel Format.
To Define the one layer you have to first set it’s position and width and height.

  For example:-

div.layer1 {    

                               background-color:lime;

                             width:150px;

                             height:150px;

                               position:relative;

                             top:10px;

                               left:80px;

                               z-index:4

                             }

The above code display that the one Layer is create with Lime  color and its width and Height is 150*150. And  Z-index Define the priority that which Layer are display on top and which are bottom. Left and Top Display the position of pixel the image or Content should be Display in Left or top Side.

Example of Vertical Menu in CSS Beautiful Vertical Menu Using CSS

OverLaps Layer with Each Other in CSS Display Layer on EachOther or OverLaps Layer

In this example we are create three layer and each layer are overlaps with each other.

Example of Absolute and Relative Position Property in CSS

Positioning:-

The CSS positioning properties allow you to position an element. It can also place an element behind another, and specify what should happen when an element's content is too big.

Elements can be positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the positioning method.

There are four different positioning methods.

Relative Positioning

A relative positioned element is positioned relative to its normal position.
h2.pos_left
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}
The content of a relatively positioned elements can be moved and overlap other elements, but the reserved space for the element is still preserved in the normal flow.
Relatively positioned element are often used as container blocks for absolutely positioned elements.

Absolute positioning

An element which is positioned absolute does not obtain any space in the document. This means that it does not leave an empty space after being positioned.
To position an element absolutely, the position property is set as absolute. You can subsequently use the properties left, right, top, and bottom to place the box.
As an example of absolute positioning, we choose to place 4 boxes in each corner of the document:

#box1 {

        position:absolute;

        top: 50px;

        left: 50px;

}

#box2 {

        position:absolute;

        top: 50px;

        right: 50px;

}

#box3 {

        position:absolute;

        bottom: 50px;

        right: 50px;

}

#box4 {

        position:absolute;

        bottom: 50px;

        left: 50px;

}

Relative positioning

To position an element relatively, the property position is set as relative. The difference between absolute and relative positioning is how the position is being calculated.
The position for an element which is relatively positioned is calculated from the original position in the document. That means that you move the element to the right, to the left, up or down. This way, the element still obtains a space in the document after it is positioned.
As an example of relative positioning, we can try to position three pictures relatively to their original position on the page. Notice how the pictures leave empty spaces at their original positions in the document:

#dog1 {

        position:relative;

        left: 350px;

        bottom: 150px;

}

#dog2 {

        position:relative;

        left: 150px;

        bottom: 500px;

}

#dog3 {

        position:relative;

        left: 50px;

        bottom: 700px;

}

Absolute CSS Positioning

Absolute positioning is the easiest to understand. You start with the CSS position property:
position: absolute;
This tells the browser that whatever is going to be positioned should be removed from the normal flow of the document and will be placed in an exact location on the page. It is also taken out of the normal flow of the document - it won't affect how the elements before it or after it in the HTML are positioned on the Web page.
If you want to position an element 10ems from the top of the document window, you would use the "top" offset to position it there with absolute positioning:
position: absolute;
top: 10em;
This element will then always display 10em from the top of the page - no matter what else displays there in normal flow.
The four positioning properties are:

• top
• right
• bottom
• left

To use them, you need to think of them as offset properties. In other words, an element positioned right 2em is not moved right 2em. It's right side is offset from the right side of the window 2em. The same is true for the other three.

Relative Positioning

Relative positioning uses the same four positioning properties as absolute positioning. But instead of basing the position of the element upon the browser view port, it starts from where the element would be if it were still in the normal flow.
For example, if you have three paragraphs on your based on it's current location - not from the original sides of the view port. Web page, and the third has a position: relative style placed on it, it's position will be offset
<p>Paragraph 1.</p>
<p>Paragraph 2.</p>
<p style="position: relative;left: 2em;">Paragraph 3.</p>
In the above example, the third paragraph will be positioned 3em from the left side of the container element, but will still be below the first two paragraphs. It would remain in the normal flow of the document, and just be offset slightly. If you changed it to position: absolute; anything following it would display on top of it, because it would no longer be in the normal flow of the document.

Creating a Zoom Effect on an Image on hover using CSS

Description:-


In this Example we explain that how to create OnMouseOver Effect to Display Image in Zoom Mode when the mouse is over to this particular iamge.

To Create OnmouseOver Effect to Display Zoom image for this hover property of the CSS is used.
Hover property of CSS:-

            By using this property you can select elements when you mouse over them.

For Ex:-

                div.img a:hover img

  {

  border:1px solid #0000ff;

  height:110;

  width:150;

  }

You can also apply hover Effect not only <a> tag you can apply on any Element.

Here is an example in which there are Five image when you move on First image then this image size is automatically change then other four image. This rule is appiled also to another Four image.
So,using this example you can improve your webDesign page very Beautyfull.

How To Create Horizontal and Vertical Navigation Menu Using CSS

Description:-

 in this example we explain that how to create a vertical Menu in your WebPage or Website.

Generally we all know that there is a Horizontal Menu in Each and Every Website so we can Built Deiffernt or Unique Menu By using this menu and you can also make your Website very Beautyfull or very user Friendlly.

In this example we create a vertical menu and also give link to this menu so the page is Redirect to this page Directally.

Example of Vertical Menu in CSS Beautiful Vertical Menu Using CSS

OverLaps Layer with Each Other in CSS Display Layer on EachOther or OverLaps Layer

CSS Styling Links or Example of Text Decoration Property in CSS

 
Defination:-

            Text Decoration means decoration added to  the text.

Syntax:-

object.style.textDecoration="overline"

Property of textdecoration in CSS:-

Scrollable Table with Fixed Header Using CSS

Description:-

in this example we explain that how to create a scrollbar in Table or Div or any Content so content is Display in proper way.

Css Overflow Property

Property Values

Value	Description
visible	The overflow is not clipped. It renders outside the element's box. This is default(ignore hight and width)
hidden	The overflow is clipped, and the rest of the content will be invisible
scroll	The overflow is clipped, but a scroll-bar is added to see the rest of the content
auto	If overflow is clipped, a scroll-bar should be added to see the rest of the content

 

The main Advantages of the Scrollbar is that when the size of data is Large and you can Display in Table Format.

For Example:-

          Suppose you have a 10000 Record that you have to Display in a table Format at that time it may require much more Spaces and our webpage can not contain other control so at that time you can use this Example and Display in very short size with scrollbar.

How to create a 3-column layout with CSS

Description:-

In this Example we Explain that how to Display your Content of the page in Three Coloumn in webpage. We all see that  in Newspaper Site the Content of the News was display in three coloumn or we also see in some Articles content same Like this so to Display Your Content in three coloumn this example is used.

in this Example we used External Stylesheet and Devide page into three part like 33 % and displaying this type of Format. here is a style to Display a part of the 33%.

For Ex:-

#column1 {

            float:left;

            width: 33%;

      }

The main Advantages of the this Example is to Devloping Website Like Newspaper or Artcle at that time this is very useful and you can Display Your News and page content in webpage very clearly.

How to Create Scrollbar or Example of Overflow in CSS

Description:-

in this example we explain that how to create a scrollbar in Table or Div or any Content so content is Display in proper way.

Css Overflow Property

Property Values

Value	Description
visible	The overflow is not clipped. It renders outside the element's box. This is default(ignore hight and width)
hidden	The overflow is clipped, and the rest of the content will be invisible
scroll	The overflow is clipped, but a scroll-bar is added to see the rest of the content
auto	If overflow is clipped, a scroll-bar should be added to see the rest of the content

 

The main Advantages of the Scrollbar is that when the size of data is Large and you can Display in Table Format.

For Example:-

          Suppose you have a 10000 Record that you have to Display in a table Format at that time it may require much more Spaces and our webpage can not contain other control so at that time you can use this Example and Display in very short size with scrollbar.

         
                 

Example of Image Opacity and Image Transparency in CSS

CSS Image Opacity / Transparency

Creating transparent images with CSS is easy.

Note: The CSS opacity property is a part of the W3C CSS3 recommendation.

Example 1 - Creating a Transparent Image

The CSS3 property for transparency is opacity.

First we will show you how to create a transparent image with CSS.

Regular image:

  

CSS Cursor Tricks or Set Differant Type of Cursor in CSS

 

Description:-                

in this Example we create a Differant types of Cursor at Differant sitution.

The cursor property specifies the type of cursor to be displayed when pointing on an element.

For example:-
            If we Have to Display a Webpage in Process Mode at that time you have to also change the cursor Type.

          so this Example is very useful to change the cursor type at Differant Sitution as per Required.

Here is some property of the Cursor are as Follow

·         Auto : The browser determines the cursor to display based on the current context.
E.g. equivalent to text when hovering text.

·         Default: Default cursor, typically an arrow.

·         None :no cursor is rendered.

·         context-menu: A context menu is available under the cursor.

·         Help: Indicating help is available.

·         Pointer: E.g. used when hovering over links, typically a hand.

·         Progress: The program is busy in the background but the user can still interact with the interface (unlike for wait).

·         Wait: The program is busy (sometimes an hourglass or a watch).

·         Crosshair: Cross cursor, often used to indicate selection in a bitmap.

·         Text: Indicating text can be selected, typically an I-beam.

·         vertical-text:I ndicating that vertical text can be selected, typically a sideways I-beam.

Example of hover Selector or How To Set Hover Effect and Display Font in Differant way in CSS

Definition and Usage

The :hover selector is used to select elements when you mouse over them.
Tip: The :hover selector can be used on all elements, not only on links.

Hover property of CSS:-

            By using this property you can select elements when you mouse over them.

For Ex:-

            div.img a:hover img

  {

  border:1px solid #0000ff;

  height:110;

  width:150;

  }

You can also apply hover Effect not only <a> tag you can apply on any Element.

Example of Float property in CSS or How to Set Float Property in CSS

CSS Float

Floating is often used to push an image to one side or another, while having the text of a paragraph wrap around it. This type of usage is often referred to as text wrapping and resembles what you might see in many magazines that have articles which wrap around images of various shapes and sizes. 

Float Image

Wrapping text around an image is easy when using the CSS Float attribute. You have a choice to either float the picture to the left or to the right and the rest is done for you. Below is an example of an image that is floated to different sides of a paragraph.

float can be set as either left, right or none.

Property Values

Value   Description

left       The element floats to the left

right     The element floats the right

none    The element is not floated, and will be displayed just where it occurs in the text. This is default

The property clear

Elements after the floating element will flow around it. To avoid this, use the clear property.

The clear property specifies which sides of an element other floating elements are not allowed.

Specifies which sides of an element where other floating elements are not allowed

The property clear can assume the values left, right, both or none.

How To Set Border style,Color, Width,thickness in CSS

Description:-

Border

You can set the color, style and width of the borders around an element in one declaration by using the border property.

Syntax:-

            border: 1px solid #333333;

Border Color

You can set the color of a border independently with the border-color property.

border-color: value;

Border Style

You can set the style of a border independently with the border-style property.

border-style: value;

Values:

• dashed
• dotted
• double
• groove
• hidden
• inset
• none
• outset
• ridge
• solid

Border Width

You can set the width of a border independently with the border-width property.

border-width: value;

Border Bottom

You can set the color, style and width of the bottom border around an element in one declaration with the border-bottom property.

border-bottom: 1px solid #333333;

Border Left

You can set the color, style and width of the left border around an element with the border-left property.

border-left: 1px solid #333333;

Border Right

You can set the color, style and width of the right border around an element in one declaration with the border-right property.

border-right: 1px solid #333333;

Border Top

You can set the color, style and width of the top border around an element in one declaration with the border-top property.

border-top: 1px solid #333333;           

How to Create Vertical Menu in CSS Beautiful Menu in CSS

Set Differant types of Cursor in CSS Set Differant Cursor type as per sitution