ایجاد افکت بر روی تصویر توسط HTML و CSS در Asp.Net

سه شنبه 26 خرداد 1394

معمولا در لیست تصاویر موجود در سایتها ، برای نمایش تصاویر از برخی افکت ها استفاده می کنیم .این افکت ها را میتوانیم با بکارگیری HTML و CSS در برنامه ایجاد کنیم .در این مقاله با ذکر یک مثال به برخی از این افکتها اشاره کرده ایم .

ایجاد افکت بر روی تصویر  توسط HTML و CSS در Asp.Net

مرحله اول :

نرم افزار ویژوال استودیو را اجرا میکنیم .سپس یک Empty Website ایجاد میکنیم .

مرحله دوم :

در قسمت Solution Explorer یک  webform  با نام (Default.aspx)به پروژه اضافه میکنیم .

در قسمت Solution Explorer  یک پوشه با نام images ایجاد میکنیم .سپس تعدادی تصویر دلخواه در آن قرار میدهیم .


مرحله سوم :

حالا میخواهیم در صفحه تعدادی تصویر را به صورت گالری نمایش دهیم .برای این کار میتوانیم تگ ها و css مربوط به آنها را در صفحه اصلی قرار دهیم .

 <div class="main">  
                <div class="groweffect image">  
                    <img src="images/1.jpg"alt="portrait"/>  
                </div>  
                <div class="shrinkeffect image">  
                    <img src="images/2.jpg" alt="city"/>  
                </div>  
                <div class="sidepaneffect image">  
                    <img src="images/9.jpg" alt="city"/>  
                </div>  
                <div class="tilteffect  image">  
                    <img src="images/4.jpg"  alt="city"/>  
                </div>  
                <div class="morpheffect image">  
                    <img src="images/7.jpg" alt="city" />  
                </div>  
                <div class="bnweffect image">  
                    <img src="images/10.jpg" alt="city" />  
                </div>  
            </div>   

سپس افکت لازم برای تگ های موجود را ، توسط Css فراخوانی می کنیم .

   <style type="text/css">  
        
    {  
  -webkit-box-sizing: border-box;  
     -moz-box-sizing: border-box;  
      -ms-box-sizing: border-box;  
          box-sizing: border-box;  
}  
    
   
body {  
  background: #FAFAD2;  
    
}  
   
   
.image {  
  border: 10px dashed #fff;   
  float: left;  
  height: 300px;  
  width: 300px;  
  margin: 10px;  
  overflow: hidden;  
    
     
  -webkit-box-shadow: 5px 5px 5px #111;  
          box-shadow: 4px 4px 4px #111;   
}  
  
  
.groweffect img {  
  height: 300px;  
  width: 300px;  
   
  -webkit-transition: all 1s ease;  
     -moz-transition: all 1s ease;  
       -o-transition: all 1s ease;  
      -ms-transition: all 1s ease;  
          transition: all 1s ease;  
}  
    
   
.groweffect img:hover {  
  width: 400px;  
  height: 400px;  
}  
   
  
.shrinkeffect img {  
  height: 400px;  
  width: 400px;  
   
  -webkit-transition: all 1s ease;  
     -moz-transition: all 1s ease;  
       -o-transition: all 1s ease;  
      -ms-transition: all 1s ease;  
          transition: all 1s ease;  
}  
     
   
.shrinkeffect img:hover {  
  width: 300px;  
  height: 300px;  
}  
  
  
.sidepaneffect img {  
  margin-left: 0px;  
  -webkit-transition: margin 1s ease;  
     -moz-transition: margin 1s ease;  
       -o-transition: margin 1s ease;  
      -ms-transition: margin 1s ease;  
          transition: margin 1s ease;  
}  
     
   
.sidepaneffect img:hover {  
  margin-left: -200px;  
}  
     
  
.tilteffect {  
  -webkit-transition: all 0.5s ease;  
     -moz-transition: all 0.5s ease;  
       -o-transition: all 0.5s ease;  
      -ms-transition: all 0.5s ease;  
          transition: all 0.5s ease;  
}  
   
   
    
.tilteffect:hover {  
  -webkit-transform: rotate(-10deg);  
     -moz-transform: rotate(-10deg);  
       -o-transform: rotate(-10deg);  
      -ms-transform: rotate(-10deg);  
          transform: rotate(-10deg);  
}  
  
    
  
.morpheffect {  
  -webkit-transition: all 0.5s ease;  
     -moz-transition: all 0.5s ease;  
       -o-transition: all 0.5s ease;  
      -ms-transition: all 0.5s ease;  
          transition: all 0.5s ease;  
}  
    
    
.morpheffect:hover {  
  border-radius: 50%;  
  -webkit-transform: rotate(360deg);  
     -moz-transform: rotate(360deg);  
       -o-transform: rotate(360deg);  
      -ms-transform: rotate(360deg);  
          transform: rotate(360deg);  
}  
  
  
  
.bnweffect {  
  -webkit-transition: all 1s ease;  
     -moz-transition: all 1s ease;  
       -o-transition: all 1s ease;  
      -ms-transition: all 1s ease;  
          transition: all 1s ease;  
}  
   
    
.bnweffect:hover   
{  
  -webkit-filter: grayscale(100%);  
}  
      .style1  
      {  
          text-decoration: underline;  
      }  
        
      .main  
      {  
          margin:0px 0px 0px 150px;  
            
            
        }  
               
  </style>   

سپس برنامه را اجرا میکنیم ، مشاهده میکنید که با قرار دادن نمایشگر بر روی هر تصویر یک افکتی خاص بر روی آن تصویر اجرا میشود .

 

فایل های ضمیمه

احسان حسینی

نویسنده 42 مقاله در برنامه نویسان

کاربرانی که از نویسنده این مقاله تشکر کرده اند

در صورتی که در رابطه با این مقاله سوالی دارید، در تاپیک های انجمن مطرح کنید