Cores W3.CSS
O esquema de cores padrão usado no W3.CSS é inspirado no Material Design Colors (cores usadas em marketing, sinais de trânsito e notas adesivas).
Colorindo elementos HTML
As classes w3 - color e w3- text- color podem ser usadas para colorir qualquer elemento HTML:
Containers:
Londres é a cidade mais populosa do Reino Unido, com uma área metropolitana de mais de 9 milhões de habitantes.
Londres é a cidade mais populosa do Reino Unido, com uma área metropolitana de mais de 9 milhões de habitantes.
Botões:
Texto:
Fronteiras:
vermelho
Verde
Azul
Amarelo
cinza
Preto
Tabelas:
| Nome | Pontos |
|---|---|
| Jill Smith | 50 |
| Eve Jackson | 94 |
| Adam Johnson | 67 |
Cartões:
Um carro é um veículo motorizado com rodas e automotor usado para transporte. A maioria das definições do termo especifica que os carros são projetados para rodar principalmente em estradas, para ter assentos para uma a oito pessoas, para normalmente ter quatro rodas. (Wikipédia)
Cores de fundo
As classes w3- color definem a cor de fundo para qualquer elemento HTML:
Londres
Londres é a cidade mais populosa do Reino Unido, com uma área metropolitana de mais de 9 milhões de habitantes.
Londres
Londres é a cidade mais populosa do Reino Unido, com uma área metropolitana de mais de 9 milhões de habitantes.
Londres
Londres é a cidade mais populosa do Reino Unido, com uma área metropolitana de mais de 9 milhões de habitantes.
Exemplo
<div class="w3-red">
<h2>London</h2>
<p>London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.</p>
</div>
<div class="w3-yellow">
<h2>London</h2>
<p>London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.</p>
</div>
<div class="w3-gray">
<h2>London</h2>
<p>London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.</p>
</div>
As cores cinza e cinza são intercambiáveis em todas as classes W3.CSS.
Cores do texto
As classes w3- text-color definem a cor do texto de qualquer elemento HTML:
Londres
Londres é a cidade mais populosa do Reino Unido, com uma área metropolitana de mais de 9 milhões de habitantes.
Londres
Londres é a cidade mais populosa do Reino Unido, com uma área metropolitana de mais de 9 milhões de habitantes.
Exemplo
<div class="w3-text-red">
<h2>London</h2>
<p>London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.</p>
</div>
Cores de foco
As classes w3-hover- color definem a cor de fundo para qualquer elemento HTML:
Londres
Londres é a cidade mais populosa do Reino Unido, com uma área metropolitana de mais de 9 milhões de habitantes.
Exemplo
<div class="w3-container w3-orange w3-hover-red">
<h2>London</h2>
<p>London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.</p>
</div>
As classes w3-hover- text- color definem a cor de foco do texto para qualquer elemento HTML:
Londres
Londres é a cidade mais populosa do Reino Unido, com uma área metropolitana de mais de 9 milhões de habitantes.
Exemplo
<div class="w3-container w3-orange w3-hover-text-white">
<h2>London</h2>
<p>London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.</p>
</div>
Bibliotecas de cores
Além das cores padrão do W3.CSS, o W3.CSS também pode usar cores de várias bibliotecas de cores diferentes:
Cores do Windows:
Clique aqui para saber mais sobre as cores do Windows
Cores da moda:
Amarelo Prímula
Abeto Sombreado
Peônia Marinha
Porto Tawny
Clique aqui para saber mais sobre as cores da moda
Cores da estrada:
Clique aqui para saber mais sobre bibliotecas de cores
Você aprenderá muito mais sobre cores em capítulos posteriores deste tutorial.