کد افکت گذاری بر روی عکس های وبلاگ و سایت

کد کج شدن ، سایده دار شدن و ... عکس

نحوه استفاده :

در صورتی که انجام مراجا ذیل را برای خود مشکل می بیندید ؛ کد را در قسمت تنظیمات ، بخش کد های اضاقی یا اسکریپ ها وبلاگ خود کپی کنید .

1- به قسمت ویرایش قالب خود بروید و کد < head > یا < head /> را پیدا کنید

2- کد مورد نظر را بین این دو کپی کنید

1.بزرگ شدن بصورت مستطیل


<style>
img{

-webkit-transform:scale(0.9); /*Webkit: Scale down image to 0.8x original size*/

-moz-transform:scale(0.9); /*Mozilla scale version*/

-o-transform:scale(0.9); /*Opera scale version*/

-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/

-moz-transition-duration: 0.5s; /*Mozilla duration version*/

-o-transition-duration: 0.5s; /*Opera duration version*/

opacity: 0.7; /*initial opacity of images*/

margin: 0 10px 9px 0; /*margin between images*/

}

img:hover{

-webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/

-moz-transform:scale(1.1); /*Mozilla scale version*/

-o-transform:scale(1.1); /*Opera scale version*/

box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/

-webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/

-moz-box-shadow:0px 0px 80px gray; /*Mozilla shadow version*/

opacity: 1;

-webkit-transform: rotate(-10deg);

}
</style>
<P><A href="index.html" target=_blank><SPAN
style="FONT-WEIGHT: 600; TEXT-DECORATION: none"><FONT 
color=#ff99cc>کد ِکج شدَنِ تَصآویر
</FONT></SPAN></A></P>
<P><A href="http://online3da.ir" target=_blank><SPAN
style="FONT-WEIGHT: 600; TEXT-DECORATION: none"><FONT 
color=#ff99cc>کداهنگ برای وبلاگ
</FONT></SPAN></A></P>

2.بزرگ شدن با لبه های گرد

<style>
img:hover{border-radius: 50px;
opacity:0.8;filter:alpha(opacity=80);
-webkit-transform:scale(1.1):( Webkit: Scale up image to 1.2x original size);
-moz-border-radius:6px;-webkit-border-radius:30px;
box-shadow: 10px 10px 5px #000;
-moz-transform:scale(1.1):( Mozilla scale version);
-moz-transform:scale(0.9):(Explorer scale version);

}
img:out{border-radius: 40px;
opacity:1;filter:alpha(opacity=100);
-webkit-transform:scale(0.9):( Webkit: Scale down image to 0.8x original size);
padding:0px; float:center;
-moz-transform:scale(0.9):(Mozilla scale version);
-moz-transform:scale(0.9):(Explorer scale version);

}

img{
-webkit-transform:scale(0.8); /*Webkit: Scale down image to 0.8x original size*/
-moz-transform:scale(0.8); /*Mozilla scale version*/
-o-transform:scale(0.8); /*Opera scale version*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
opacity: 0.7; /*initial opacity of images*/
margin: 0 10px 5px 0; /*margin between images*/
}

img:hover{
-webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/
-moz-transform:scale(1.1); /*Mozilla scale version*/
-o-transform:scale(1.1); /*Opera scale version*/
box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/
-webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/
-moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/
opacity: 1;

} 
</style>
<P><A href="index.html" target=_blank><SPAN
style="FONT-WEIGHT: 600; TEXT-DECORATION: none"><FONT 
color=#ff99cc>کد ِکج شدَنِ تَصآویر
</FONT></SPAN></A></P>
<P><A href="http://online3da.ir" target=_blank><SPAN
style="FONT-WEIGHT: 600; TEXT-DECORATION: none"><FONT 
color=#ff99cc>کداهنگ برای وبلاگ
</FONT></SPAN></A></P>

3.شكل برگ شدن ثابت


