تبلیغات در اینترنتclose
آموزش css - استایل دادن به تصاویر
سفارش تبليغات در انجــمن قالب گراف ورود به تاپيک اطلاعيه هاي تابستانه قالب گراف
امور گرافيکي و کدنويسي وب خود را به جي جي ميزبان بسپاريد
نام کاربري : پسورد : فراموش
سلام
شما با استفاده از این آموزش میتونید به تصاویر خود استایل بدهید

خوب بریم سراغ آموزش
اول از همه باید یک تگ

در

قالب خودتون باز کنید
(اگرم قالبتون فایل سی اس اس داره میتونید توی اون قرار بدید ولی این روش راحت تره)
بعد که این تگ رو قرار دادید باید داخل اون استایل ها رو قرار بدین
اگر میخواین تمام تصاویر وبلاگ یا سایتتون به این شکل در بیاد میتونید با استفاده از
کد:
img{
}

به تمامی تصاویر استایل بدید اگر هم نه میخواین مثلا فقط تصاویر بخش نوشته هاتون به این شکل در بیاد باید اول دایو مورد نظر(همونی که تصاویر درش جا میگیره)پیدا کنید و اون کلاس اون رو به این شکل بنویسید در استایل
کد:
.divclass img{
}

منظور از
کد:
.divclass

همون کلاس دایوتون هست
و منظور از
کد:
.divclass img{

یعنی فقط تصاویر موجود در این دایو استایل بگیرند
خوب حالا ما مشخص کردیم کجا و چی چی بنویسیم
استایلی که من نوشتم برای آواتار سید این شکلی است
کد:
.ax img{ border:2px solid #ddd; border-radius:100%; transform:scale(0.95); }.ax img:hover{ border:2px solid #ddd; -moz-transition:all 1s ease; -o-transition:all 1s ease; -khtml-transition:all 1s ease; -webkit-transition:all 1s ease; transition:all 1s ease; border-radius:10%; transform:scale(1); }

در استایل بابا گفتم تصاویر موجود در کلاس
ax
این استایل و هاور رو بگیرند
هاور چیست؟
هاور چیزیه که وقتی ما موس رو روی تصویر یا متنی که بهش هاور دادیم قرار بدیم اون استایلی رو میگیره که ما مشخص کردیم
مثلا من هاور این تصویر رو
کد:
.ax img:hover{ border:2px solid #ddd; -moz-transition:all 1s ease; -o-transition:all 1s ease; -khtml-transition:all 1s ease; -webkit-transition:all 1s ease; transition:all 1s ease; border-radius:10%; transform:scale(1); }

قرار دادم که داره میگه وقتی موس میره روی تصویر حاشیه یا بردر رنگ خاکستری با میزان 2 پیکسل بگیره و میزان گرد شدن تصویر به 10 درصد برسد و این عملیات در طی 1 ثانیه انجام بگیرد
خوب میریم تا استایل ها رو معرفی کنیم
کد:
border:2px solid #ddd;

میگه که یک حاشیه ساده با اندازه 2 پیکسل و رنگ خاکستری ایجاد کن
کد:
border-radius:100%;

این داره میگه خمیده تصویر به اندازه صد در صد تصویر باشه(یعنی تا جایی که امکان داره گرد بشن)
کد:
transform:scale(0.95);

این داره میگه اندازه تصویر به اندازه 0.95اندازه واقعیش باشه
کد:
-moz-transition:all 1s ease; -o-transition:all 1s ease; -khtml-transition:all 1s ease; -webkit-transition:all 1s ease; transition:all 1s ease;

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

تشکر شده:

4 کاربر از 00mostafa00 به خاطر اين مطلب مفيد تشکر کرده اند: web-des / ramin0098 / mahdio77 / 78nbm78 /

پاسخ ها

تشکر شده:

1 کاربر از web-des به خاطر اين مطلب مفيد تشکر کرده اند: 00mostafa00 /

تشکر شده:

1 کاربر از mahdio77 به خاطر اين مطلب مفيد تشکر کرده اند: 00mostafa00 /

مرسی عزیز آموزشت خوب بود !
ولی کاشکی یک دمو از پایان کار میزاشتی ! یعنی مثلا ما این همه استایل نوشتیم ، آخر سر عکس به چه شکلی در میاد ؟
مرسی ... !
امضاي کاربر :
توسعه دهنده سایت و نرم افزار، کارشناس سئو و بهینه سازی

آدرس سایت : navidbehroozi.ir

تشکر شده:

1 کاربر از 78nbm78 به خاطر اين مطلب مفيد تشکر کرده اند: 00mostafa00 /

تشکر شده:

1 کاربر از alex به خاطر اين مطلب مفيد تشکر کرده اند: 00mostafa00 /


براي نمايش پاسخ جديد نيازي به رفرش صفحه نيست روي تازه سازي پاسخ ها کليک کنيد !



برای ارسال پاسخ ابتدا باید لوگین یا ثبت نام کنید.