Vai Na Web
O Vai na Web é um movimento de alta tecnologia e impacto social que amplia as capacidades humanas e requalifica a força de trabalho para encarar os desafios da Indústria 4.0.
Cor e tipografia
As cores na web
RGB
Monitores são pretos e iluminados por vários pontinhos de luz. Vamos somando pontinhos vermelhos, verdes, e azuis até chegar na cor.
É formada por três pares de números, formados por três dígitos. Quanto mais alto o número mais clara é a cor. Em CSS, um quarto número representa o canal alpha.
p {
color: rgb(0, 255, 1);
}Sou um parágrafo verde
p {
color: rgba(0, 255, 0, 0.5);
}Sou um parágrafo verde bem apagadinho
Hexadecimais
Compostos por uma combinação de três conjuntos de pares formados a partir de número e letras de A a F. Quanto mais alto o número mais clara é a cor.
Hexadecimais
Cada par é responsável por uma cor, assim como o RGB, Vermelho, verde e azul. Ou seja #ff0000 é o vermelho, e o #00ff00 é o verde e #0000ff é o azul.
p {
color: #ff0000;
}Sou um parágrafo vermelho
Ferramentas legais
http://lokeshdhakar.com/projects/color-thief/
https://color.adobe.com/pt/create/color-wheel/
http://moviesincolor.com/
Tipografia
Temos muitas propriedades oferecidas pelo CSS para trabalhar com as palavras, elas se encaixam em duas categorias: propriedades baseadas em fontes e propriedades baseadas em texto. Vamos conhecer algumas!
A propriedade font-family é usada para declarar qual tipo de letra devem ser usadas para exibir texto. O valor da propriedade font-family pode conter vários nomes de fontes, todos separados por vírgulas.
p {
font-family: Helvetica, Arial, sans-serif;
}A propriedade font-size nos permite definir o tamanho do texto usando alguns valores. Assim como quando falamos em dinheiro precisamos citar a moeda, quando definimos o valor de um font-size usamos algumas unidades de medida.
p {
font-size: 16px;
}A propriedade font-style aceita quatro valores de palavras-chave: normal, italic, oblique e inherit.
p {
font-style: italic;
}Podemos definir um texto em negrito ou alterar o peso específico de um tipo de letra. Para esses casos, usaremos a propriedade font-weight. A propriedade font-weight aceita valores de palavra-chave ou numéricos.
p {
font-weight: bold;
}A propriedade line-height é responsável por modificar a distância entre duas linhas de texto declaramos usando a propriedade de altura da linha.
p {
height: 26px;
line-height: 26px;
}
A propriedade text-align modifica o alinhamento de uma frase em relação a uma página. Ela aceita os valores left, right, center, e justify. Exemplo:
p {
text-align: center;
}Vamos praticar?
Até a próxima!
Cor e Tipografia
By Vai Na Web
Cor e Tipografia
WIP