<style>
img {
border: datted 5px #000;
border-radius: 80px 7px 80px 7px;
box-shadow: 0 0 1px #333;
-webkit-transition: all 1s ease-in;
-moz-transition: all 1s ease-in;
-o-transition: all 1s ease-in;
transition: all 1s ease-in;
-webkit-transform: rotate(1deg);
-moz-transform: rotate(1deg);
-o-transform: rotate(1deg);
} 
</style>
<P><A href="index.html" target=_blank><SPAN
style="FONT-WEIGHT: 600; TEXT-DECORATION: none"><FONT 
color=#ff99cc>کد ِکج شدَنِ تَصآویر
</FONT></SPAN></A></P>
<P><A href="http://online3da.ir" target=_blank><SPAN
style="FONT-WEIGHT: 600; TEXT-DECORATION: none"><FONT 
color=#ff99cc>کداهنگ برای وبلاگ
</FONT></SPAN></A></P>

4.كج شدن آهسته تصویر با سایه


<style>
img { border-radius: 4px;
border: 1px solid #fff;
max-width: 480px;
margin: 2px;
padding:0px; float:center;
filter:alpha(opacity=100);
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-webkit-transition:all 0.4s ease-in;
-moz-transition:all 0.4s ease-in;
-o-transition:all 0.4s ease-in;
transition:all 0.4s ease-in;
opacity:1.0;
}
img:hover{ border-radius: 7px;
border: 1px solid #000;
max-width: 480px;
margin: 2px;
padding:0px; float:center;
filter:alpha(opacity=40);
opacity:0.4;
-moz-border-radius:6px;-webkit-border-radius:6px;
box-shadow: 10px 10px 5px #000;
-webkit-transition:all 0.4s ease-in;
-moz-transition:all 0.4s ease-in;
-o-transition:all 0.4s ease-in;
transition:all 0.4s ease-in;
}
img:hover{
opacity:1;filter:alpha(opacity=100);
-webkit-transform: rotate(-4deg);
-moz-transform: rotate(-4deg);

}
img:out{
opacity:1;filter:alpha(opacity=100);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);

}

</style>
<P><A href="index.html" target=_blank><SPAN
style="FONT-WEIGHT: 600; TEXT-DECORATION: none"><FONT 
color=#ff99cc>کد ِکج شدَنِ تَصآویر
</FONT></SPAN></A></P>
<P><A href="http://online3da.ir" target=_blank><SPAN
style="FONT-WEIGHT: 600; TEXT-DECORATION: none"><FONT 
color=#ff99cc>کداهنگ برای وبلاگ
</FONT></SPAN></A></P>

5.كج شدن و چرخشی


<style>
img{
-webkit-transform:scale(0.9); /*design by : mosbat*/
-moz-transform:scale(0.9); /*design by : mosbat*/
-o-transform:scale(0.9); /*design by : mosbat*/
-webkit-transition-duration: 0.5s; /*design by : mosbat*/
-moz-transition-duration: 0.5s; /*design by : mosbat*/
-o-transition-duration: 0.5s; /*mosbataye-bahejab.blogfa.com*/
opacity: 0.9; /*mosbataye-bahejab.blogfa.com*/
margin: 0 10px 9px 0; /*mosbataye-bahejab.blogfa.com*/} 
img:hover{
-webkit-transform:scale(1.1); /*design by : mosbat*/ 
-moz-transform:scale(1.1); /*design by : mosbat*/ 
-o-transform:scale(1.1); /*design by : mosbat*/ 
box-shadow:0px 0px 0px gray; /*design by : mosbat*/ 
-webkit-box-shadow:0px 0px 0px gray; /*mosbataye-bahejab.blogfa.com*/ 
-moz-box-shadow:0px 0px 0px gray; /*mosbataye-bahejab.blogfa.com*/ 
opacity: 1.0;
 -webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-o-transform: rotate(-10deg);}
</style>
<P><A href="index.html" target=_blank><SPAN
style="FONT-WEIGHT: 600; TEXT-DECORATION: none"><FONT 
color=#ff99cc>کد ِکج شدَنِ تَصآویر
</FONT></SPAN></A></P>
<P><A href="http://online3da.ir" target=_blank><SPAN
style="FONT-WEIGHT: 600; TEXT-DECORATION: none"><FONT 
color=#ff99cc>کداهنگ برای وبلاگ
</FONT></SPAN></A></P>

6.فقط گرد و سایه دار شدن گوشه عكس

