Monday, February 19, 2018

Images (Css tutorial)

Hello guys! afternoon. Welcome to this tutorial on CSS , in my last tutorial i talked about CSS Text and now i want to talk CSS Images. I believe by now you all are familiar with images in web design because i also talked about HTML Images in our tutorials on HTML.

Images play an important role in any webpage. Though it is not recommended to include alot of images in a webpage, but it is still important to use good images wherever required.

 CSS plays a good role to control image display. You can set the following image properties using CSS.
  • The border property is used to set the width of an image border.
  • The height property is used to set the height of an image.
  • The width property is used to set the width of an image.
  • The -moz-opacity property is used to set the opacity of an image.
The Image Border Property
The border property of an image is used to set the width of an image border. This property can have a value in length or in %.
A width of zero pixels means no border.

Below is an example of how to set the width of an image border.

<img style="border: 0px;"  src="/images/css.gif" />
<br />
<img style="border: 4px;"  src="/images/css.gif" />

The Image Height Property 
The height property of an image is used to set the height of an image. This property can have a value in length in %. While giving value in %, it applies it in respect of the box in  which an image is available.

Here is an example below.

<img style="border: 0px  solid blue;  height:60px;"  
            src="/images/css.gif" />
 <br />
<img style="border: 4px  solid blue;  height:80px;"  
             src="/images/css.gif" />

The Image Width Property
The width property of an image is used to set the width of an image. This property can have a value in length or in %. While giving value in %, it applies it in respect of the box in which an image is available.

Here is an example below.

<img style="border: 0px  solid blue;  width:60px;"  
            src="/images/css.gif" />
 <br />
<img style="border: 4px  solid blue;  width:80px;"  
             src="/images/css.gif" />

The -moz-opacity Property
The -moz-opacity property of an image is used to set the opacity of an image. This property is used to create a transparent image in mozilla. IE uses filter:alpha(opacity=x) to create transparent images. 

In Mozilla (-moz-opacity:x), x can be a value from 0.0 - 1.0. A lower value makes the element more transparent (The same thing goes for the CSS3-valid syntax opacity:x).

In IE (filter:alpha(opacity=x)), x can be a value from 0 - 100. A lower value makes the element more transparent.

Here is an example below.

<img style="border: 2px  solid blue;  -moz-opacity:0.5; filter:alpha(opacity=50);"  
           
                 src="/images/css.gif" />

Alright guys, that's it for this tutorial, feel free to drop your questions in the comment box below. Don't forget to subscribe with us and also like our facebook page.

Links to previous tutorials on CSS : Css Introduction (Css tutorial) ,  Syntax (Css tutorial)  ,  Inclusion (Css tutorial) , Css Measurement Units (Css tutorial)  , Backgrounds (Css tutorial) , Fonts (Css  tutorial)  , Text (Css tutorial)  
Share:

0 comments:

Post a Comment