W3.CSS 색상 테마
색상 테마
W3.CSS를 사용하면 색상 테마로 응용 프로그램을 쉽게 사용자 지정할 수 있습니다.
2014년 영화
-
겨울 왕국
애니메이션에 대한 반응은 우스꽝스러웠다.
-
우리 별의 결함
만지고 그립고 진정으로 잘 만들어진
-
어벤져스
마블과 디즈니의 대성공
«»
2014년 영화
-
겨울 왕국
애니메이션에 대한 반응은 우스꽝스러웠다.
-
우리 별의 결함
만지고 그립고 진정으로 잘 만들어진
-
어벤져스
마블과 디즈니의 대성공
«»
미리 정의된(또는 직접 만든) 테마에 대한 링크를 추가하기만 하면 됩니다.
예시
<link rel="stylesheet"
href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet"
href="https://www.w3schools.com/lib/w3-theme-indigo.css">
사전 정의된 테마
다음은 W3.CSS에 미리 정의된 테마입니다.
| w3 테마 레드 | |
| w3 테마 핑크 | |
| w3 테마 보라색 | |
| w3 테마 딥 퍼플 | |
| w3-theme-indigo | |
| w3 테마 블루 | |
| w3-theme-light-blue | |
| w3-theme-cyan | |
| w3 테마 청록 | |
| w3-테마-그린 | |
| w3-theme-light-green | |
| w3-테마-라임 | |
| w3-테마 카키 | |
| w3-테마-노란색 | |
| w3 테마 호박색 | |
| w3-테마-오렌지 | |
| w3 테마 딥 오렌지 | |
| w3-theme-blue-grey | |
| w3 테마 브라운 | |
| w3 테마 그레이 | |
| w3-theme-dark-grey | |
| w3 테마 블랙 | |
| w3-theme-w3schools |
그라디언트 추가
한 독자가 다음 제안을 보냈습니다. 각 테마에 그라디언트를 추가하는 것이 좋습니다.
파란색 테마의 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의 Material Design에서 영감을 받은 다운로드 가능한 색상 테마입니다.
| 스타일 시트 | 설명 |
|---|---|
| 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 | 색상 테마 노란색 |