<style>
img:hover{border-radius: 50px;
opacity:0.8;filter:alpha(opacity=80);
-webkit-transform:scale(1.1):( Webkit: Scale up image to 1.2x original size);
-moz-border-radius:6px;-webkit-border-radius:30px;
box-shadow: 10px 10px 5px #000;	
-moz-transform:scale(1.1):( Mozilla scale version); 
-moz-transform:scale(0.9):(Explorer scale version);

}
img:out{border-radius: 40px;
opacity:1;filter:alpha(opacity=100);
-webkit-transform:scale(0.9):( Webkit: Scale down image to 0.8x original size);
padding:0px; float:center;
-moz-transform:scale(0.9):(Mozilla scale version);
-moz-transform:scale(0.9):(Explorer scale version);

}
</style>
<P><A href="index.html" target=_blank><SPAN
style="FONT-WEIGHT: 600; TEXT-DECORATION: none"><FONT 
color=#ff99cc>کد ِکج شدَنِ تَصآویر
</FONT></SPAN></A></P>
<P><A href="http://online3da.ir" target=_blank><SPAN
style="FONT-WEIGHT: 600; TEXT-DECORATION: none"><FONT 
color=#ff99cc>کداهنگ برای وبلاگ
</FONT></SPAN></A></P>

7.چرخش كامل عكس


<style>
img:hover {
border: dashed underline 1px #333;
border-radius: 80px 6px 80px 6px;
box-shadow: 5 5 1px #333;
-webkit-transition: all 2s ease-in;
-moz-transition: all 2s ease-in;
-o-transition: all 2s ease-in;
transition: all 2s ease-in;
-webkit-transform: rotate(-360deg);
-moz-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
}

img{border-radius: 40px;
opacity:1;filter:alpha(opacity=100);
-webkit-transform:scale(0.9):( Webkit: Scale down image to 0.8x original size);
padding:0px; float:center;
-moz-transform:scale(0.9):(Mozilla scale version);
-moz-transform:scale(0.9):(Explorer scale version);

}
</style>
<P><A href="index.html" target=_blank><SPAN
style="FONT-WEIGHT: 600; TEXT-DECORATION: none"><FONT 
color=#ff99cc>کد ِکج شدَنِ تَصآویر
</FONT></SPAN></A></P>
<P><A href="http://online3da.ir" target=_blank><SPAN
style="FONT-WEIGHT: 600; TEXT-DECORATION: none"><FONT 
color=#ff99cc>کداهنگ برای وبلاگ
</FONT></SPAN></A></P>

8.از حالت عادی تبدیل به برگ شدن با رفتن موس


<style>
img:hover{
border: datted 6px #000;
border-radius: 80px 7px 80px 7px;
box-shadow: 0 0 1px #333;
-webkit-transition: all 1s ease-in;
-moz-transition: all 1s ease-in;
-o-transition: all 1s ease-in;
transition: all 1s ease-in;
-webkit-transform: rotate(1deg);
-moz-transform: rotate(1deg);
-o-transform: rotate(1deg);
} 

img:out{border-radius: 60px;
opacity:1;filter:alpha(opacity=100);
-webkit-transform:scale(0.9):( Webkit: Scale down image to 0.8x original size);
padding:0px; float:center;
-moz-transform:scale(0.9):(Mozilla scale version);
-moz-transform:scale(0.9):(Explorer scale version);

}
</style>
<P><A href="index.html" target=_blank><SPAN
style="FONT-WEIGHT: 600; TEXT-DECORATION: none"><FONT 
color=#ff99cc>کد ِکج شدَنِ تَصآویر
</FONT></SPAN></A></P>
<P><A href="http://online3da.ir" target=_blank><SPAN
style="FONT-WEIGHT: 600; TEXT-DECORATION: none"><FONT 
color=#ff99cc>کداهنگ برای وبلاگ
</FONT></SPAN></A></P>

9.كج شدن ساده تصویر به همراه واضح تر شدن


