RGBA

Antes definíamos as cores em CSS das seguintes formas:

• color: red;
• color: #ff0000;
• color: rgb(255,0,0);
• color: rgb(100%,0%,0%);

Com o CSS3 o já conhecido modelo de cores RGB foi extendido nesta especificação para incluir “alfa” e permitir a especificação da opacidade de uma cor.

Ao contrário de valores RGB, não há a notação hexadecimal para um valor de RGBA.

O formato de um valor RGBA na notação funcional é ‘RGBA (“seguido por uma lista separada por vírgula de três valores numéricos (ou três valores inteiros ou três valores percentuais), seguido por um ).
O valor inteiro de 255 corresponde a 100%. Exemplo: RGBA (255,255,255,0.8) = RGBA (100%, 100%, 100%, 0.8).

O valor da opacidade varia entre 0.1 e 1, sendo o último valor equivalente a nenhuma opacidade. O que antes era feito apenas usando imagens agora é totalmente possível de uma forma muito simples!

O RGBA pode ser usado como um valor em quaisquer propriedades que aceitem cor. Alguns exemplos Por exemplo:

• background-color
• border-color
• color

Já vamos ver um exemplo do seu uso.

Exemplos

• RGBA com opacidade de 50%

#RGBA {
width: 200px;
height: 100px;
background: rgba(0,0,255,0.5); /*RGBA com opacidade de 50%*/
}

• Usando o RBGA com porcentagem

#RGBA {
width: 200px;
height: 100px;
background: rgba(0%,0%,100%,0.3); /*RGBA com porcentagem e opacidade de 30%*/
}

Funciona no:

Outros exemplos

• Mesclando o RGBA com outras propriedades!

#RGBA {
font-size: 18px;
color: rgba(7, 206, 250, 0.5);
text-shadow: 18px 0px 0 #ad0918; /*usando o text-shadow*/
}

Seja Criativo!

• Com a novidade do RGBA vai ficar:

#RGBA {
width: 200px;
height: 100px;
background: rgba(0,0,255,0.7);
box-shadow: 10px 10px 5px rgba(0,0,255,0.3); /*usando o RGBA com box-shadow*/
}

Funciona no:

Compartilhe

Cores

Normalmente, quando trabalhamos com as cores em CSS, lidamos com o formato hexadecimal, que fica assim: #ABCDEF ou o formato rgb, que se parece com isso: rgb (171205239).

Iremos conhecer novas formas de manipulação de cores, com o uso de:

• RGBA – (red, green, blue, alpha-opacity) que traduzimos como (Vermelho, Verde, Azul, Opacidade).
• HSL – (hue, saturation, lightness) que traduzimos como (Tom, Saturação, Luminosidade).
• HSLA – (hue, saturation, lightness, alpha-opacity) que traduzimos como (Tom, Saturação, Luminosidade, Opacidade).
• Opacity – Opacidade nos permite tornar o objeto CSS transparente.

Atualmente o RGBA, HSL, HSLA e Opacity são suportados apenas nas versões mais recentes do Firefox, Opera, Safari e Chrome. Como não é novidade alguma no mundo web, não existem soluções para o Internet Explorer (manifesto desde já meu repúdio a ele).

No entanto, é claro que não vamos esperar o IE ter suporte as maravilhosas novidades CSS3 e nem iremos deixar de experimentá-las!

Até a próxima galera!

Compartilhe

Degradê

Agora vamos entender como usar essa propriedade expressa através de ângulo.

<Ângulo>

Se definirmos a direção com o ângulo vai ficar:

• Se o é maior ou igual a 0deg e menos de 90deg, o ponto de partida da linha de gradiente é o canto esquerdo inferior da caixa de gradiente.
• Se o é maior ou igual a 90deg e menos 180deg então, o ponto de partida da linha de gradiente é o canto direito inferior da caixa de gradiente.
• Se o é maior ou igual a 180deg e menos 270deg então, o ponto de partida da linha de gradiente é o canto superior direito da caixa de gradiente.
• Se o é maior ou igual a 270deg e menos 360deg então, o ponto de partida da linha de gradiente é o canto superior esquerdo da caixa de gradiente.

Se tanto o posicionamento quanto o ângulo são especificados, o ponto de partida do degradê é determinado pelo posicionamento, o degradê de linha se estende ao ângulo, e o ponto final é determinado de forma semelhante ao caso anterior – com base no ângulo.

