illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!

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

38725 ۲۰ بهمن ۹۰

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

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

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

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

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

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

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

          
     

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

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

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

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 18 دیدگاه برای این مطلب ارسال شده است. نظردهی برای این مطلب بسته شده است .

  • ‏‏
    محمدرضا(۲۴ بهمن ۱۳۹۰)

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

  • ‏‏

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

    • ‏‏
      لقمان آوند(۶ اسفند ۱۳۹۰)

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

  • ‏‏


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

    • ‏‏
      لقمان آوند(۲۸ فروردین ۱۳۹۱)

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

  • ‏‏


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

    • ‏‏
      لقمان آوند(۲۹ فروردین ۱۳۹۱)

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

  • ‏‏

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

  • ‏‏
    انصاری(۱۶ خرداد ۱۳۹۱)

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

  • ‏‏

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

    • ‏‏
      لقمان آوند(۱۵ مرداد ۱۳۹۱)

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

      • ‏‏

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

        • ‏‏
          لقمان آوند(۱۶ مرداد ۱۳۹۱)

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

  • ‏‏

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

    • ‏‏
      میلاد حیدری(۵ شهریور ۱۳۹۱)

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

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

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

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

  • ‏‏

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

    • ‏‏
      لقمان آوند(۲۲ آبان ۱۳۹۱)

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

  • ‏‏
    mohammadhasan99(۲۱ دی ۱۳۹۱)

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

  • ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram