قالب های رنگ در W3.CSS
قالب های رنگ
با استفاده از قالب های رنگ در W3.CSS براحتی می توانید برنامه کاربردی تان را بدلخواه خود سفارشی نمایید.
در این روش باید در قسمت Head صفحه یک لینک به فایل CSS قالب ایجاد نمایید:
مثال
<link rel="stylesheet" href="https://beyamooz.com/lib/w3.css">
<link rel="stylesheet" href="/https://beyamooz.com/lib/w3-theme-indigo.css">
خودتان امتحان کنيد »<link rel="stylesheet" href="/https://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 | رنگ زرد قالب |
- نوشته شده توسط زهرا داوودی
- بازدید: 3593