آموزش W3CSS

آموزش W3.CSS –  رنگ ها

W3.CSS از مجموعه ی قدرتمندی از کلاس های رنگ پشتیبانی می کنه. این کلاس ها با درنظر گرفتن رنگ های استفاده شده در marketing, road signs و sticky notes طراحی شدن.

  • w3-red
  • w3-pink
  • w3-purple
  • w3-deep-purple
  • w3-indigo
  • w3-blue
  • w3-light-blue
  • w3-cyan
  • w3-teal
  • w3-green
  • w3-light-green
  • w3-lime
  • w3-khaki
  • w3-yellow
  • w3-amber
  • w3-orange
  • w3-deep-orange
  • w3-blue-grey
  • w3-brown
  • w3-light-grey
  • w3-grey
  • w3-dark-grey
  • w3-black

تم های رنگی (Color Themes)

W3.CSS از اعمال تم روی وب سایت با استفاده از تمِ CSS دامنه ی عمومی اش بخوبی پشتیبانی می کنه. در ادامه مثال هایی آورده شده:

نامِ CSS

توضیحات

w3-theme-indigo.css

CSS دارای طیف رنگ های مختلفِ نیلی است.

w3-theme-red.css

CSS دارای طیف رنگ های مختلفِ قرمز است.


برای استفاده از تم ها، به https://www.w3schools.com/w3css/w3css_downloads.asp رفته و فایلِ CSS مورد نیاز را دانلود کنین.

مثال

w3css_colors.htm

<html>
   <head>
      <title>The W3.CSS Color Themes</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://www.w3schools.com/lib/w3.css">
	  <link rel="stylesheet" href="css/w3-theme-red.css">
   </head>
   <body class="w3-container"> 
      <h2>Color Theme Demo</h2>
      <hr/>
      <div class="w3-card-4">
         <div class="w3-container w3-theme w3-card-2">
            <h1>Red Colored Theme</h1>
         </div>
         <div class="w3-container w3-text-theme">
            <h2>w3-text-theme - Theme for Text</h2>
         </div>
         <ul class="w3-ul w3-border-top">
            <li class="w3-theme-l5" style="position:relative">
               <a class="w3-btn-floating-large w3-theme-action w3-right" 
                  style="position:absolute;top:-28px;right:16px;">+</a>
               <p>Using w3-theme-l5 / w3-theme-light style</p>
            </li>
            <li class="w3-theme-l4"><p>Using w3-theme-l4 style</p></li>
            <li class="w3-theme-l3"><p>Using w3-theme-l3 style</p></li>
            <li class="w3-theme-l2"><p>Using w3-theme-l2 style</p></li>
            <li class="w3-theme-l1"><p>Using w3-theme-l1 style</p></li>
            <li class="w3-theme"><p>Using w3-theme style</p></li>
            <li class="w3-theme-d1"><p>Using w3-theme style</p></li>
            <li class="w3-theme-d2"><p>Using w3-theme style</p></li>
            <li class="w3-theme-d3"><p>Using w3-theme style</p></li>
            <li class="w3-theme-d4"><p>Using w3-theme style</p></li>
         </ul>
      </div>
   </body>
</html>

نتیجه

خروجی کد بالا بصورت زیر خواهد بود.

در صورتی که سوال و یا نظری دارید، از بخش نظرات با ما در میان بگذارید.

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

شما چه نظر و یا سوالی درباره این نوشته دارید؟

مبحث آموزشی

آموزش W3CSS

Learn W3CSS

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

کلیک کنید و سوالات خود را از ما بپرسید
لطفا فرم سوال را پر کنید

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

لطفا چند لحظه منتظر بمانید ...