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

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



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

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

16382 ۳۰ مهر ۹۲

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

خب شروع می کنیم :

گرادینت چیست

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

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

انواع گرادینت

گرادینت انواع مختلفی دارد اگر با فتوشاپ کار کرده باشید حتما با آن ها آشنایی دارید :

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

چند نمونه گرادینت خطی  :

2. Radial : مدوّر (تابشی) : به صورت دو یا چند رنگ تو در تو به صورت مدوّر

چند نمونه گرادینت مدوّر

3. Angle : زاویه دار : به صورت دو یا چند رنگ که از یک زاویه شروع و پس از چرخش رنگ ها در 360درجه به زاویه اولیه بر می گردد.

چند نمونه گرادینت زاویه دار :

4. Reflected : منعکس (بازتاب) : به صورت دو یا چند رنگ که نصف محیط را رنگ های انتخاب و نصف دیگر را بازتاب رنگ های انتخابی پر می کنند.

چند نمونه گرادینت منعکس :

5. Diamond : لوزی شکل (الماسی) : به صورت دو یا چند رنگ که به صورت لوزی شکل تو در تو مرتب می شوند.

چند نمونه گرادینت لوزی شکل

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

نکته :

مرورگر های مدرن از جمله google chrome، Mozilla firefox ، Opera با استفاده از پیشوند مخصوص به خود گرادینت را ایجاد می کنند.

