만든 테마
사용에 테마 :
생성 된 CSS :
친퀘 테레 (Cinque Terre)
친퀘 테레 (Cinque Terre) (오 토지) 이탈리아 리비에라의 일부입니다. 5 개 마을과 해안선 : 몬테 로쏘, Vernazza에, 코르 닐리 아,에 Manarola, 그리고 Riomaggiore 부근은 유네스코 세계 문화 유산입니다.
몬테 로쏘
몬테로 소알 마레 라 스페 치아의 리비에라에 작은 인공 암초에 의해 보호되는 작은 자연 걸프의 중심에 위치해 있습니다. 그것은 친퀘 테레 (Cinque Terre)의 최북단 마을이다.
의 Vernazza
의 Vernazza는 친퀘 테레 (Cinque Terre) 지역의 다섯 마을의 또 다른입니다. Vernazza에 네 번째 마을 향하고 북쪽이다. 그것은 어떤 자동차 트래픽이 없으며, 이탈리아 리비에라에 진정한 "어촌"중 하나입니다.
색상 테마
W3.CSS, 자신의 컬러 테마 응용 프로그램을 사용자 정의하기 쉽습니다.
예
<!DOCTYPE html>
<html>
<meta
name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="http://www.w3ii.com/lib/w3.css">
<link rel="stylesheet"
href=" /lib/w3-theme-indigo.css ">미리 정의 된 테마
HTML 애플리케이션에서, 미리 정의 된 색상과 다른 색상을 선택하여 색의 사용을 제한 할 수있다 :
| W3 레드 | 시도 해봐 |
| W3 핑크 | 시도 해봐 |
| W3 자주색 | 시도 해봐 |
| W3-깊은 보라색 | 시도 해봐 |
| W3 - 인디고 | 시도 해봐 |
| W3 블루 | 시도 해봐 |
| W3-밝은 파란색 | 시도 해봐 |
| W3 - 시안 | 시도 해봐 |
| W3-청록색 | 시도 해봐 |
| W3 - 녹색 | 시도 해봐 |
| W3 빛 녹색 | 시도 해봐 |
| W3 라임 | 시도 해봐 |
| W3 - 카키 | 시도 해봐 |
| W3 - 노란색 | 시도 해봐 |
| W3 - 황색 | 시도 해봐 |
| W3 - 오렌지 | 시도 해봐 |
| W3-깊은 오렌지 | 시도 해봐 |
| W3 - 파랑 - 회색 | 시도 해봐 |
| W3 갈색 | 시도 해봐 |
| W3 회색 | 시도 해봐 |
| W3 어두운 회색 | 시도 해봐 |
| W3 블랙 | 시도 해봐 |
| W3-w3ii | 시도 해봐 |
영화 2014
겨울 왕국
애니메이션에 대한 응답은 우스웠다
우리의 별의 오류
, 감동 그립과 진정으로 잘 만들어진
어벤저
마블과 디즈니에 대한 큰 성공을
영화 2014
겨울 왕국
애니메이션에 대한 응답은 우스웠다
우리의 별의 오류
, 감동 그립과 진정으로 잘 만들어진
어벤저
마블과 디즈니에 대한 큰 성공을
개인 테마
W3.CSS, 개인 색상 테마와 함께 응용 프로그램을 사용자 정의 할 수 쉽습니다.
당신은 <링크> 태그에 개인 테마에 연결할 수 있습니다, 또는 당신은 <스타일> 태그에 개인 테마를 넣을 수 있습니다 :
예
<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%)}
색상 테마
여기에 구글의 소재 디자인에서 영감을 일부 다운로드 색상 테마는 다음과 같습니다
| 스타일 시트 | 기술 |
|---|---|
| W3-테마 amber.css | 색상 테마 앰버 |
| W3-테마 black.css | 색상 테마 블랙 |
| W3-테마 blue.css | 색상 테마 블루 |
| W3-테마 블루 grey.css | 색상 테마 블루 그레이 |
| W3-테마 brown.css | 색상 테마 브라운 |
| W3-테마 cyan.css | 색상 테마 시안 |
| W3-테마 어두운 grey.css | 색상 테마 다크 그레이 |
| W3-테마 깊은 orange.css | 색상 테마 딥 오렌지 |
| W3-테마 깊은 purple.css | 색상 테마 딥 퍼플 |
| W3-테마 green.css | 색상 테마 녹색 |
| W3-테마 grey.css | 색상 테마 그레이 |
| W3-테마 indigo.css | 색상 테마 인디고 |
| W3-테마 khaki.css | 색상 테마 카키 |
| W3 - 테마 - 빛 blue.css | 색상 테마 라이트 블루 |
| W3 - 테마 - 빛 green.css | 색상 테마 라이트 그린 |
| W3-테마 lime.css | 색상 테마 라임 |
| W3-테마 orange.css | 색상 테마 오렌지 |
| W3-테마 pink.css | 색상 테마 핑크 |
| W3-테마 purple.css | 색상 테마 퍼플 |
| W3-테마 red.css | 색상 테마 레드 |
| W3-테마 teal.css | 색상 테마 청록 |
| W3-테마 yellow.css | 색상 테마 노란색 |