Se ambos forem omitidos(posicionamento e ângulo), isso equivale a simples especificação de “top” para o ponto de partida. Ou seja, ele define um gradiente vertical, começando no topo e terminando na parte inferior.

Exemplo

Como sempre, a melhor maneira de se aprender é fazendo, então vamos aos exemplos usando o ângulo:

• Degradê superior ESQUERDA(Left) para Inferior DIREITA(Right)

#degrade {
width: 300px;
height: 150px;
background: -moz-linear-gradient(left top 315deg, #00abeb, #fff); /*para o Firefox*/
background: -webkit-gradient(linear, left top, right bottom, from(#00abeb), to(#fff)); /*para navegores Webkit*/
}

Funciona no:

• Degradê superior Inferior DIREITA(Right) para ESQUERDA(Left)

#degrade {
width: 300px;
height: 150px;
background: -moz-linear-gradient(right top 225deg, #00abeb, #fff); /*para o Firefox*/
background: -webkit-gradient(linear, right top, left bottom, from(#00abeb), to(#fff)); /*para navegores Webkit*/
}

Funciona no:

• Degradê superior ESQUERDA(Left) brilhante para Inferior DIREITA(Right)

#degrade {
width: 300px;
height: 150px;
background: -moz-linear-gradient(left top 315deg, orange, yellow 30%, white 40%); /*para o Firefox*/
background: -webkit-gradient(linear, left top, right bottom, from(orange), color-stop(30%, yellow), color-stop(40%, white)); /*para navegores Webkit*/
}

Funciona no:

<color-stop>

Posições podem ser especificadas ao longo do eixo do degradê com uma cor para cada uma delas, chamadas de “color-stops”, e as áreas entre cada color-stop tem uma transição suave entre si.

Qualquer cor no degradê forma uma linha reta que é perpendicular ao eixo de inclinação. Na imagem abaixo, o eixo do degradê começa a partir do canto superior esquerdo da div, e é direcionado a um ângulo de 45 graus(315deg). Dois color-stops são especificados, vermelho e azul.

Exemplo

Então vamos aos exemplos usando o color-stop:

#degrade {
width: 300px;
height: 150px;
background: -moz-linear-gradient(left top 315deg, red, blue); /*para o Firefox*/
background: -webkit-gradient(linear, left top, right bottom, from(red), to(blue)); /*para navegores Webkit*/
}

Funciona no:

Múltiplas color-stop

O color-stop especifica um valor de cor intermediária e esse valor é composto da cor, e cada cor adicionada é seguida por uma parada definida por vírgula (“,”).

#degrade {
width: 300px;
height: 150px;
background-image: -moz-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /*para o Firefox*/
ackground: -webkit-gradient(linear, left center, right center, from(red), color-stop(18%, orange), color-stop(34%, yellow), color-stop(47%, green), color-stop(67%, blue), color-stop(84%, indigo), to(violet)); /*para navegores Webkit*/
}

Funciona no:

Extras

Agora pra galerinha que quer uma mãozinha, ai vai alguns sites que possuem ferramentas online para ajudar na hora de cria seu degradê CSS3, podendo já serem aplicados em menus.

Ferramenta Online de Menu em Degradê
Ultimate CSS Gradient Generator

Compartilhe

Degradê

O recurso degradê em CSS foi introduzido pela Webkit por cerca de dois anos, mas raramente foi utilizado devido à incompatibilidade com a maioria dos browers. Mas agora com o Firefox 3.6 +, também dando suporte, podemos criar o estilo de degradê sem ter de criar uma imagem.

Portanto navegadores modernos baseados em -moz e -webkit terão suporte adequado a esta propriedade que atualmente é aceita apenas no Chrome, Firefox e Safari em suas versões recentes.

Mozilla e Webkit geralmente adotam a mesma sintaxe para propriedades CSS3, mas infelizmente isso não acontece com o degradê. E a sintaxe definida por convenção pela W3C foi adotada pelo Firefox, e é nela que temos que prestar atenção. Mas para podermos apresentar o efeito degradê em navegadores baseados em -webkit como Chorme e Safari também colocaremos no código.

OBS: Lembrando-se que para usar a propriedade no Mozilla Firefox utiliamos -moz- antes da propriedade.

Existem dois tipos básicos de degradê definidos atualmente, linear e radial. E são especificados pelo linear-gradient e radial-gradient.

Podemos usá-las como valores em quaisquer propriedades que aceitem imagens. Por exemplo:

• background-image
• border-image
• list-style-image
• content

Linear Gradient

Um degradê linear é aquele que muda de cor em um eixo em linha reta do objeto em questão.

Declaração da sintaxe:

-moz-linear-gradient(posição ou ângulo, cor-de-partida, cor-final);

O primeiro argumento para a função especifica a linha que dá ao degradê uma direção e determina como as cores são posicionadas. Ela pode ser expressa através de posicionamento ou através de ângulo.

<Posicionamento>

Para ajudar vai aqui os valores válidos se utilizarmos o posicionamento:

• x-pos y-pos
• x-% y-%
• top left
• top center
• top right
• center left
• center center
• center right
• bottom left
• bottom center
• bottom right

Exemplo

A melhor maneira de se aprender é fazendo, então vamos aos exemplos usando o posicionamento:

• Degradê da ESQUERDA(Left) para DIREITA(Right)

#degrade {
width: 300px;
height: 100px;
background: -moz-linear-gradient(left, #00abeb, #fff); /*para o Firefox*/
background: -webkit-gradient(linear, left center, right center, from(#00abeb), to(#fff)); /*para navegores Webkit*/
}

Funciona no:

• Degradê da DIREITA(Right) para ESQUERDA(Left)

#degrade {
width: 300px;
height: 100px;
background: -moz-linear-gradient(right, #00abeb, #fff); /*para o Firefox*/
background: -webkit-gradient(linear, right center, left center, from(#00abeb), to(#fff)); /*para navegores Webkit*/
}

Funciona no:

• Degradê de TOPO(top) para BAIXO(bottom)

#degrade {
width: 300px;
height: 100px;
background: -moz-linear-gradient(top, #00abeb, #fff); /*para o Firefox*/
background: -webkit-gradient(linear, center top, center bottom, from(#00abeb), to(#fff)); /*para navegores Webkit*/
}

Funciona no:

• Degradê de BAIXO(bottom) para TOPO(top)

#degrade {
width: 300px;
height: 100px;
background: -moz-linear-gradient(bottom, #00abeb, #fff); /*para o Firefox*/
background: -webkit-gradient(linear, center bottom, center top, from(#00abeb), to(#fff)); /*para navegores Webkit*/
}

Funciona no:

Continua no próximo post…

Compartilhe

Alguns podem me perguntar o que um tutorial como este poderia estar fazendo num Blog como o meu, ou o que ele teria haver, e eu digo: TUDO HAVER!

Sim, nesse Blog para quem não sabe, nós estamos trilhando o caminho do CSS3 e para tal precisamos necessariamente dos navegadores, e o mais atualizados quanto possível.

Então fiz esse rápido tutorial para a instalação do Chromium 9 através de um repositório, na distribuição Linux Ubuntu 10.10. Para os desinformados, o navegador Chromium é o projeto de software livre do Google Chrome.

Para instalar o Chromium 9 no Ubuntu 10.10:

• Abrimos o arquivo sources.list como usuário root

usuario@ubuntu:~$ sudo gedit /etc/apt/sources.list

• Adicionamos as seguintes linhas no arquivo sources.list e salvamos:

• Adicionamos a CHAVE PGP de segurança dando os seguintes comandos no terminal:

usuario@ubuntu:~$ sudo apt-key adv –keyserver keyserver.ubuntu.com –recv-keys 4e5e17b5

• Agora é só atualizar e instalar:

usuario@ubuntu:~$ sudo apt-get update
usuario@ubuntu:~$ sudo apt-get install chromium-browser

Compartilhe

Múltiplas Imagens de Background

#multiplas_backgrounds{
width: 300px;
height: 100px;
background: url(http://www.css3.x4ids.com.br/imagens/ubuntu-tutoriais-css3.png) no-repeat top right,
url(http://www.css3.x4ids.com.br/imagens/counterstrikeCSSpng.png) repeat-x bottom,
url(http://www.css3.x4ids.com.br/imagens/css3-is-great-sombra.png);
}

Funciona no:

Agora vamos entender o que fizemos.

Defini primeiro uma largura e uma altura para a nossa div. O código é muito parecido com o que já conhecemos do CSS2, exceto as vírgulas que são usadas para separar as imagens. Podemos assim colocar várias imagens de fundo e definir sua localização através da propriedade background-position já conhecida do CSS2 que pode ser incerida log após declarada a “url” da imagem. Para ajudar vai aqui os valores válidos para o  background-position:

• x-pos y-pos
• x-% y-%
• top left
• top center
• top right
• center left
• center center
• center right
• bottom left
• bottom center
• bottom right

Vamos ver mais um exemplo:

#multiplas_backgrounds{
width: 500px;
height: 365px;
border: 2px solid #CCC;
background: url(http://www.css3.x4ids.com.br/imagens/sol-tutoriais-css3.png) no-repeat top right,
url(http://www.css3.x4ids.com.br/imagens/berserker-tutoriais-css3.png) no-repeat bottom left,
url(http://www.css3.x4ids.com.br/imagens/comic-tutoriais-css3.png) no-repeat bottom right,
url(http://www.css3.x4ids.com.br/imagens/ceu-tutoriais-css3.jpg) repeat-x bottom;
url(http://www.css3.x4ids.com.br/imagens/grama-tutoriais-css3.jpg) repeat-x bottom;
}

Funciona no:

Agora vamos ver como posicionamos cada imagem:

• : sol-tutoriais-css3.png posicionada com top e right.

• : berserker-tutoriais-css3.png posicionada com bottom e left.

• : comic-tutoriais-css3.png posicionada com bottom e right.

• : ceu-tutoriais-css3.jpg posicionada com top e repete na horizontal.

• : grama-tutoriais-css3.jpg posicionada com bottom e repete na horizontal.

Regras no posionamento:

O background que for declarado primeiro será o de nível superior e, acima de todos os outros Backgrounds.
Por exemplo, o sol (a imagem de fundo em primeiro lugar) será superior a todos os outros, enquanto a grama (imagem de fundo último da lista) será debaixo de todas as outras.

Espero que possamos utilizar com muita criatividade este novo método de posicionamento CSS3 que nos permite criar backgrounds vários níveis e mantê-los organizados.

Compartilhe

background-size

Há os seguintes valores possíveis:

• background-size: 100px 100px; redimensiona a imagem para o tamanho especificado. O primeiro valor especifica a largura enquanto o segundo valor especifica a altura da imagem.
• background-size: 50% 100%; redimensiona a imagem para o tamanho especificado. As porcentagens são em relação ao tamanho do elemento que contém, sendo o primeiro valor a largura enquanto o segundo valor a altura da imagem.
• background-size: contain; diminui a escala da imagem para caber no elemento (manter proporção de pixel).
• background-size: cover; aumenta a escala da imagem para caber no elemento (manter proporção de pixel).

OBS: Lembrando-se que para usar a propriedade no navegador Safari e Google Chrome utiliamos antes do código -webkit-, e para o Opera -o-. No entanto, se o seu navegador não suporte a propriedade, então você só vai ver a imagem no canto superior esquerdo da div ou ela no seu tamanho original.

Trabalhando com pixels

Exemplo background-size:

.backgroundsize {
background: url(http://www.css3.x4ids.com.br/imagens/css3-ohana.jpg) no-repeat;
background-size: 200px 254px;
width:200px;
height:254px;
}

Funciona no:

O tamanho original dessa imagem na realidade é de 118px de largura e 150px de altura. Mas com a propriedade background-size nós podemos altera-la da forma que nós interessar.

Trabalhando com porcentagem

Outra forma de utilizar a propriedade é usando porcentagem ao invés de pixels.

Exemplo background-size com porcentagem:

.backgroundsize {
background: url(http://www.css3.x4ids.com.br/imagens/css3-ohana.jpg) no-repeat;
background-size:100%;
width:150px;
height:191px;
}

Funciona no:

Trabalhando com background-size: contain

Para filtrar um pouco mais essa informação no Firefox não funcionará. Vejam o exemplo com o Chrome ou com o Safari. Experimente redimensionar esse Exemplo Live. Mas nem preciso dizer que não funcionará no Internet Explorer né?

Exemplo background-size: contain:

.backgroundsize {
background: url(http://www.css3.x4ids.com.br/imagens/css3-logotipo-x4ids.png) no-repeat;
background-attachment: fixed;
background-size: contain;
}

Funciona no:

Agora, para quem não conseguiu ver o exemplo em seu navegador, acesse aqui a página com o exemplo e veja também!

EXEMPLO BACKGROUND-SIZE: CONTAIN

OBS: a propriedade “background-attachment” com o valor “fixed” é usada em conjunto em nosso código porque ela vai permitir que a imagem fique fixa conforme redimensionamos a página.

Trabalhando com background-size: cover

Experimente redimensionar esse Exemplo Live.

Exemplo background-size: cover:

.backgroundsize {
background: url(http://www.css3.x4ids.com.br/imagens/css3-logotipo-x4ids.png) no-repeat;
background-attachment: fixed;
background-size: cover;
}

Funciona no:

Agora, para quem não conseguiu ver o exemplo em seu navegador, acesse aqui a página com o exemplo e veja também!

EXEMPLO BACKGROUND-SIZE: COVER

OBS: a propriedade “background-attachment” com o valor “fixed” é usada em conjunto em nosso código porque ela vai permitir que a imagem fique fixa conforme redimensionamos a página.

Outras aplicações

Segue agora um exemplo simples de redimensionar o logotipo CSS3 como background no canto superior esquerdo e um texto.
Exemplo background-size:

.backgroundsize {
background: url(http://www.css3.x4ids.com.br/imagens/css3-logotipo-x4ids.png) no-repeat;
background-size: 150px 96px;
width: 150px;
height: 96px;
padding: 10px;
}

Funciona no:

Compartilhe

background-origin

• background-origin: border-box;

Quando border-box é usado, a posição é relativa ao canto superior esquerdo incluindo a borda.

• background-origin: padding-box;

A outra opção é padding-box o que significa que a imagem de fundo não vai até a borda. Os backgrounds serão exibidos sobre o padding, não sobre a borda.

• background-origin: content-box;

No content-box backgrounds exibidos sobre o conteúdo, não incluída a borda e o padding.

Exemplo background-origin: border-box

div{
background: url(http://www.css3.x4ids.com.br/imagens/Kenshin-css3.jpg) no-repeat;
background-origin: border-box;
width:200px;
height:100px;
border: 20px dotted;
padding: 20px;
}

background-origin: border-box

Funciona no:

Exemplo background-origin: padding-box

div{
background: url(http://www.css3.x4ids.com.br/imagens/Kenshin-css3.jpg) no-repeat;
background-origin: padding-box;
width:200px;
height:100px;
border: 20px dotted;
padding: 20px;
}

background-origin: padding-box

Funciona no:

Exemplo background-origin: content-box

div{
background: url(http://www.css3.x4ids.com.br/imagens/Kenshin-css3.jpg) no-repeat;
background-origin: content-box;
width:200px;
height:100px;
border: 20px dotted;
padding: 20px;
}

background-origin: content-box

Funciona no:


Até o CSS3 ser oficialmente lançado, usaremos as propriedades da seguinte forma:

• Para o Firefox:

-moz-background-origin: border;

-moz-background-origin: padding;

• Para Safari e Chrome:

-webkit-background-origin: border;

-webkit-background-origin: padding;

Compartilhe

background-clip

• background-clip: border-box;

Quando border-box é usado, os backgrounds são exibidos abaixo da borda.

• background-clip: padding-box;

A outra opção é padding-box o que significa que a imagem de fundo não vai esticar até a borda. Os backgrounds serão exibidos sobre o padding, não sobre a borda.

• background-clip: content-box;

No content-box backgrounds exibidos sobre o conteúdo, não incluída a borda e o padding.

Exemplo background-clip: border-box

div{
background: #2D72FF;
background-clip: border-box;
width:200px;
height:100px;
border: 20px dotted;
padding: 20px;
}

background-clip: border-box

Funciona no:

Exemplo background-clip: padding-box

div{
background: #2D72FF;
background-clip: padding-box;
width:200px;
height:100px;
border: 20px dotted;
padding: 20px;
}

background-clip: padding-box

Funciona no:

Exemplo background-clip: content-box

div{
background: #2D72FF;
background-clip: content-box;
width:200px;
height:100px;
border: 20px dotted;
padding: 20px;
}

background-clip: content-box

Funciona no:


Até o CSS3 ser oficialmente lançado, usaremos as propriedades da seguinte forma:

• Para o Firefox:

-moz-background-clip: border;

-moz-background-clip: padding;

• Para Safari e Chrome:

-webkit-background-clip: border;

-webkit-background-clip: padding;

Compartilhe

backgrounds

Os novos recursos permitem maior controle sobre o elemento de background e proporcionará aos designers toda uma série de novas possibilidades, como fazer um background em degradê sem utilização de imagens, o que tem diversas vantagens!

Estudaremos as seguintes propriedades de Backgrounds:

background-clip
background-origin
background-size
múltiplas imagens de background
background em degradê Parte 1 e Parte 2

Compartilhe