Instagram
اخبار سایت :
  • هیچی فقط همیشه سالم و سلامت باشین :دی

آموزش گرد کردن گوشه های تصاویر با استفاده css3

سلام دوستان امروز براتون آموزش گرد کردن گوشه های تصاویر با استفاده از زبان برنامه
نویسی قدرتمنده سی اس اس [CSS3] گذاشته ایم !

 

 

اینکار بسیار ساده میباشد فقط کافیست در دستور های CSS تان دستور border-radius را اضافه کرده و برای مرورگر های مختلف تنظیم کنید .
ما اینکار را برای سه مرورگر فایرفاکس ، اپرا و کروم که امروزه پر مخاطب ترین مرورگر ها هستند انجام میدهیم .
ابتدا کلاس مورد نظرمان را اسم گذاری میکنیم ما اسم کلاس را wikivb میگذاریم سپس با دو کروشه محل قرار گیری دستور ها را باز و بسته میکنیم .

} wikivb.
{

سپس در بین کروشه ها روع به تایپ دستور ها میکنیم در دستور های زیر o برای مرورگر های اپرا میباشد ، webkit برای مرورگر های کروم بوده و moz برای فایرفاکس است .

} wikivb.
;border-radius: 5px
;o-border-radius: 5px-
;webkit-border-radius: 5px-
;moz-border-radius: 5px-
{

توجه داشته باشید که در بالا کد ها ۵ پیکس داده شده اند و دستور میدهند که چهار گوشه به مقدار مساوی ۵ پیکسل گرد شوند اما ممکن است شما بخواهید ار گوشه به اندازه متفاوتی گرد شود بنابر این به صورت زیر تایپ میکنید :

} wikivb.
;border-radius: 5px 6px 7px 8px
;o-border-radius: 5px 6px 7px 8px-
;webkit-border-radius: 5px 6px 7px 8px-
;moz-border-radius: 5px 6px 7px 8px-
{

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

منبع: کاربر science51 در همین سایت

اقا اینو من تو نرم افزار طراحی وب میزنم ولی میگه همچین کدی وجود ندار
border-radius
پاسخ : نرم افزار حتما از سی اس اس سه پشتیبانی نمی کنه ...
با تشکر
ممنون
3 نکته:
1) سی اس اس 3 زبان برنامه نویسی محسوب نمیشه!
2) از border-radius میشه برای هر element غیر از تصویر هم استفاده کرد
3) prefix مربوط به IE10 هم -ms-border-radius است
پاسخ : همونطور که میبینید منبع یکی از کاربران ما هست.
البته زبان برنامه نویسی CSS3 درست هست چون عدد 3 ورژن اون زبان هست که گفته شده. مانند نحوه نوشتن و گفتن یک نرم افزار به همراه ورژن اون.
جواب سوال دوم بله هست. البته مشکل این قسمت این هست که اگر گرد بودن زیاد باشه متن از عنصر خارج میشه.
prefix های بیشتری هم مثل khtml و o و ... وجود داره.

نام
ایمیل (منتشر نمی‌شود) (لازم)
وبسایت
:) :( ;) :D ;)) :X :? :P :* =(( :O @};- :B /:) :S
نظر خصوصی
مشخصات شما ذخیره شود ؟ [حذف مشخصات] [شکلک ها]
کد امنیتیرفرش کد امنیتی
کلاس های آنلاین فعال

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

مدرس: محمد و اقبال
آموزش PHP - جلسه اول
پنجشنبه 04 تیر 1394 - 17:00
هیچ کلاس فعالی موجود نیست.
کاربران آنلاین
آمار
مطالب : 792
نظرات : 4408
تعداد اعضا : 36759
افراد آنلاین : 4
بازدید امروز : 324
بازدید دیروز : 841
گوگل امروز : 17
گوگل دیروز : 65
بازدید هفته : 7,492
بازدید ماه : 20,091
بازدید سال : 26,875
بازدید کلی : 10,808,577