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

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



  آیا می دانید تا کنون 6251 نفر در 14 دوره آموزشی سون لرن ثبت نام کرده اند !

ایجاد border های سه گوش زیبا در CSS

5069 ۱۶ بهمن ۹۲

بنام یگانه هستی بخش

سلام خدمت همگی دوستان سون لرن.امیدوارم از این تعطیلات زمستونی لذت ببرید.امروز با آموزش کاربردی دیگری با شما همراه هستم؛در این آموزش یاد میگیریم که چطور میتونیم با سی اس اس ، border هایی سه گوش(مثلثی شکل) درست کنیم.

عکس زیر روش کار رو به طور کل توضیح میده.(این کار یه ترفنده)

borders

خب میریم سراغ اصل مطلب یعنی  همون کدهای CSS مون؛

بوردر اول

ابتدا سری به دموی کار بزنید؛

HTML Code:

CSS Code:

توضیح:در خط اول و دوم اندازه ی المنت رو تعیین میکنیم؛بعد در خط سوم رنگ پس زمینه ی اون رو مشخص میکنیم.

 

نکته :

نحوه ی مقداردهی چندگانه ی خاصیت border:

اگر تنها یک مقدار قرار دهیم، آن یک مقدار بر چهار طرف المنتمون اعمال میشه.و اگر دو مقدار قرار بدیم، مقدار اول بر طرف بالا و پایین و مقدار دوم بر طرف چپ و راست اعمال میشه.

در خط های 5تا7 ، نوع border را تعیین کردیم(اندازه بوردر:50 پیکسل ، نوع بوردر:solid ، رنگ بوردر :آبی تیره)

بوردر دوم

خب حالا اگه رنگ بوردر هر طرف رو عوض کنیم به نظرتون چی میشه؟؟؟!!!!

HTML:

CSS:

توضیح:همونطور که در بالا توضیحی در مورد مقدار دهی چندگانه دادیم، میبینید که در کد بالا به بوردر هر طرف یک رنگ متفاوت دادیم(خط 7).حالا دمو رو تماشا کنید؛

بوردر سوم

خب دیدید که چیشد!

حالا اگه عرض و ارتفاع المنت رو 0 پیکسل بذاریم به نظرتون بوردر ها چطوری میشن؟؟!!

HTML:

CSS:

توضیح:عرض و ارتفاع رو 0 پیکسل معین کردیم و مقدار پس زمینه را(خط 4) transparent (شفاف) قرار دادیم.خروجی رو ببینید.

بوردر چهارم

دیدید که چه جالب شد!

به نظرتون اگه رنگ بوردر سه طرف رو بی رنگ(transparent یا شفاف) کنیم چی میشه؟!!!

HTML:

CSS:

شما خودتون هم دست به کیبورد بشید  و مثلا بوردر دو طرف رو بی رنگ کنید بعد خروجی رو تماشا کنید ... . دموی این قسمت رو هم نگاه کنید.

بوردر پنجم

حالا دیگه کاملا معلوم شد که این بوردر های سه گوش چطور درست میشه.به نظرتون میشه با این روش ، آیکن مرورگر کروم رو طراحی کنیم(تقریبا یه چیزی شبیه اون؟!)

HTML:

CSS:

بوردر ششم

یکمی شبیهش شدا!

اگه گِردِش کنیم عالی میشه :)

HTML:

CSS:

به نظرتون از این بهتر میشه با کد نوشتش؟!(اگه میگید آره پس خودتون بنویسید :) )

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

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

موفق باشید؛یا علی

 

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

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

  • ‏‏
    رضا ساطع بیدگلی(۱۶ بهمن ۱۳۹۲)

    سلام وای عجب آموزشهای قشنگی 😀 😀
    ببخشید ایمیل شخصی تون چیه ؟؟

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

    خیلی عالی بود علیجان …
    مطالبت هر روز بهتر از دیروزند !!!

    • ‏‏
      علی امینی(۱۶ بهمن ۱۳۹۲)

      ممنون
      ان شاءالله همینطوری هم خواهد بود داداش

  • ‏‏

    سلاام عالی بود ❓

  • ‏‏

    باسلام
    مثل همیشه عالی!! از سایت و مطالب خوبتون ممنونیم .

  • ‏‏

    سلام .
    خیلی خوب و جالب و کاربردی بود …. لایک فراووون و تشکر بسیار ❓ ❓

  • ‏‏

    خیلی جالبه ، ممنون :)

  • ‏‏

    خیلی جالب بود… متشکرم

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram