CSS Tutorial (Chapter XIX) – Visibility, Opacity, and Cursor

The meeting   site design will provide you with property visibility, opacity and introduce cursor


Opacity property

Using the opacity property, you can control the transparency of an element. 
Principle :

opacity: <number>

Default value: 1

The  value 1 for the opacity property specifies that an element is either totally unclear or dark (matte, opaque, opaque).  And the zero value for the opacity property determines that the element is invisible. 
The amount of opacity should be defined as a decimal number and a maximum of two decimal places. Values between zero and one and up to two decimal
\places for opacity are allowed. 
All browsers support non-IE6, IE7, and IE8 opacity. There is a proprietary way to determine the 
opacity in IE8 and beyond:

filter: alpha (opacity = <number>);

Default value: 100 
This method is allowed for the opacity value of numbers between 0 and 100. 
The above method works only on ie8 and before it. 
IE9 supports opacity. 
Example :


 <h1> Espinas </ h1>
 <h2> Espinas </ h2>
 <h3> Espinas </ h3>
 <h4> Espinas </ h4>
 <h5> Espinas </ h5>
 </ div>

Css code:

div {background: # 000; }
 h1, h2, h3, h4, h5 {
 color: # 000;
 font-size: 30px;
 display: inline;
 padding; 5px 10px;
 margin: 0 10px;
 background: red;
 } h
 1 {opacity:. 20; }
 h2 {opacity:. 40; }
 h3 {opacity:. 60; }
 h4 {opacity:. 80; }
 h5 {opacity: 1; }


  CSS Tutorial (Chapter eighteen) – The way to display and lay elements

Visibility feature

Using this property, an element can be displayed or hidden in the screen. 
Principle :

visibility: visible | hidden;

Default value: visible 
Visible: The element will be displayed on the screen. 
Hidden: The element is hidden in the page and an empty space is displayed instead.

Cursor attribute

Using the cursor property, you can change the type of mouse pointer used for the elements. 
Principle :

Cursor: url ('') | auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-r
 present | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | apps

Auto default value

Using the url values, you can define a custom cursor based on an img. In practice, this method is almost never 
used and is not recommended for use, and the use of standard cursors is better.

tip :

There are also some non-standard cursors that are supported only in some browsers:

Cursor: hand | all-scroll | col-resize | row-resize | no-drop | not-allowed | vertical-text

Well, here are three other features of the css language, so let’s get acquainted with the special effects of css3 in the next session 

Development of Espinas always tried to use the most up to date Tktynk and tools in the  design of the site is in Espinas technologies in the world such as CSS3 , HTML5 , Jquery ,JAVASCRIPT   in web design can be used as well as languages such as PHP, ASP in the enterprise Spinal Cluster is the first letter

Leave a Reply

Your email address will not be published. Required fields are marked *