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

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



  آیا می دانید با دوره های آموزشی سون لرن می توانید از 0 تا 100 طراحی وب را در منزل فراگیرید!

آموزش CSS ( فصل چهارم) : کار با رنگ ها و تصویر زمینه

29849 ۲۲ آبان ۹۱
1 2

خصوصیت Color

با استفاده از این خاصیت می توان رنگ متن عناصر را تغییر داد. و به پنج طریق می توان آن را مقدار دهی کرد.

  • استفاده از کلمات کلیدی : می توان از 16 رنگ استاندارد برای مقدار دهی به color استفاده کرد عبارتند از:

مثال:

  • استفاده از مبنای هگزا دسیمال  : رنگ ها را می توان بر مبنای عبارت متناظر آنها در مبنای 16 به کار برد. در این عبارت می توان سه عدد در مبنای 16 نوشت. عدد اول معرف رنگ قرمز، عدد دوم معرف رنگ سبز و عدد سوم معرف رنگ آبی است. فرم کلی این عبارت ها به شکل rrggbb# است. برای مثال 000000# معرف رنگ سیاه #ffffff معرف رنگ سفید و #0000ff معرف رنگ آبی است.

مثال :

  • استفاده از کوتاه نویسی هگزادسیمال : در این روش زوج مقادیر تکراری را می توان به صورت تکی نوشت. برای مثال fff معادل ffffff ، و 000  معادل 000000   و ccddaa معادل cda می باشد.

مثال :

  • استفاده از تابع rgb : تابع rgb به ترتیب سه رنگ قرمز (red) ، سبز (green) ،  آبی (blue) را به عنوان مقدار می پذیرد. این مقادیر یا اعداد، صحیح هستند. (از 0 تا 255) و یا به صورت درصد می باشند. (از 0 تا 100 درصد).

مثال :

  • استفاده از تابع rgbaاین تابع که در css3 معرفی شد، همانند تابع rgb است با این تفاوت که پس از اختیار سه مقدار اول که برای تعیین رنگ به کار می روند، مقدار چهارمی نیز را باید اختیار کرد که مقدار شفافیت (opacity) رنگ را تعیین می کند. و مقداری بین 0 تا 1 می پذیرد. که مقدار 0 به معنای 0 درصد و 1 به معنای 100 درصد است.

مثال:

برای دیدن همه رنگ های استاندارد و مقدار هگزادسیمال و rgb آنها به لینک زیر بروید

 

خصوصیت background-color

با استفاده از این خاصیت می توان رنگ پس زمینه عناصر را تغییر داد. و مقداری که می گیرد همانند مقداری است که خصوصیت color می گیرد، یعنی همان، تابع rgb و rgba، هگزادسیمال و رنگ های استاندارد.

مثال : استفاده از خاصیت color و background-color

و کد css

نتیجه در مرورگر:

خصوصیت background-image

با استفاده از این خاصیت می توان برای عناصر پس زمینه تعریف کرد. و قاعده کلی آن به صورت زیر است :

و بجای کلمه Image Address آدرس تصویر قرار می گیرد.

به طور مثال:

خصوصیت background repeat

با استفاده از این خاصیت می توان نحوه تکرار عکس در پس زمینه را کنترل کرد و یکی از چهار مقدار زیر را می پذیرد:

  • Repeat : تکرار عکس در دو جهت افقی و عمودی
  • Repeat-x : تکرار عکس در جهت افقی (horizental)
  • Repeat-y : تکرار عکس در جهت عمودی (vertical)
  • No-repeat : عدم تکرار عکس

مثال:

و کد css :

نتیجه در مرورگر:

