آموزش های حرفه ای
مای دیزاین به عنوان یکی از تولید کنندگان محتوای آموزشی در زمینه طراحی وب و گرافیک به صورت تصویری، با کیفیت و اختصاصی در خدمت شما کاربران عزیز می باشد!
نرم افزار آندروید
طراحی و ساخت نرم افزار آندروید خدمت جدیدی است که در مای دیزاین ارائه میشود. داشتن نرم افزار برای گوشی های هوشمند امری جدید و هیجان انگیز می باشد!
طراحی وب و گرافیک
یکی از خدمات ما طراحی سایت های ایستا و پویا با جدید ترین متد های روز دنیاست. ساخت قالب هایی سبک و در عین حال زیبا، با استفاده از وردپرس، تخصص ماست!
تغییر اندازه تصاویر به کمک CSS3

تغییر اندازه تصاویر به کمک CSS3
امروز میخوام براتون یکی دیگه از کد های css3 رو معرفی کنم. شما با استفاده از این کد با بردن موس بر روی تصویر میتوانید سایز تصویر را تغییر دهید بدون اینکه در قالب بندی سایتتان تغییری ایجاد شود.
ابتدا کد زیر را برای وارد کردن تصویر مینویسیم:

<div id="ali"><img src="آدرس" alt="" width="عرض" height="طول" /></div>

حال برای تصویرمون استایل مینویسیم:

#ali img:hover {
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -o-transform: scale(1.5);
    transform: scale(1.5);
}

برای تغییر اندازه عکس عدد داخل پرانتز ها را تغییر دهید. در واقع عدد داخل پرانتز ضریب اندازه عکس میشود. اگر عدد بالای صفر باشد تصویر بزرگتر، و اگر کوچکتر از صفر باشد کوچکتر میشود.
برای کند کردن و نرم کردن حرکت باید به آن زمان دهیم که کد زیر را اضافه میکنیم:

#ali-takide img {
    -webkit-transition : all 1s ease-in-out;
    -moz-transition : all 1s ease-in-out;
    -o-transition : all 1s ease-in-out;
    transition : all 1s ease-in-out;
}

برای تغییر سرعت میبایست عدد ۱s (ثانیه) را به عدد دلخواهتان تغییر دهید.

2 پاسخ به “تغییر اندازه تصاویر به کمک CSS3”

  1. جاویدی می‌گه:

    ممنون از آموزشتون

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

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