کد بزرگنمایی- افکت-کد سایه دار کردن-کد چرخش- کد تار کردن
برای مشاهده نمونه افکت تصویر به لینک زیر مراجعه کنید
http://reza-rezazadeh.ir/page/473
نمونه کد دوم
http://reza-rezazadeh.ir/page/468
گاها مشاهده میکنید تصاویر وبلاگ به محض اینکه ماوس روی آن قرار میگیرد به صورت افکت های تعریف شده در می آیند
برای این کار بایستی از کد زیر استفاده کنید:
در این کد تمامی افکتها از قبیل بزرگنمایی . چرخش . سایه . حاشیه .تار کردن تصویر ایجاد شده است.
توجه 1 :برای استفاده کد را در بخش head قالب قرار دهید.
توجه 2 :برای اینکه تمام تصاویر موجود در وبلاگ دارای افکت باشد از کد شماره 1 استفاده کنید و اگر از کد شماره 2 استفاده میکنید فقط بخش از وبلاگ که بین دو کد تعریف شده زیر قرار میگیرد دارای افکت میشود
مثلا فقط تمامی تصاویر پست های ارسالی
<div class="post">بخش مربوطه را میان این دو کد قرار دهید </div>
توجه 3 : تنها یکی از کد های شماره 1 یا شماره 2 را استفاده کنید
توجه 4: وقتی میگوییم این کد ها را در قسمت head قالبتون قرار دهید منظورمان این است که:
یعنی یا قبل از تگ <head/> یا بعد از تگ <head> بزارید
احتمالا کد در باکس زیر از قالب نوشتار درست نباشد بهتر است کد را به صورت فایل نوت دانلود کنید
کدشماره (1) را از اینجا دانلود کنید
کد شماره (2) را از اینجا دانلود کنید
حجم فایل 4 کیلوبایت (4Kbyte)
پسورد : www.reza-rezazadeh.ir
|
</head>
<style>
img{
-webkit-border-radius:20px;
-moz-border-radius:20px;
-khtml-border-radius:20px;
-o-border-radius:20px;
border-radius:20px;
-webkit-transform:scale(0.9);
-moz-transform:scale(0.9);
-o-transform:scale(0.9);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
opacity: 0.8;
margin: 0 10px 9px 0;
}
img:hover
{
-webkit-border-radius:0px;
-moz-border-radius:0px;
-khtml-border-radius:0px;
-o-border-radius:0px;
border-radius:0px;
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
box-shadow:0px 0px 30px #FF0000;
-webkit-box-shadow:0px 0px 30px #FF0000;
-moz-box-shadow:0px 0px 80px #FF0000;
opacity: 1;
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
}
</style>
</head>
|
در اصل کد به صورت زیر در فایل نوت ذخیره شده است
توضیحاتی در مورد کد :
| مقدار |
توضیحات |
کد |
| - |
مشخصات کلاس تصویر اولیه |
} img |
| - |
مشخصات کلاس تصویر ثانویه |
img:hover |
| با مقدار دهی گوشه تصاویر خمیده میشود |
حاشیه |
border-radius |
| با قرار دادن اندازه روی 1 تصویر واقعی مشود |
اندازه تصویر |
webkit-transform:scale |
| با مقداردهی زمان بزرگنمایی کنترل مشود |
مدت زمان تغیر سایز |
webkit-transition-duration |
| اگر مقدارکمتر از 1 بپذیرد تصویرکمرنگ میشود |
شفافیت |
opacity |
| مثبت چرخش به راست و منفی چرخش به چپ |
چرخش |
webkit-transform: rotate |
| تغییر رنگ#FF0000 و px |
سایه |
box-shadow |
کدشماره (1) را از اینجا دانلود کنید
کد شماره (2) را از اینجا دانلود کنید
حجم فایل 4 کیلوبایت (4Kbyte)
پسورد : www.reza-rezazadeh.ir
علمی فرهنگی
مهندسی الکترونیک
کامپیوتر
اعضای انجمن(223)
مدیریت انجمن
rezazadeh69 )
خانه
مطالب(494)
دوستان (259)
گالری تصاویر (1757)
کلیپها (16)
نظرسنجی (7)
سایت و اپلیکیشن آموزش زبان انگلیسی urg.ir
چگونگی درج آگهی در سایت و قسمت تبلیغات
تلگرام 
فیسبوک
تویتر