Friday, April 1, 2011

Apply Frame to Image with CSS

Hello

Many times we need to display image like profile image or advertisements

and at that time we need to decorate it within frame…

 

Here we have a simplest way to apply frame which will help to set frame to any size image and unique for all..


here I have a sample code for it

<html>
<head>
<style>
img {
    background: url("shadow.gif") no-repeat scroll right bottom transparent;
    border-color: #EEEEEE -moz-use-text-color -moz-use-text-color #EEEEEE;
    border-right: medium none;
    border-style: solid none none solid;
    border-width: 1px medium medium 1px;
    padding: 4px 10px 10px 4px;}
</style>
</head>
<body>
     <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxKSyD46sNlLs8yYLBFMz_YGOiYANzbKSUPo5YT5f2K34QvZgGOWTWF_s_aWPoe4zuVafRytM6346dkW7bkjptRImMMCLWyaCxtGgAjPD97wa7HWZ_l94H2uWxlU8V2UKIJPgvyj7sTO5x/s220/Sandeep.JPG'>
</body>
</html>



and the you can have any kind of frame image


here I am uploading a sample image


shadow


and the output you will get is


output


All the Best

No comments: