W3.CSS rang mavzulari
Rang mavzulari
W3.CSS yordamida ilovalaringizni rang mavzulari bilan moslashtirish oson.
Movies 2014
-
Frozen
The response to the animations was ridiculous
-
The Fault in Our Stars
Touching, gripping and genuinely well made
-
The Avengers
A huge success for Marvel and Disney
Movies 2014
-
Frozen
The response to the animations was ridiculous
-
The Fault in Our Stars
Touching, gripping and genuinely well made
-
The Avengers
A huge success for Marvel and Disney
Buning uchun oldindan tayyorlangan (yoki o‘zingiz yaratgan) mavzuga havola qo‘shishingiz kifoya:
Misol
<link rel="stylesheet" href="https://www.w3schools.com/w3css/5/w3.css">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-indigo.css">
Oldindan tayyorlangan mavzular
W3.CSS’dagi oldindan tayyorlangan mavzular:
| w3-theme-red | Sinab ko‘ring |
| w3-theme-pink | Sinab ko‘ring |
| w3-theme-purple | Sinab ko‘ring |
| w3-theme-deep-purple | Sinab ko‘ring |
| w3-theme-indigo | Sinab ko‘ring |
| w3-theme-blue | Sinab ko‘ring |
| w3-theme-light-blue | Sinab ko‘ring |
| w3-theme-cyan | Sinab ko‘ring |
| w3-theme-teal | Sinab ko‘ring |
| w3-theme-green | Sinab ko‘ring |
| w3-theme-light-green | Sinab ko‘ring |
| w3-theme-lime | Sinab ko‘ring |
| w3-theme-khaki | Sinab ko‘ring |
| w3-theme-yellow | Sinab ko‘ring |
| w3-theme-amber | Sinab ko‘ring |
| w3-theme-orange | Sinab ko‘ring |
| w3-theme-deep-orange | Sinab ko‘ring |
| w3-theme-blue-grey | Sinab ko‘ring |
| w3-theme-brown | Sinab ko‘ring |
| w3-theme-grey | Sinab ko‘ring |
| w3-theme-dark-grey | Sinab ko‘ring |
| w3-theme-black | Sinab ko‘ring |
| w3-theme-w3schools | Sinab ko‘ring |
Gradient qo‘shish
Bir o‘quvchimiz shunday taklif yubordi: har bir mavzu uchun gradient qo‘shishni ko‘rib chiqishingiz mumkin.
Men bu gradientni yaratish uchun ko‘k (blue) mavzudagi l2 va l1 ranglaridan foydalandim:
Misol
.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%)}
Yuklab olinadigan rang mavzulari
Google Material Design’dan ilhomlangan, yuklab olinadigan rang mavzulari:
| Stil fayli | Tavsif |
|---|---|
| w3-theme-amber.css | Rang mavzusi: Amber |
| w3-theme-black.css | Rang mavzusi: Black |
| w3-theme-blue.css | Rang mavzusi: Blue |
| w3-theme-blue-grey.css | Rang mavzusi: Blue Grey |
| w3-theme-brown.css | Rang mavzusi: Brown |
| w3-theme-cyan.css | Rang mavzusi: Cyan |
| w3-theme-dark-grey.css | Rang mavzusi: Dark Grey |
| w3-theme-deep-orange.css | Rang mavzusi: Deep Orange |
| w3-theme-deep-purple.css | Rang mavzusi: Deep Purple |
| w3-theme-green.css | Rang mavzusi: Green |
| w3-theme-grey.css | Rang mavzusi: Grey |
| w3-theme-indigo.css | Rang mavzusi: Indigo |
| w3-theme-khaki.css | Rang mavzusi: Khaki |
| w3-theme-light-blue.css | Rang mavzusi: Light Blue |
| w3-theme-light-green.css | Rang mavzusi: Light Green |
| w3-theme-lime.css | Rang mavzusi: Lime |
| w3-theme-orange.css | Rang mavzusi: Orange |
| w3-theme-pink.css | Rang mavzusi: Pink |
| w3-theme-purple.css | Rang mavzusi: Purple |
| w3-theme-red.css | Rang mavzusi: Red |
| w3-theme-teal.css | Rang mavzusi: Teal |
| w3-theme-yellow.css | Rang mavzusi: Yellow |
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!