HTML , css Image & effect
In this section we learn img tag , border affect on image,
image shadow, thumbnail image, image in different shape.
<img src =”images/abc.png” alt=”no image found” />
In image tag shows png image i.e. portable network graphics, similarly define
jpg(joint picture graphics) & gif(graphics interchange format)
Alt attribute is used to in case image not
support or not found then alt text is show not necessary to show this
attribute.
Border radius is use for set curve fashion
to all four corner
Eg:
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
& suppose plain border for example set
5px blue border
Eg: <img src=”images/abc.png” style=”border:
5px solid blue”/>
Image shadow : set shadow for imageà 0 0 20px rgba(0, 0, 0, .2);
In above apply rgba color to image shadow
so that is show some front face from its original background.
Image thumbnail: showing images look like thumbnail
Eg: <img src=”abc.png” style=”padding:5px ; border: 1px solid
#eaeaea”/>
In above case apply padding such way so its
look thumbnail image.
Suppose show image in circle shape then use
border-radius :50% ;
Adjust four or more images in one line then
<table width=”25%”>
<tr>
<td width=”25%”>
<img src=”abc.png” width=”100%”/>
</td>
<td width=”25%”>
<img src=”abc2.png” width=”100%”/>
</td>
<td width=”25%”>
<img src=”abc3.png” width=”100%”/>
</td>
<td width=”25%”>
<img src=”abc4.png” width=”100%”/>
</td>
</tr>
</table>
In this way using table to 100% in which
equal 25% each column & 100% image in each column , so that all image in one line for any screen
resolution.
Note: while making website it is necessity
to check whether all images work in all browser(chrome, opera, firefox, safari,
ie8) & all screen it may be mobile
or tab or laptop.
Thanks for viewing blog send comment in case
any query.