مرورگر Intenrnet explorer از ورژن 9 به بعد از گرادینت ها پشتیبانی می کند. (البته هک ها (فیلترها)یی هم وجود دارد که جهت فعالسازی گرادینت در ورژن 7 و 8 مورد استفاده قرار می گیرند.)

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

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

  • ‏‏

    سلام ممنون سجادجان ک این وقت شب پست زدی و اَبَرسایت سون لرن رو آپ کردی
    خیلی دنبال این آموزش بودم ممنون که ب فکری برا بک گراند نویگیشن و منوها حرف نداره …
    خدا خیرت بده سجادجان بازم مرسی!!!

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

    ماشاءال… چه قد سایت فعال شده
    البته تعریف از خود نباشه 😉 😉 😉
    Welcome To The Biggest and The Best Learning Site Of Iran

    • ‏‏
      کیوان علی محمدی(۳۰ مهر ۱۳۹۲)

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

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

        راستی آقا کیوان این tuts یه سایته ؟ 😯

        • ‏‏
          کیوان علی محمدی(۳۰ مهر ۱۳۹۲)

          بله یکی از بهترین سایت های آموزشی در طراحی وب و کلا IT هست اونم در سطح جهانی.

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

          ببخشید آدرسش هم دیگه www.tuts.com هستش دیگه ، درسته ؟

        • ‏‏
          کیوان علی محمدی(۳۰ مهر ۱۳۹۲)

          https://tutsplus.com/
          زیر مجموعه های زیادی هم داره.مثل net.tutsplus یا wp.tutsplus .

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

          ممنون آقا کیوان تا حالا ندیده بودم
          راستی برای بعضی آموزش هاش باید عضو شد ؟
          من موقعی که با این لینک میرم هیچی نمیاد !
          https://tutsplus.com/course/designing-posters/

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

          بله این سایت دارای عضویت VIP هست که برای دیدن آموزش هاش باید این نوع عضویت رو دریافت کرد،بهتره از سایت های زیر مجموعه استفاده کنی مثل psd.tutsplus.com

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

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

  • ‏‏
    محسن طحانیان(۳۰ مهر ۱۳۹۲)

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

  • ‏‏
    wvaseteh.ir(۱ آبان ۱۳۹۲)

    آموزش ها واقعا” در سطح عالی هستند – ممنونم

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

    سلام آقا سجاد خیلی عالیه که به آموزش های سی اس اس می پردازی.
    یه پیشنهاد دارم.می خواستم پستی درباره ی مدل های چدید طراحی تحقیق کنید.
    مثلا اینکه:
    طرح های جدیدی که مد شده دیگه توش از چیزایی مثل border -radius و یا گرادینت استفاده نمی کنن و خیلی هم زیبا هستند.(منظورم فقط طرح فلت هست و بعضی از مدل ها هم هستند که به طرح دایره ای معروفه البته اسم قشنگی داره ولی یادم نیست)
    منظورم طرح های تخت یا همون فلت هست.
    کل طراحی هایی که الان سایت ها دارند از جمله سون لرن جزء طرح های قدیمی محسوب میشن.فعلا که طراحای حرفه ای فقط فلت طراحی می کنند.
    مدل های زیادی هست مثلا ویندوز هشتی یا لینوکسی و … .
    می خواستم اگه میشه یه تحقیق حسابی کنید و یه مطلب هم در مورد طراحی وب و مدل های اون بزنید.
    و باید بگم طراحی وب تنها این نیست که زبان های تحت وب بلد باشی باید یک طراح یک طرحی پیدا کنه که توش از روانشناسی هم استفاده شده باشه.
    مثلا رنگ بندی خیلی مهمه و مکان بلوک ها.
    و باید بگم که بلوک های سمت راست و چپ هم تقریبا قدیمی شدند و تو مدل فلت جایی ندارن.

    باز هم تشکر از آموزش هایی که گذاشتی.
    موفق باشی
    یا علی

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

      سلام.
      چشم سعی میکنم در آینده درباره مدل های طراحی و اصول و روش طراحیشون مطلب بذارم.

  • ‏‏

    سلام دوست عزیز عید غدیر برشما مبارک.
    این پیام عمومی است که از طرف سایت سرباز آخر برای وبلاگ نویس های ارزشی ارسال شده است و شاید قسمتی از رسالت اینجانب انتشار چنین مطالبی است.
    سرطان بیماری ترسناکی است و لحظه تشخیص آن یکی از سخت‌ترین لحظات زندگی فرد بیمار و خانواده اوست؛ بسیاری حتی از شنیدن اسم سرطان هم ترس و واهمه دارند اما از حقیقت نمی‌توان گریخت ,
    در این بین کودکانی هستند که بدون اراده و میل باطنی‌شان با این بیماری دست و پنجه نرم می‌کنند و صرفاً به‌علت داشتن بیماری از حق طبیعی زندگی در میان جمع محروم شده و گوشه انزوا را برگزیده‌اند و هر از چند گاهی به مناسبتی از آنها یادی می‌شود.
    و از آن طرف خانواده‌های بسیاری از این کودکان بیمار با مشکلات مالی درگیر هستند و برای تهیه داروهای مورد نیاز فرزندانشان و مراحل درمان که در مواردی به چند صد میلیون نیز میرسد , نیازمند کمک هستند
    لذا بر آن شدیم که به مناسبت هفته ولایت و در آستانه عید غدیر خم , که اطلاع رسانی و شاید هم یاد آوری کرده باشیم که کمکی هر چند کوچک , حتی به اندازه هزار تومان هم که شده به این کودکان کرده باشیم.
    که برای این کمک نیز یه موسسه خیریه حمایت از کودکان سرطانی (محک) را پیشنهاد میکنیم که بدون نیاز به مراجعه و صرف وقت گرانبهایتان میتوانید از طریق اینترنت و شبکه شتاب بین بانکی به این موسسه کمک کرده باشید:

    http://www.mahak-charity.org/main

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

    ای که دستت می‌رسد کاری بکن
    *****
    پیش از آن کز تو نیاید هیچ کار

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

    http://www.sarbazeakhar.ir/post/1184

    یاعلی.در پناه حق

  • ‏‏
    Mohammad-Ali(۱ آبان ۱۳۹۲)

    ممنون، آموزش خیلی خوبی بود

  • ‏‏

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

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

  • ‏‏

    سلام یکی کد قالبتون رو دزدیده http://badil.iran.sc/

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram