تخفیف ویژه ماه مبارک رمضان، فرصت یادگیری با 35٪ تخفیف (کد تخفیف: ramazan)

سبد خرید (0)

قالب های رنگ در W3.CSS

قالب های رنگ

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

در این روش باید در قسمت Head صفحه یک لینک به فایل CSS قالب ایجاد نمایید:

مثال

<link rel="stylesheet" href="http://www.beyamooz.com/lib/w3.css">
<link rel="stylesheet" href="/http://www.beyamooz.com/lib/w3-theme-indigo.css">
خودتان امتحان کنيد »

قالب های از پیش تعریف شده

قالب های از پیش تعریف شده ای  با W3.CSS وجود دارند:

w3-theme-red خودتان امتحان کنید
w3-theme-pink خودتان امتحان کنید
w3-theme-purple خودتان امتحان کنید
w3-theme-deep-purple خودتان امتحان کنید
w3-theme-indigo خودتان امتحان کنید
w3-theme-blue خودتان امتحان کنید
w3-theme-light-blue خودتان امتحان کنید
w3-theme-cyan خودتان امتحان کنید
w3-theme-teal خودتان امتحان کنید
w3-theme-green خودتان امتحان کنید
w3-theme-light-green خودتان امتحان کنید
w3-theme-lime خودتان امتحان کنید
w3-theme-khaki خودتان امتحان کنید
w3-theme-yellow خودتان امتحان کنید
w3-theme-amber خودتان امتحان کنید
w3-theme-orange خودتان امتحان کنید
w3-theme-deep-orange خودتان امتحان کنید
w3-theme-blue-grey خودتان امتحان کنید
w3-theme-brown خودتان امتحان کنید
w3-theme-grey خودتان امتحان کنید
w3-theme-dark-grey خودتان امتحان کنید
w3-theme-black خودتان امتحان کنید
w3-theme-w3schools خودتان امتحان کنید

 قالب شخصی

با استفاده از W3.CSS اینکه یک برنامه کاربردی شخصی را با یک قالب رنگ شخصی ،سفارشی و شخصی سازی کنید بسیار آسان است.

شما میتوانید به یک قالب شخصی با یک   تگ <link> لینک دهید ، و یا اینکه قالب شخصی خود را در تگ   <style> قرار دهید:

مثال

<style>

.w3-theme {color:#fff !important;background-color:#3f51b5 !important}
.w3-theme-light {color:#000 !important;background-color:#e8eaf6 !important}
.w3-theme-dark {color:#fff !important;background-color:#1a237e !important}

.w3-theme-l5 {color:#000 !important;background-color:#e8eaf6 !important}
.w3-theme-l4 {color:#000 !important;background-color:#c5cae9 !important}
.w3-theme-l3 {color:#000 !important;background-color:#9fa8da !important}
.w3-theme-l2 {color:#fff !important;background-color:#7986cb !important}
.w3-theme-l1 {color:#fff !important;background-color:#5c6bc0 !important}
.w3-theme-d1 {color:#fff !important;background-color:#3949ab !important}
.w3-theme-d2 {color:#fff !important;background-color:#303f9f !important}
.w3-theme-d3 {color:#fff !important;background-color:#283593 !important}
.w3-theme-d4 {color:#fff !important;background-color:#1a237e !important}

.w3-theme-action {color:#fff !important;background-color:#311b92 !important}
.w3-text-theme {color:#1a237e !important}

</style>
خودتان امتحان کنيد »

افزودن گرادیان

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

من  برای ایجاد گرادیان ،از رنگ های l2 و l1 از قالب آبی استفاده کردم 

مثال

.w3-theme-gradient {
  color: #000 !important;
  background:-webkit-linear-gradient(top,#64B5F6 25%,#42A5F5 75%)}
.w3-theme-gradient {
  color: #000 !important;
  background:-moz-linear-gradient(top,#64B5F6 25%,#42A5F5 75%)}
.w3-theme-gradient {
  color: #000 !important;
  background:-o-linear-gradient(top,#64B5F6 25%,#42A5F5 75%)}
.w3-theme-gradient {
  color: #000 !important;
  background:-ms-linear-gradient(top,#64B5F6 25%,#42A5F5 75%)}
.w3-theme-gradient {
  color: #000 !important;
  background: linear-gradient(top,#64B5F6 25%,#42A5F5 75%)}
خودتان امتحان کنيد »

قالب های رنگ قابل دانلود

در این جا  تعدادی قالب رنگ قابل دانلود  که از  Google's Material Designالهام گرفته شده است  ،وجود دارد.

Style Sheet توضیحات
w3-theme-amber.css قالب رنگ عنبری
w3-theme-black.css قالب رنگ مشکی
w3-theme-blue.css رنگ آبی قالب
w3-theme-blue-grey.css رنگ  آبی خاکستری قالب
w3-theme-brown.css رنگ قهوه ای قالب
w3-theme-cyan.css رنگ آبی سیان قالب
w3-theme-dark-grey.css رنگ خاکستری تیره قالب
w3-theme-deep-orange.css رنگ نارنجی پررنگ قالب
w3-theme-deep-purple.css رنگ صورتی پررنگ قالب
w3-theme-green.css رنگ سبز قالب
w3-theme-grey.css رنگ خاکستری قالب
w3-theme-indigo.css رنگ نیلی قالب
w3-theme-khaki.css رنگ خاکی قالب
w3-theme-light-blue.css رنگ آبی روشن قالب
w3-theme-light-green.css رنگ سبز روشن قالب
w3-theme-lime.css رنگ آهکی قالب
w3-theme-orange.css رنگ نارنجی قالب
w3-theme-pink.css رنگ صورتی قالب
w3-theme-purple.css رنگ بنفش قالب
w3-theme-red.css رنگ قرمز قالب
w3-theme-teal.css رنگ آبی سیر قالب
w3-theme-yellow.css رنگ زرد قالب