می بینید که تصویر فقط در جهت افقی (عرض صفحه) تکرار شده...

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

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

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

    سلام
    حیف نیست سایت به این خوبی تو منو های هدر یا فوتر، گزینه تماس با ما نداشته باشه و مجبور شیم کلی سایتو واسه ارسال یه پیام بگردیم
    سپاس

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

      سلام دوست عزیز
      ممنون از لطفتون .
      توی سون لرن همیشه راه تماس با ما از جهات مختلف باز بوده . در قسمت نظرات ،پیام خصوصی برای کاربران سایت ، انجمن سایت و …
      ایمیل ما رو هم که اکثرا دوستان دارند .

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

        آخه گفتم شاید دوست نداشته باشید توی نظرات یه نوشته، یه پیام بی ربط بذاریم، چون اکثر وب مسترها انتظار دارن فقط در مورد نوشته پیام بذاریم و پیام های مرتبط با موضوعات دیگه رو از طریق فرم تماس با ما ارسال کنیم(من که واسه کاربرا اصلا سخت نمیگیرم)
        هر چند کار اشتباهی هم نمی کنید چون اکثرا (یکیش خودم) از افزونه فرم نسخه 7 که در عین قدرت پر از خطای کد نویسی هست استفاده می کنند(مخصوصا توی فایل سی اس اس) و برای بهینه کردن باید خودمون دست به کار شیم.(قالب رایگانی که استفاده می کنم خودش فرم تماس با ما داره اما از نسخه 7 استفاده میکنم)
        راستش می خواستم در مورد نوشته های خوبتون تشکر کنم و بعد بگم که ابزار +1 گوگلی که گذاشتید رو یه تست زدم و در هر انتخاب (از 3 نوع شکلی که گذاشتید) فقط امتیاز های صفحه اصلی قرار داره و حتی “به این صفحه امتیاز دهید” تعدادش با امتیاز های صفحه اصلی برابره و برعکس ابزاری که خودتون استفاده می کنید درست کار نمیکنه.
        ممنونم که آدرس سایتتونو توی ابزار +1 نو فالوو کردید.(حالا بعضی ها میدونن باید سایت های خروجی نوفالوو بشه اما بعضی فقط کارشون به اشتراک گذاریه و سایر موارد واسشون اهمیت نداره) این نشون میده که واسه کاربر اهمیت قائل هستید و مثلا، مثل افزونه توتال کش دوو فالوو نمی کنید.
        نرم افزار رایگان با رعایت کامل کپی رایت خواستید، خوشحال میشم سر بزنید.
        ای کاش سرم خلوت تر شه و بتونم تو سایتهای خوبی مثل سایت شما پست میهمان بذارم
        سپاس

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

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

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

          سلام
          خوب میشه اگه گزینه بازدید دیروز سایتتونو هم فعال کنید که اگه کاربر بر فرض، ساعت 1 بامداد وارد سایتتون شد بدونه در یک شبانه روز چند بازدید از سایتتون صورت میگیره (احتمال زیاد از افزونه WP-Statistics استفاده می کنید)
          ببخشید اگه امروز وقتتونو گرفتم
          سپاس

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

          سلام
          آره آقا محمود . درست حدس زدی . از WP-Statistics استفاده میکنم .
          متاسفانه این افزونه آمار دیروز رو مشکل دار نمایش میده . یعنی خیلی از روز ها یا 0 نشون میده و یا 1 . واسه همین نزاشتمش . وگرنه دوست داشتم که باشه .
          پیگیری که کردم دیدم خیلی ها با این افزونه چنین مشکلی دارند .
          اگر وقت کردم خودم باید یه کاریش بکنم !
          بازم ممنون

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

          البته خودم فکر میکنم این افزونه با افزونه های کش مشکل داره که من دارم ازشون استفاده می کنم …

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

    آره خوب چنین مشکلی منم داشتم ولی هر چند ماه اونم در حد هر بار چند دقیقه این مشکل پیش میاد ولی میگم واقعا به ندرت و اونم موقت مشکلدار میشه و اونم علت داره در کل از افزونه های قدرتمند آمارگیر هست که حجم دیتابیسش هم یک پنجم بقیه ی افزونه هاست هر چند این افزونه فارسی شده یه نمونه ی خارجی هست ولی بعضیا فکر میکنن این افزونه از ابتدا توسط یه ایرانی ساخته شده. بله بعضی از افزونه های کش نه تنها این افزونه بلکه خیلی از بخش های وردپرس و افزونه های دیگه رو هم مشکلدار میکنن به نظر من افزونه توتال کش W3 Total Cache (که الان من اسمشو تو کدهای سایتتون دیدم)(نصب کردینش!) با افزونه های قدرتمند دیگه ای مثل سوپر کش جایگزین بشن، بهتره. چون هم دیتابیس بهینه نشده داره، هم لینک های خروجی خودشو دوو فالوو میکنه(افتضاح در لینک خروجی)، خیلی شلوغه و بعضی امکاناتش فقط دکوره(مث سی دی ان) ضمن این که مدیریت درستی روی بخش های مختلفش نداره. با اون پیغام های آزار دهنده اش. من تو چند تا از سایتهای طراحی شدم از سوپر کش استفاده میکنم البته واسه کش بهتر، شاید بعضیا بگن از “می نی فی” و “اچ تی ام ال کامپرس” استفاده کنید اما این وضع رو بدتر میکنه و سرعت سایت به جای بیشتر شدن، کمتر میشه. چون فقط داریم ریکوئست ها رو بیشتر میکنیم وقتی سوپر کش کار هر دو تاشو انجام میده چه نیازی هست بخوایم تعداد درخواست از سرور رو بالا ببریم و بار سرور رو بیشتر کنیم. واسم عجیبه که کدهای سایتتونو فشرده کردید احتمالا بعد از طراحی قصد سیخ زدن زیادی به کدها رو ندارید که من خودم اگه هر چند روز با کدهای سایت ور نرم روزم نمیگذره. با فشرده سازی شاید حجم فایل کم بشه و برای کش کردن حجم کمتری بخواد اما هر کدی موقع تبدیل به اچ تی ام ال فضاهای خالیش حذف میشه حالا چه اسپیس چه کاراکتر نامریی و چه تب. پس در واقع فاصله خالی توی اجرای نمایش صفحه تقریبا بی تاثیره.
    راستی بذار اسپم نکرده باشم و 2 تا سایت که به کارتون میاد معرفی کنم
    1. softicons.com یک سایت منبع و کامل برای دریافت آیکن و تصویر با تعدادی ابزار کمکی و تنوع بسیار بالای تصاویر
    2. border-radius.com ساخت بردر، برای هماهنگی با موتور های مختلف مرورگر ها.
    راستی آی دی من در یاهو asakdownload هستش امری بود خوشحال میشم پیام آن یا آف بذاری.
    راستی تعداد پیام های تو در تو رو بیشتر کنید تا تمام پیام های رد و بدل شده دارای دکمه پاسخ باشه

  • ‏‏
    مرتضی(۲۳ آبان ۱۳۹۱)

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

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

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

  • ‏‏
    Sina4everafter(۲۴ آبان ۱۳۹۱)

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

    • ‏‏
      سجاد دریس(۲۴ آبان ۱۳۹۱)

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

  • ‏‏
    صدیقه(۲۹ آبان ۱۳۹۱)

    سلام من سایتم رو با cssطراحی کردم ولی وقتی توی اینترنت اکسپلورر باز میکنم خیلی از کدها رو نمیخونه یا کلا جابجا میشه اومدم بجای پیکسل درصد گذاشتم بدتر شد باید چیکار کنم؟
    یه مشکل دیگه هم دارم وقتی منو هایی که بصورت دروپ داون هست گذاشتم بخاطر آلبوم عکسها که جاوا اسکریپت بود دیگه درست کار نمیکنه مجبور شدم آلبوم تصاویر رو غیر فعال کنم چاره این کار چیه؟
    لطفا کمکم کنین استادم اخطار داده هفته دیگه سایت رو باید درست شده تحویل بدم لطفا کمکم کنین ممنونم

    • ‏‏
      سجاد دریس(۳۰ آبان ۱۳۹۱)

      سلام
      در جواب سوال اولتون، مرورگر ie از خصوصیت های جدید css3 پشتیبانی نمیکنه، و بعضی مواقع حتی از خصوصیات css2 و css1!!!!!
      برای نمایش بهتر قالب در مرورگر ie یک فایل css دیگه با نام ie-fixer رو ایجاد کنید و قسمت هایی رو مرورگر ie درست پشتیبانی نمیکنه رو در اون فایل اصلاح کنید. و این تکه کد رو در قسمت head فایل html قرار بدین تا که وقتی کاربر قالب رو با مرورگر ie مشاهده میکنه فایل ie-fixer لود بشه.

      و بجای کلمه file address آدرس فایل ie-fixer رو قرار بدین.
      در مورد اون سوال دوم هم حتما بین نام هایی که برای class و id منو، و class و id آلبوم تصاویر انتخاب کردین تداخل ایجاد شده.

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram