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

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



  آیا می دانید دوره های آموزشی سون لرن از جامع ترین و کاربردی ترین آموزش های موجود در سطح وب فارسی است!

آموزش تغییر و استایل دهی checkbox در CSS3

16 1785 ۲۸ خرداد ۹۴

تکنیک های CSS3

سلام عرض میکنم خدمت تمامی کاربران عزیز 7لرن. با اولین پستم در سایت در خدمتتون هستم :->

امیدوارم در این مدتی که در خدمتتون هستم که امیدوارم زیاد باشه:) بتونم مطالب مفیدی رو بزارم و مورد توجهتون قرار بگیره. بریم سراغ بهترین پست هفته!!! 😀

آموزش تکنیک های پیشرفته در CSS3

در این پست آموزشی قصد دارم که آموزش تغییر checkbox ها پیش فرض و یا همون استایل دهی checkbox در CSS3 رو بهتون نشون بدم که میتونید با استفاه از این تکنیک checkbox های سفارشی بسازید و هر استایل که میخواید رو بهش بدید. برای شروع کار بهتره روی لینک زیر کلیک کنید و دموی کار رو ببینید.

خب؛ حالا که دمو رو دیدید بهتره بدون معطلی بریم سراغ آموزش

کد HTML

این تمامی کدی هست که برای این مورد ما نیاز داریم. داخل تگ form یه تگ label با ویژگی forتعریف میکنیم که باید مقدار داخل ویژگی for ، با id تگ input یکی باشه. که وقتی روی متن label کلیک میکنیم checkbox انتخاب بشه.

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

نوبت توضیح کدهاست:)

با انتخاب این سلکتور یعنی تمامی input هایی که ویژگی type=”checkbox” دارن رو از دید کاربر مخفی کن. دلیل ایکار مشخصه. چون ما میخوایم از checkbox هایی که خودمون سفارشی درست میکنیم، استفاده کنیم.

میرسیم به این کد

 

احتمالا با این سلکتورهای آشنایی نداشته باشید. برای مطالعه بیشتر میتونید این لینک رو مطالعه کنید. این سلکتور تگ label رو که دقیقا بعد از تگ input که type اون برابر checkbox باشه رو سلکت میکنه و با سلکتور :before میاد و اون محتوایی رو که ما براش در نظر گرفتیم رو جلوش قرار میده که در کد زیر رو شامل میشه

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

وقتی که شما از سلکتور :before استفاده میکنین باید مشخص کنید که بعد از اون تگی که انتخاب کردین میخواید دقیقا چی قرار بگیره، اگه میخواید متن باشه که داخل همین content بین “” متنتون رو مینویسید و به صفحه اضافه میشه. ولی ما در اینجا متن نمیخوایم و میخوایم یه شکلی رو مثل checkbox شبیه سازی کنیم. پس بین “” چیزی قرار نمیگیره.

چون سلکتورمون به طور پیش فرض inline هست پس width , height نمیگیره. پس display رو به inline-block تغییر میدیم

این خصوصیت رو هم قرار دادیم که از نظر عمودی باکسی که قرار میدیم با محتوای label تراز بشه

خب میرسیم به توضیح قسمت آخر کدمون: یعنی

 

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

محتوای content در اینجا یه کد ASCII هست که باهاش علامت تیک رو اضافه میکنیم. میتونید در این لینک لیست کاملش رو ببینید. البته میتونیم از font-icon ها هم استفاده کنیم و خیلی قشنگ تر و حرفه ای تر checkbox اختصاصیمون رو درست کنیم اما چون در اینجا جنبه آموزشی کار رو در نظر گرفتیم میتونید خودتون اینکار رو انجام بدید. تو سورس دمو ممکنه که یک سری استایل های دیگه هم ببینید که صرفا برای قشنگ تر شدن کار هست، مثل استایل هایی که برای وسط چین کردن فرم در وسط صفحه لازم بودن که با توجه به قالبتون متفاوته.

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

 

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

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

  • ‏‏

    سلام داداش افشین مطلب مفیدی بود ممنون

  • ‏‏
    وحید صالحی(۲۹ خرداد ۱۳۹۴)

    به افشین خان خوش اومدی … اینطوری که تو داری پیش میری فکر کنم بزودی جای ما رو هم در سون لرن بگیری 😉
    انشاالله توی مسیری که در پیش گرفتی موفق باشی چون واقعا انگیزه ,پشتکار و استعدادش رو داری ❓
    درضمن حالا که داری مطلب میزاری یه تصویری از خودت هم برای ما بزار تا قیافت روببینیم. 😎

    • ‏‏
      افشین زندی(۲۹ خرداد ۱۳۹۴)

      سلام استاد صالحی
      لطف دارید استاد، جای اساتیدی مثل شما و استاد آوند همیشه تو قلب ماس، گرفتنی نیست. ❓
      الان تو سیستم عکس ندارم، تو این هفته حتما میزارم، ممنون بابت تذکرتون

  • ‏‏

    سلام داداش
    یک شروع خیلی خوبی بود از آشنایی که باهات دارم مطمئنم در کارت موفق خواهی بود 😉
    بهترین ها رو برات آرزو دارم امیدوارم به هدفت برسی و همیشه سربلند و موفق باشی
    پرچمت بالاس ❓

  • ‏‏
    رضا قاسم نژادیان(۲۹ خرداد ۱۳۹۴)

    سلام
    افشین جان مطلب فوق العاده و جذاب بود ، امیدوارم همیشه موفق باشی ❓ ❓

  • ‏‏

    سلام بهتون تبریک میگم
    ممنون مطلب خوبی بود

  • ‏‏
    افشین زندی(۲۹ خرداد ۱۳۹۴)

    سلام، ممنون
    خوشحالم مفید بوده:)

  • ‏‏

    سلام افشین خان خیلی خوب بود امیدوارم که در سون لرن و کلا طراحی وب موفق باشی. ❓ ❓

  • ‏‏
    Aref Behdad(۱۱ تیر ۱۳۹۴)

    سلام
    خیلی خوب شد که هر قسمت کد رو جدا جدا توضیح دادی ❓
    فدایی داری داداش 😀

  • ‏‏
    مجید یوسفی(۶ فروردین ۱۳۹۵)

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

  • ارسال دیدگاه

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram