کد کج شدن تصاویر برای وبلاگ و سایت

کد کج شدن تصاویر

 
کد بزرگ شدن بصورت مستطیل
کد بزرگ شدن با لبه های گرد
کد شکل برگ شدن ثابت
کد کج شدن آهسته تصویر با سایه
کد کج شدن و چرخشی
کد فقط گرد و سایه دار شدن گوشه عکس
کد چرخش کامل عکس
کد از حالت عادی تبدیل به برگ شدن با رفتن موس
کد کج شدن ساده تصویر به همراه واضح تر شدن
کد فقط گرد شدن گوشه های عکس
کد برجسته شدن لینک ها با رفتن موس
کد چرخیدن ستاره دور لینک ها با رفتن موس

همه ی کد ها درادامه مطلب

 

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="http://fullcodmusic.blogsky.com/1393/05/25/post-1580/" target=_blank><SPAN style="FONT-WEIGHT: 600; TEXT-DECORATION: none"><FONT color=#ff99cc>کد ِکج شدَنِ تَصآویر </FONT></SPAN></A></P> <a target="_blank" href="http://fullcodmusic.blogsky.com">کد آهنگ برای وبلاگ</a>

----------------------

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="http://fullcodmusic.blogsky.com/1393/05/25/post-1580/" target=_blank><SPAN style="FONT-WEIGHT: 600; TEXT-DECORATION: none"><FONT color=#ff99cc>کد ِکج شدَنِ تَصآویر </FONT></SPAN></A></P> <a target="_blank" href="http://fullcodmusic.blogsky.com">کد آهنگ برای وبلاگ</a>

----------------------

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="http://fullcodmusic.blogsky.com/1393/05/25/post-1580/" target=_blank><SPAN style="FONT-WEIGHT: 600; TEXT-DECORATION: none"><FONT color=#ff99cc>کد ِکج شدَنِ تَصآویر </FONT></SPAN></A></P> <a target="_blank" href="http://fullcodmusic.blogsky.com">کد آهنگ برای وبلاگ</a>

----------------------

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="http://fullcodmusic.blogsky.com/1393/05/25/post-1580/" target=_blank><SPAN style="FONT-WEIGHT: 600; TEXT-DECORATION: none"><FONT color=#ff99cc>کد ِکج شدَنِ تَصآویر </FONT></SPAN></A></P> <a target="_blank" href="http://fullcodmusic.blogsky.com">کد آهنگ برای وبلاگ</a>

----------------------

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="http://fullcodmusic.blogsky.com/1393/05/25/post-1580/" target=_blank><SPAN style="FONT-WEIGHT: 600; TEXT-DECORATION: none"><FONT color=#ff99cc>کد ِکج شدَنِ تَصآویر </FONT></SPAN></A></P> <a target="_blank" href="http://fullcodmusic.blogsky.com">کد آهنگ برای وبلاگ</a>

----------------------

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="http://fullcodmusic.blogsky.com/1393/05/25/post-1580/" target=_blank><SPAN style="FONT-WEIGHT: 600; TEXT-DECORATION: none"><FONT color=#ff99cc>کد ِکج شدَنِ تَصآویر </FONT></SPAN></A></P> <a target="_blank" href="http://fullcodmusic.blogsky.com">کد آهنگ برای وبلاگ</a>

----------------------

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="http://fullcodmusic.blogsky.com/1393/05/25/post-1580/" target=_blank><SPAN style="FONT-WEIGHT: 600; TEXT-DECORATION: none"><FONT color=#ff99cc>کد ِکج شدَنِ تَصآویر </FONT></SPAN></A></P> <a target="_blank" href="http://fullcodmusic.blogsky.com">کد آهنگ برای وبلاگ</a>

----------------------

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="http://fullcodmusic.blogsky.com/1393/05/25/post-1580/" target=_blank><SPAN style="FONT-WEIGHT: 600; TEXT-DECORATION: none"><FONT color=#ff99cc>کد ِکج شدَنِ تَصآویر </FONT></SPAN></A></P> <a target="_blank" href="http://fullcodmusic.blogsky.com">کد آهنگ برای وبلاگ</a>

----------------------

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="http://fullcodmusic.blogsky.com/1393/05/25/post-1580/" target=_blank><SPAN style="FONT-WEIGHT: 600; TEXT-DECORATION: none"><FONT color=#ff99cc>کد ِکج شدَنِ تَصآویر </FONT></SPAN></A></P> <a target="_blank" href="http://fullcodmusic.blogsky.com/">.</a>

----------------------

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="http://fullcodmusic.blogsky.com/1393/05/25/post-1580/" target=_blank><SPAN style="FONT-WEIGHT: 600; TEXT-DECORATION: none"><FONT color=#ff99cc>کد ِکج شدَنِ تَصآویر </FONT></SPAN></A></P> <a target="_blank" href="http://fullcodmusic.blogsky.com">کد آهنگ برای وبلاگ</a>

----------------------

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="http://fullcodmusic.blogsky.com/1393/05/25/post-1580/" target=_blank><SPAN style="FONT-WEIGHT: 600; TEXT-DECORATION: none"><FONT color=#ff99cc>کد ِکج شدَنِ تَصآویر </FONT></SPAN></A></P> <a target="_blank" href="http://fullcodmusic.blogsky.com">.</a>

----------------------

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="http://fullcodmusic.blogsky.com/1393/05/25/post-1580/" target=_blank><SPAN style="FONT-WEIGHT: 600; TEXT-DECORATION: none"><FONT color=#ff99cc>کد ِکج شدَنِ تَصآویر </FONT></SPAN></A></P> <a target="_blank" href="http://fullcodmusic.blogsky.com">کد آهنگ برای وبلاگ</a>

----------------------

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="http://fullcodmusic.blogsky.com/1393/05/25/post-1580/" target=_blank><SPAN style="FONT-WEIGHT: 600; TEXT-DECORATION: none"><FONT color=#ff99cc>کد ِکج شدَنِ تَصآویر </FONT></SPAN></A></P> <a target="_blank" href="http://fullcodmusic.blogsky.com">کد آهنگ برای وبلاگ</a>

----------------------