<style>
img:hover{ opacity:0.8;filter:alpha(opacity=80); -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg);  } img:out{ opacity:10;filter:alpha(opacity=100); -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg);  } 
img{ opacity:0.8;filter:alpha(opacity=80); } img:hover{ opacity:1;filter:alpha(opacity=100);  } img:out{ opacity:0.8;filter:alpha(opacity=80);  }
</style>
<P><A href="index.html" target=_blank><SPAN
style="FONT-WEIGHT: 600; TEXT-DECORATION: none"><FONT 
color=#ff99cc>کد ِکج شدَنِ تَصآویر
</FONT></SPAN></A></P>
<P><A href="http://online3da.ir" target=_blank><SPAN
style="FONT-WEIGHT: 600; TEXT-DECORATION: none"><FONT 
color=#ff99cc>کداهنگ برای وبلاگ
</FONT></SPAN></A></P>

10.فقط گرد شدن گوشه های عكس


<style>
img{border-radius: 40px;
opacity:1;filter:alpha(opacity=100);
-webkit-transform:scale(0.9):( Webkit: Scale down image to 0.8x original size);
padding:0px; float:center;
-moz-transform:scale(0.9):(Mozilla scale version);
-moz-transform:scale(0.9):(Explorer scale version);

}
</style>
<P><A href="index.html" target=_blank><SPAN
style="FONT-WEIGHT: 600; TEXT-DECORATION: none"><FONT 
color=#ff99cc>کد ِکج شدَنِ تَصآویر
</FONT></SPAN></A></P>
<P><A href="http://online3da.ir" target=_blank><SPAN
style="FONT-WEIGHT: 600; TEXT-DECORATION: none"><FONT 
color=#ff99cc>کداهنگ برای وبلاگ
</FONT></SPAN></A></P>

11.از كج به صاف تبدیل شدن ، همراه با سایه


<style>

      /*Efect by : Mosbataye-bahejab.blogfa.com*/  
      img{-moz-transition:0.4s;-o-transition:0.4s;-ms-transition:0.4s;-khtml-transition:0.4s;-webkit-transition:0.4s;transition:0.4s;  
        border-radius:15px;box-shadow:0px 0px 10px #000;  
        -moz-transform:rotate(-1.5deg);-o-transform:rotate(1.5deg);-ms-transform:rotate(1.5deg);-webkit-transform:rotate(1.5deg);-khtml-transform:rotate(1.5deg);}  
      img:hover{border-radius:0px;  
      -moz-transform:rotate(0deg) scale(1.1);-o-transform:rotate(0deg);-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);-khtml-transform:rotate(0deg);  
        box-shadow:0px 0px 20px #9c9c9c;}  

</style>
<P><A href="index.html" target=_blank><SPAN
style="FONT-WEIGHT: 600; TEXT-DECORATION: none"><FONT 
color=#ff99cc>کد ِکج شدَنِ تَصآویر
</FONT></SPAN></A></P>
<P><A href="http://online3da.ir" target=_blank><SPAN
style="FONT-WEIGHT: 600; TEXT-DECORATION: none"><FONT 
color=#ff99cc>کداهنگ برای وبلاگ
</FONT></SPAN></A></P>

12.برجسته شدن لینك ها با رفتن موس


<style>
a:hover{
box-shadow:1px 4px 5px;
-moz-box-shadow:1px 4px 5px;
-o-box-shadow:1px 3px 4px;
-ms-box-shadow:1px 3px 4px;
-khtml-box-shadow:1px 3px 4px;
-webkit-box-shadow:1px 3px 4px;}

</style>
<P><A href="index.html" target=_blank><SPAN
style="FONT-WEIGHT: 600; TEXT-DECORATION: none"><FONT 
color=#ff99cc>کد ِکج شدَنِ تَصآویر
</FONT></SPAN></A></P>
<P><A href="http://online3da.ir" target=_blank><SPAN
style="FONT-WEIGHT: 600; TEXT-DECORATION: none"><FONT 
color=#ff99cc>کداهنگ برای وبلاگ
</FONT></SPAN></A></P>

13.چرخیدن ستاره دور لینك ها با رفتن موس


