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-테마-인디고 | 시도 해봐 |
| w3-테마-블루 | 시도 해봐 |
| w3-테마-밝은 파란색 | 시도 해봐 |
| w3-테마-시안 | 시도 해봐 |
| w3-테마-청록색 | 시도 해봐 |
| w3-테마-녹색 | 시도 해봐 |
| w3-테마-연두색 | 시도 해봐 |
| w3-테마-라임 | 시도 해봐 |
| w3-테마-카키 | 시도 해봐 |
| w3-테마-노란색 | 시도 해봐 |
| w3-테마-호박 | 시도 해봐 |
| w3-테마-오렌지 | 시도 해봐 |
| w3-테마-딥-오렌지 | 시도 해봐 |
| w3-테마-블루-그레이 | 시도 해봐 |
| w3-테마-브라운 | 시도 해봐 |
| w3-테마-회색 | 시도 해봐 |
| w3-테마-진한 회색 | 시도 해봐 |
| w3-테마-블랙 | 시도 해봐 |
| w3-테마-w3학교 | 시도 해봐 |
그라디언트 추가
한 독자가 우리에게 다음과 같은 제안을 보냈습니다. 각 테마에 그라디언트를 추가하는 것이 좋다.
이 그라데이션을 만들기 위해 파란색 테마의 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의 머티리얼 디자인에서 영감을 받은 다운로드 가능한 색상 테마다.
| 스타일 시트 | 설명 |
|---|---|
| w3-테마-amber.css | 색상 테마 호박색 |
| w3-테마-black.css | 색상 테마 블랙 |
| w3-테마-blue.css | 색상 테마 블루 |
| w3-테마-블루-그레이.css | 색상 테마 블루 그레이 |
| w3-테마-brown.css | 색상 테마 브라운 |
| w3-테마-시안.css | 색상 테마 청록색 |
| w3-테마-dark-grey.css | 색상 테마 다크 그레이 |
| w3-테마-깊은-오렌지.css | 색상 테마 딥 오렌지 |
| w3-테마-딥-퍼플.css | 색상 테마 딥 퍼플 |
| w3-테마-green.css | 색상 테마 녹색 |
| w3-테마-grey.css | 색상 테마 그레이 |
| w3-테마-indigo.css | 색상 테마 인디고 |
| w3-테마-khaki.css | 색상 테마 카키 |
| w3-테마-light-blue.css | 색상 테마 라이트 블루 |
| w3-테마-light-green.css | 색상 테마 밝은 녹색 |
| w3-테마-lime.css | 컬러 테마 라임 |
| w3-테마-orange.css | 색상 테마 오렌지 |
| w3-테마-pink.css | 색상 테마 핑크 |
| w3-테마-purple.css | 색상 테마 보라색 |
| w3-테마-red.css | 색상 테마 레드 |
| w3-테마-teal.css | 색상 테마 청록색 |
| w3-테마-yellow.css | 색상 테마 노란색 |
참고
W3C School - W3.CSS Color Themes
공부 목적 블로그