سوال و 6 جواب
(آخرین جواب : 92/8/10)سلام چگونه عکسهای توی وبلاگ. چرخشی میشن.
یعنی وقتی روی عکس میرویم کمی میچرخد
1392/8/8
#خدمات نی نی وبلاگ
#آپلود عکس
نی نی وبلاگی ام (ورود)
نی نی وبلاگی نیستم (ثبت نام)
http://webiha-pix.mihanblog.com
نحوه استفاده :
در صورتی که انجام مراحل ذیل را برای خود مشکل می بیندید ؛ کد را در قسمت تنظیمات ، بخش کد های اضاقی یا اسکریپ ها وبلاگ خود کپی کنید .
1- به قسمت ویرایش قالب خود بروید و کد < head > یا < head /> را پیدا کنید
2- کد مورد نظر را بین این دو کپی کنید
1.بزرگ شدن بصورت مستطیل
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); } کد ِکج شدَنِ تَصآویر کداهنگ برای وبلاگ
2.بزرگ شدن با لبه های گرد
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; } کد ِکج شدَنِ تَصآویر کداهنگ برای وبلاگ
3.شكل برگ شدن ثابت
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); } کد ِکج شدَنِ تَصآویر کداهنگ برای وبلاگ
4.كج شدن آهسته تصویر با سایه
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); } کد ِکج شدَنِ تَصآویر کداهنگ برای وبلاگ
5.كج شدن و چرخشی
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);} کد ِکج شدَنِ تَصآویر کداهنگ برای وبلاگ
6.فقط گرد و سایه دار شدن گوشه عكس
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); } کد ِکج شدَنِ تَصآویر کداهنگ برای وبلاگ
7.چرخش كامل عكس
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); } کد ِکج شدَنِ تَصآویر کداهنگ برای وبلاگ
8.از حالت عادی تبدیل به برگ شدن با رفتن موس
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); } کد ِکج شدَنِ تَصآویر کداهنگ برای وبلاگ
9.كج شدن ساده تصویر به همراه واضح تر شدن
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); } کد ِکج شدَنِ تَصآویر کداهنگ برای وبلاگ
10.فقط گرد شدن گوشه های عكس
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); } کد ِکج شدَنِ تَصآویر کداهنگ برای وبلاگ
11.از كج به صاف تبدیل شدن ، همراه با سایه
/*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;} کد ِکج شدَنِ تَصآویر کداهنگ برای وبلاگ
12.برجسته شدن لینك ها با رفتن موس
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;} کد ِکج شدَنِ تَصآویر کداهنگ برای وبلاگ
13.چرخیدن ستاره دور لینك ها با رفتن موس
a:visited{color:#000000;text-decoration: none}a:hover{background:url(http://s2.picofile.com/file/7782873759/20.gif);text-decoration: none} کد ِکج شدَنِ تَصآویر کداهنگ برای وبلاگ
14.سایه دار شدن لینك
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;} کد ِکج شدَنِ تَصآویر کداهنگ برای وبلاگ
15.از مستطیل كوچك به دایره بزرگ تبدیل شدن با رفتن ماوس
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; } کد ِکج شدَنِ تَصآویر کداهنگ برای وبلاگ
وبلاگمون آدرسش داره تغییر میکنه
حتما آدرس جدید رو لینک کنیـد