<style>
a:visited{color:#000000;text-decoration: none}a:hover{background:url(http://s2.picofile.com/file/7782873759/20.gif);text-decoration: none}
</style>
<P><A href="index.html" target=_blank><SPAN
style="FONT-WEIGHT: 600; TEXT-DECORATION: none"><FONT 
color=#ff99cc>کد ِکج شدَنِ تَصآویر
</FONT></SPAN></A></P>
<P><A href="http://online3da.ir" target=_blank><SPAN
style="FONT-WEIGHT: 600; TEXT-DECORATION: none"><FONT 
color=#ff99cc>کداهنگ برای وبلاگ
</FONT></SPAN></A></P>

14.سایه دار شدن لینك

<style>
a:hover{
text-shadow:0px 2px 3px;
-moz-text-shadow:0px 2px 3px;
-o-text-shadow:0px 2px 3px;
-ms-text-shadow:0px 2px 3px;
-khtml-text-shadow:0px 2px 3px;
-webkit-text-shadow:0px 2px 3px;}
</style>
<P><A href="index.html" target=_blank><SPAN
style="FONT-WEIGHT: 600; TEXT-DECORATION: none"><FONT 
color=#ff99cc>کد ِکج شدَنِ تَصآویر
</FONT></SPAN></A></P>
<P><A href="http://online3da.ir" target=_blank><SPAN
style="FONT-WEIGHT: 600; TEXT-DECORATION: none"><FONT 
color=#ff99cc>کداهنگ برای وبلاگ
</FONT></SPAN></A></P>

15.از مستطیل كوچك به دایره بزرگ تبدیل شدن با رفتن ماوس


<style>
img:hover{border-radius: 50px;
opacity:0.8;filter:alpha(opacity=80);
-webkit-transform:scale(1.1):( Webkit: Scale up image to 1.2x original size);
-moz-border-radius:6px;-webkit-border-radius:30px;
box-shadow: 10px 10px 5px #000;
-moz-transform:scale(1.1):( Mozilla scale version);
-moz-transform:scale(0.9):(Explorer scale version);
}
img:out{border-radius: 40px;
opacity:1;filter:alpha(opacity=100);
-webkit-transform:scale(0.9):( Webkit: Scale down image to 0.8x original size);
padding:0px; float:center;
-moz-transform:scale(0.9):(Mozilla scale version);
-moz-transform:scale(0.9):(Explorer scale version);
}
img{
-webkit-transform:scale(0.8); /*Webkit: Scale down image to 0.8x original size*/
-moz-transform:scale(0.8); /*Mozilla scale version*/
-o-transform:scale(0.8); /*Opera scale version*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
opacity: 0.7; /*initial opacity of images*/
margin: 0 10px 5px 0; /*margin between images*/
}
img:hover{
-webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/
-moz-transform:scale(1.1); /*Mozilla scale version*/
-o-transform:scale(1.1); /*Opera scale version*/
box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/
-webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/
-moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/
opacity: 1;
} 
</style>
<P><A href="index.html" target=_blank><SPAN
style="FONT-WEIGHT: 600; TEXT-DECORATION: none"><FONT 
color=#ff99cc>کد ِکج شدَنِ تَصآویر
</FONT></SPAN></A></P>
<P><A href="http://online3da.ir" target=_blank><SPAN
style="FONT-WEIGHT: 600; TEXT-DECORATION: none"><FONT 
color=#ff99cc>کداهنگ برای وبلاگ
</FONT></SPAN></A></P>

16.كد سیاه و سفید كردن تمامی تصاویر وبلاگ

<style> img { 
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); filter: gray; -webkit-filter: grayscale(100%); filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); 
transition: 1.5s; -webkit-transition: 1.5s; -moz-transition: 1.5s; -o-transition: 1.5s; -ms-transition: 1.5s; -khtml-transition: 1.5s; } img:hover{ -webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); -ms-filter: grayscale(0%); -o-filter: grayscale(0%); 
filter: none; 
transition: 1.5s; -webkit-transition: 1.5s; -moz-transition: 1.5s; -o-transition: 1.5s; -ms-transition: 1.5s; -khtml-transition: 1.5s; } </style>
<P><A href="index.html" target=_blank><SPAN
style="FONT-WEIGHT: 600; TEXT-DECORATION: none"><FONT 
color=#ff99cc>کد ِکج شدَنِ تَصآویر
</FONT></SPAN></A></P>
<P><A href="http://online3da.ir" target=_blank><SPAN
style="FONT-WEIGHT: 600; TEXT-DECORATION: none"><FONT 
color=#ff99cc>کداهنگ برای وبلاگ
</FONT></SPAN></A></P>