سلام
شما با استفاده از این آموزش میتونید به تصاویر خود استایل بدهید
خوب بریم سراغ آموزش
اول از همه باید یک تگ
در
قالب خودتون باز کنید
(اگرم قالبتون فایل سی اس اس داره میتونید توی اون قرار بدید ولی این روش راحت تره)
بعد که این تگ رو قرار دادید باید داخل اون استایل ها رو قرار بدین
اگر میخواین تمام تصاویر وبلاگ یا سایتتون به این شکل در بیاد میتونید با استفاده از
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;این داره میگه عملیات در چقدر به انجام برسد
من روی یک ثانیه قرار دادم
امیدوارم این پست مورد استفاده قرار بگیره
با تشکر مصطفی
لطفا نگید ابتدایی هست
از اول توضیح دادم که کسی که هیچی یاد نداره هم بفهمه ممنون
