انواع مختلف گرد و خمیده کردن حاشیه ها در CSS 3

دسته بندی: آموزش
زمان مطالعه: 3 دقیقه
۲۰ بهمن ۱۳۹۰

:: تا قبل از اینکه CSS3 وارد عرصه ی وب بشه ، خمیده کردن حاشیه‌ها توسط ویژگی‌های استاندارد CSS مقدور نبود . البته بعضی از مرورگر‌ها مثل Firefox برای خودشون یک سری ویژگی‌ها در CSS معرفی کردند که با استفاده از اونها ، تغیرات مد نظر ، از جمله گرد کردن حاشیه‌ها فقط در همون مرورگر قابل رویت بود !

:: ولی از زمانی که CSS3 رسما پا به دنیای وب گذاشت ، با قابلیت‌های جدید و کاربردی ای که از خودش نشون داد ، تقریبا همه ی کمبودهای ورژن‌های قبلی CSS رو جبران کرد . هر چند که هنوز هم جا برای اضافه کردن امکانات جدید هست .

:: امروز می‌خوایم در مورد گرد و خمیده کردن حاشیه ی تمامی اشیاء Html از جمله عکس‌ها (<img>)، تقسیم بندی‌ها (<div>) و ... صحبت کنیم .

:: شما باید به هر تگی از صفحه ی Html که می‌خواید حاشیه ی دایره ای و خمیده داشته باشه ، یک ویژگی class اضافه کنید و نام سلکتور CSS مورد نظر رو که در اینجا rounded هست اضافه کنید . برای آگاهی بیشتر در مورد سلکتورهای CSS و چگونگی استفاده از اونها حتما مطلب "Syntax و قواعد نوشتاری زبان CSS" رو بخونید .

خوب اول از همه بزارید به صورت تصویری ببینیم می‌خوایم چیکار کنید . در این مطلب ، تگی که قراره حاشیه ی اون رو خمیده و گرد کنیم یک عکسه که به شکل زیره :

<img src="https://7learn.com/imgs/roundedborders/flower0.jpg" />

:: که نمایش این تگ که یک عکس هستش به شکل زیره :

:: می‌خوایم بدون استفاده از نرم افزار‌های ویرایش تصویر مثل فتوشاپ و فقط با استفاده از ویژگی‌های جدید CSS3 حاشیه‌ها رو شبیه زیر گرد و خمیده کنیم :

                

:: خوب حتما منتظرید ببینید چطور می‌شه این کار رو انجام داد؟ حاشیه‌های خمیده می‌تونه کمک بسیار زیادی به زیبایی صفحات وب کنه . و صفحات رو از اون حالت مرسوم مستطیلی قدیمی دربیاره . واقعا چنین خصوصیتی در CSS لازم بود . خوب برای اینکه برای شِئ خاصی حاشیه ی خمیده بزاریم اول باید کلاس CSS اونو در تگش مشخص کنیم . به طور خاص در این مطلب نام کلاسی که برای تگمون مشخص کردیم رو rounded می‌زاریم و اونو به تگ img که در بالا گفتیم می‌خوایم حاشیش رو گرد کنیم به صورت زیر اضافه می‌کنیم :

<img class="rounded" src="https://7learn.com/imgs/roundedborders/flower0.jpg" />

حالا باید سلکتور CSS خودمون (rounded.) رو بنویسیم و از اون استفاده کنیم :

این بخش از محتوا مخصوص اعضای سایت است
چه امتیازی به این مقاله می دید؟
نویسنده لقمان آوند
بیش از 15 سال هست که برنامه نویسی می کنم و از بین همه زبون هایی که کار کردم جاوا، اسمبلی و php رو دوست دارم. دانشجوی دکترای نرم افزارم و توی دانشگاه روی پردازش بیگ دیتا و پردازش موازی کار کردم و عاشق چالش از هر نوعیش هستم! سون لرن مثل بچه منه که 12 سال براش وقت گذاشتم، اینجا همه تلاش می کنیم از شروع یادگیری تا ورود به بازر کار حوزه برنامه نویسی و IT همراهتون باشیم.

نظرات کاربران

mohammadhasan99

سلام ممنون آقای لقمان آوند کمک بسیار بزرگی کردید.

unreal

داداش دمت گرم خیلی کارت ردیفه
یه سوال . میشه کل سایت رو با css طراحی کرد یا به بقیه نرم افزارها هم احتیاج هست؟

لقمان آوند

با Css خالی خیر . حتما باید از html هم حداقلش استفاده کنی .

sadegh_1375

ببخشید css رو چطوری باید تو قالب قرار بدم؟؟؟

میلاد حیدری

برای این کار سه روش وجود دارد :

1) یک فایل css را به سایت خود ضمیمه کنید : در بخش head سایت خود این کد را درج نمائید :

&lt;link rel=&#8217;stylesheet&#8217; href=&#8217;your address file&#8217; type=&#8217;text/css&#8217;  /&gt;

2) فایلی ضمیمه نکنید و در صفحه خود آن را جای دهید :

&lt;style type=&quot;text/css&quot;&gt;
h1 {
color:blue;
}
&lt;/style&gt;

3) در هنگام نیاز آن را تعریف نمائید :

&lt;b style=&quot;color:blue&quot;&gt;7learn.com&lt;/b&gt;
m3graphic

سلام. خیلی ممنون. ولی چیکار باید بکنم که این استایل فقط روی تصاویری که داخل مطالب هست تأثیر بزاره و روی دیگر تصاویر موجود در قالب اثر نکنه؟

لقمان آوند

سلام
سلکتور css رو برای تصاویر درون تگ خاصی استفاده کن . مثلا اگه برای تگ در برگیرنده ی مطالب آیدی post گذاشته باشی سلکتور زیر فقط بر روی تصاویر موجود در این تگ اعمال میشه :

#post img{
  some css codes &#8230;
}
m3graphic

خوب مشکل اینجاس که آیدی تصاویر مطالب و تصاویر قالب هر دو تاش یکی هست img. چطوری باید برای تصاویر پست ها یه آیدی جدید بهش بدم؟

لقمان آوند

من خود تصاویر رو نگفتم . آیدی باکس مطالبت رو می گم .شما از این سلکتور استفاده کن درست میشه :

.post img{
 &#8230;
}
انصاري

واقعا مرسی که اینقدر خوبی دمت گرم خیلی استفاده می کنم

hassan
 

ممنونم لقمان جان
خیلی گلی
با تشکر از شما 🙄 🙄

 
hassan
 

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

 
لقمان آوند

بله
میشه . و مشکلی نیست . فقط استفاده ی زیاد از iframe در صفحه وب کار خیلی استانداردی نیست .

hassan
 

کمک کمک کمک
با سلام خدمت اقا لقمان
من یه سوال خیلی مهم در مورد html دارم
من دوتا صفحه html ساختم یکی با قالب و عکس و … ودیگری فقط نوشته است میخواستم بدونم میشه از قالب اصلی به نوشته جوری لینک داد که نوشته ها در جایی مخصوص در قالب اصلی بالا بیان (یعنی فکرش را بکن من بخوام هزار تا صفحه بسازم که باید همه قالب داشته باشن این کار حجم زیادی میگیره)
اگه این امکان پذیره میشه کدش را بگی چطوری
و بهم ایمیل بزنی
ممنون میشم 😥 😥 😥 😥

 
لقمان آوند

می تونی از iframe استفاده کنی برای نمایش متن های ساده در قالب اصلی . در قالب اصلی لینک بده به صفحه ای که متن ساده توشه و با استفاده از ویژگی target در لینک مشخص کن که توی اون iframe باز بشه :

&lt;a href=&quot;simplePageUrle&quot; target=&quot;txtShow&quot;&gt;LinkName&lt;/a&gt;
&lt;br&gt;&lt;iframe name=&quot;txtShow&quot; style=&quot;border:1px solid silver&quot;&gt;&lt;/iframe&gt;
mrg1367

من با دریم ویور 5 کار می کنم ولی نداره همچین گزینه ای !!!!

لقمان آوند

CSS3 رو ساپورت میکنه ؟ در هر حال شما می تونی استفاده کنی و در مرورگرهایی که CSS3 رو پشتیبانی نتیجه رو ببینید .

محمدرضا

جالب بود. ولی من این کارو با CSS 2 هم انجام داده بودم.

ارسال دیدگاه
خوشحال میشیم دیدگاه و یا تجربیات خودتون رو با ما در میون بذارید :