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

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



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

آموزش css : طریقه ایجاد گرادینت (جلسه دوم)

15938 ۱۲ آبان ۹۲

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

اما ادامه آموزش :

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

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

خب ما کارمون رو از مرورگر chrome آغاز می کنیم.

ابتدا کد html زیر رو بنویسد :

سپس کد css زیر رو به div  بدید :

در نظر داشته باشید که خصوصیت گرادینت یکی از خصوصیت های background است. (جایگزین خصوصیت backhround-image)

بسیار خب حال طریقه ایجاد گرادینت linear در مرورگر chrome رو فرا می گیریم :

ایجاد این نوع از گرادینت بسیار ساده است و قاعده کلی آن بشکل زیر است

Startform : جهت شروع گرادینت را مشخص می کند، که یکی از چهار مقدار top, bottom, right  و left را می پذیرد مقدار top مقدار پیشفرض است.

Color : رنگ های گرادینت که میتوانند بی نهایت باشد و بایستی هر رنگ را با (,) از رنگ بعدی جدا کرد.

خب حال به کدهای css  کد زیر را اضافه می کنیم.

اگر کدتان را در مرورگر chrome اجرا کنید، حتما نتیجه ای مانند زیر را خواهید دید :

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

رنگ ها را می توان بی نهایت قرار داد، درضمن نام رنگ می تواند بر مبنای هگزا، نام اصلی، rgb  و rgba باشد.

برای نمونه با کد زیر می توان یک رنگین کمان ایجاد کرد.

گرادینت های پیشرفته تر

اگر دقت کرده باشید تا اینجای کار توانستیم فقط گرادینت عمودی و افقی را ایجاد کنیم. که جزء گرادینت linear به حساب می آمدند، اما ما گرادینت مورب را نیز داریم، ولی با استفاده از چهار مقدار top, right , left و bottom نمی توان آن را ایجاد کرد.

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

Startfrom1 : نقطه شروع اول را تعیین میکند که یکی از مقادیر top  و bottom را می گیرد.

Startfrom2 : نقطه شروع دوم را تعیین می کند که یکی از مقادیر left و right را می گیرد.

مثال :

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

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

خب حال شاید گرادینت مورب ما از زاویه ها شروع نشود؟!

در اینجا می توان از درجه بجای چهار جهت اصلی استفاده کرد که قاعده کلی به شکل زیر است :

مقدار startfrom per deg نقطه شروع گرادینت بر حسب deg، که عددی بین 0 تا 360 درجه است. نکته جالب این است که با مقدار برحسب درجه می توان نقطه شروع گرادینت را از چهار جهت اصلی و چهار زاویه نیز شروع کرد به این صورت که :

0deg : مساوی با مقدار left

45deg : مساوی با مقدار bottom left

90deg : مساوی با مقدار bottom

135deg : مساوی با مقدار bottom right

180deg : مساوی با مقدار right

225deg : مساوی با مقدار top right

270deg : مساوی با مقدار top

315deg : مساوی با مقدار top left

360deg : مساوی با مقدار left

نمونه کد

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

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

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

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

    😉 😉 😉

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

    😆 😆 جالب بید 😯 😆

  • ‏‏

    ممنونم از شما
    یه سوال
    مرورگرهایی که از گرادینت پشتیبانی میکنند کدوما هستن؟؟؟
    من فقط میدونم توی کروم و فایرفاکس گرادینت درست کرد مرسومه….

  • ‏‏

    سلام ممنون سجادجان فوق العاده بود…
    فقط سجادجان گرادینت مربوط به linear از سمت راست شروع میشه ن چپ اصلاح کن فداتشم منظورم اینه :
    کد فوق به آن معناست که گرادینت از سمت “چپ” شروع شود، ابتدا رنگ قرمز، سپس رنگ زرد.

  • ‏‏

    آقاسجاد ی سئوال
    -webkit- ک برا کروم و سافاری هستش درست
    اگه بجا -webkit- از -moz- برا فایرفاکس و از -o- برا اپرا استفاده کنیم باز همین نتیجه رو نشون میده؟؟
    یعنی :

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

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

  • ‏‏

    سلام میشه اموزش وردپرس را از جلسه اول واسم ایمیل کنید ازتون ممنون میشم

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

      فایل های PDF در سایت موجوده می تونید دانلود کنید،از ارسال ایمیل معذوریم و کل PDF ها با کیفیت کامل در بخش VIP سایت در آینده نزدیک.

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

        سلام آقا کیوان
        وای این بخش VIP چی بشه 😉 😉

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

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

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

      عذر خواهی میکنم .
      بهتون میل زدم و مشخصات لینکتون رو می خوام .
      موفق باشید

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram