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

- visibility ١٨ mode_comment

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

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

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

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

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

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

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

          
     

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

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

.: فقط اعضاي سايت مجاز به ديدن اين قسمت هستند :.
در صورتي که عضو سايت هستيد می توانید لاگین شوید.
در غير اين صورت در کمتر از 1 دقيقه مي توانيد در سايت عضو شويد.

comment دیدگاه کاربران
محمدرضا

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

mrg1367

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

لقمان آوند

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

hassan


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

لقمان آوند

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

hassan


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

لقمان آوند

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

hassan

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

انصاري

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

m3graphic

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

لقمان آوند

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

m3graphic

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

لقمان آوند

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

sadegh_1375

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

میلاد حیدری

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

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

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

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

unreal

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

لقمان آوند

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

mohammadhasan99

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

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.