Definir fundos e gradientes

Os fundos têm um impacto significativo na conceção de um site. Eles ajudam a criar o aspecto e a sensação de um site, estabelecem agrupamentos e atribuem prioridade, e eles têm uma influência considerável na usabilidade de um site.

Dentro do CSS, os fundos dos elementos podem ser uma cor sólida, uma imagem, um gradiente ou uma combinação destes. Ao decidir como implementar esses antecedentes, devemos ter em mente que cada fundo contribui para a aparência geral do nosso site.

Nesta lição, vamos analisar como atribuir diferentes tipos de origens, incluindo gradientes, aos elementos; Vamos falar também de um punhado de propriedades CSS3 específicas para backgrounds.

Adicionando uma cor de fundo

A maneira mais rápida de adicionar um plano de fundo a um elemento é adicionar um fundo de uma única cor usando a propriedade de fundo ou de cor de fundo. A propriedade de fundo aceita cores e imagens em forma abreviada, enquanto a propriedade de cor de fundo é usada estritamente para definir cores de fundo sólidas. Qualquer propriedade funcionará e qualquer que decida usar depende da sua preferência, bem como o caso para o qual se está a usar.

div {

background-color: #b2b2b2;

}

Ao adicionar uma cor de fundo, temos algumas opções para os valores que podemos usar. Tal como acontece com outros valores de cor, podemos escolher entre palavras-chave, códigos hexadecimais e valores RGB, RGBa, HSL e HSLa. Na maioria das vezes, veremos valores hexadecimais; No entanto, ocasionalmente utilizamos valores RGBa ou HSLa para transparências.

Fundos transparentes

Ao usar um valor RGBa ou HSLa como uma cor de fundo transparente, é uma boa ideia fornecer uma cor alternativa, porque nem todos os navegadores reconhecem valores RGBa ou HSLa. O suporte ao navegador é especificamente um problema com o Internet Explorer 8, onde os valores RGBa e HSLa não são suportados. E quando um navegador como o Internet Explorer 8 encontrar um valor que não reconhece, ele vai ser ignorado.

Se o suporte ao Internet Explorer 8 é uma preocupação, felizmente, há uma maneira fácil de fornecer um fundo de retorno. CSS cascata da parte superior de um arquivo na parte inferior de um arquivo; assim, podemos usar duas propriedades de cor de fundo dentro de um único conjunto de regras. A primeira propriedade de cor de fundo usará uma cor de fundo "segura", como um valor hexadecimal, e a segunda propriedade de cor de fundo usará um valor RGBa ou HSLa. Aqui, se um navegador entender o valor RGBa ou HSLa, ele irá renderizá-lo e, se não, ele retornará ao valor hexadecimal acima.

div {

background-color: #b2b2b2;

background-color: rgba(0, 0, 0, .3);

}

Adicionando uma Imagem de Fundo

Além de adicionar uma cor de fundo a um elemento, também podemos adicionar uma imagem de fundo. As imagens em segundo plano funcionam de forma semelhante às cores de fundo; no entanto, eles oferecem algumas propriedades adicionais para finesse as imagens. Como antes, podemos usar a propriedade de fundo com um valor abreviado, ou podemos usar a imagem de imagem de fundo diretamente. Não importa qual a propriedade que usamos, deve haver uma fonte de imagem identificada usando uma função url ().

O valor da função url () será o caminho da imagem de fundo, e as regras familiares para criar caminhos de hiperlink aplicam-se aqui. Mantenha-se atento aos diferentes diretórios, e certifique-se que mostra exatamente onde a imagem reside. O caminho será colocado entre parênteses e citado.

div {

background-image: url("alert.png");

}

Adicionar uma imagem de fundo exclusivamente com um valor url pode fornecer resultados indesejáveis, pois, por padrão, a imagem de fundo repetirá horizontal e verticalmente a partir do canto superior esquerdo do elemento dado para preencher o plano de fundo do elemento. Felizmente, podemos usar as propriedades background-repeat e background-position para controlar como ou mesmo se a imagem se repete.

Repetição de fundo

Por padrão, uma imagem de fundo irá repetir indefinidamente, tanto vertical quanto horizontalmente, a menos que seja especificado de outra forma. A propriedade background-repeat pode ser usada para alterar a direção na qual uma imagem de fundo é repetida, se repetida.

div {

background-image: url("alert.png");

background-repeat: no-repeat;

}

A propriedade background-repeat aceita quatro valores diferentes: repetir, repetir-x, repetir-y e não repetir. O valor de repetição é o valor padrão e repete uma imagem de plano de fundo vertical e horizontalmente.

O valor de repetição-x repetirá a imagem de fundo horizontalmente, enquanto o valor de repetição-y repetirá a imagem de fundo verticalmente. Por fim, o valor sem repetição indicará ao navegador que exiba a imagem de fundo uma vez, ou seja, não a repita.

Posição de fundo

Por padrão, as imagens de fundo são posicionadas no canto superior esquerdo de um elemento. No entanto, usando a propriedade background-position, podemos controlar exatamente onde a imagem de fundo é colocada em relação a esse canto.

div {

background-image: url("alert.png");

background-position: 20px 10px;

background-repeat: no-repeat;

}

A propriedade background-position requer dois valores: um deslocamento horizontal (o primeiro valor) e um deslocamento vertical (o segundo valor). Se apenas um valor for especificado, esse valor é usado para o deslocamento horizontal e o deslocamento vertical será padrão para 50%.

Como estamos a mover a imagem de fundo do canto superior esquerdo do elemento, os valores de comprimento especificamente serão em relação a esse canto.

Para definir um valor de posição de fundo, podemos usar as palavras-chave, píxeis, percentagens ou qualquer medida de comprimento superior, direita, inferior, esquerda e central. Palavras-chave e percentagens funcionam de forma similar. O valor da palavra-chave esquerda superior é idêntico ao valor percentual 0 0, que manterá uma imagem posicionada no canto superior esquerdo do elemento. O valor da palavra-chave no lado direito é idêntico ao valor percentual 100% 100%, que posicionará uma imagem no canto inferior direito do elemento.

O uso de píxeis para um valor de posição de fundo também é comum, pois os píxeis dão-nos controlo preciso sobre o posicionamento do nosso fundo.

Valores da imagem de fundo da taquigrafia

As propriedades background-color, background-image, background-position e background-repeat podem ser enroladas num valor abreviado para a propriedade de fundo sozinho. A ordem destas propriedades como um valor da propriedade de fundo da abreviatura pode variar, no entanto, geralmente cai como cor de fundo, imagem de fundo, posição de fundo e, em seguida, repete o fundo.

div {

background: #b2b2b2 url("alert.png") 20px 10px no-repeat;

}

Exemplo de Imagem de Fundo

No exemplo a seguir, vamos usar a propriedade de fundo com um valor abreviado que inclui valores de cor de fundo, imagem de fundo, plano de fundo e valores de fundo.

Repare que existe um valor relativo e um valor absoluto dentro do valor da posição de fundo. O primeiro valor, 20 píxeis, é o valor horizontal, posicionando a imagem de fundo 20 píxeis a partir do lado esquerdo do elemento. O segundo valor, 50%, é o valor vertical, que verticalmente centra a imagem de fundo.

Algumas outras propriedades e valores também estão incluídos na regra de classificação de sucesso de aviso definida para aprimorar o estilo da mensagem de alerta.

HTML

<div class="notice-success">

Woo hoo! Congratulations, you did it!

</div>

CSS

.notice-success {

background: #67b11c url("tick.png") 20px 50% no-repeat;

border: 2px solid #467813;

border-radius: 5px;

color: #fff;

font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

padding: 15px 20px 15px 50px;

}

Demonstração de Imagem de Fundo

HTML

<div class="notice-success">

Woo hoo! Congratulations, you did it!

</div>

CSS

.notice-success {

background: #67b11c url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/tick_2.png") 20px 50% no-repeat;

background: #67b11c url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/tick_1.svg") 20px 50% no-repeat;

border: 2px solid #467813;

border-radius: 5px;

color: #fff;

font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

padding: 15px 20px 15px 50px;

}

Resultado

Na prática

Voltando ao nosso site da Conferência Styles, vamos adicionar algumas cores de fundo. Enquanto fazemos isso, mudamos alguns outros estilos para manter todos os nossos estilos a trabalhar juntos e para manter todo o nosso conteúdo legível.

1. Vamos começar por um grande passo e vamos aplicar um fundo azul ao elemento <body> ao lado das propriedades de cores e fontes existentes. Todos os estilos para o conjunto de regras do elemento <body> agora incluem o seguinte:

body {

background: #293f50;

color: #888;

font: 300 16px/22px "Lato", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

}

Colocámos um plano de fundo azul no elemento <body> propositalmente, pois o site terá algumas linhas diferentes de cores de fundo e a cor de fundo mais frequente será azul.

1. Agora que cada página no site da Conferência Styles inclui um fundo azul, vamos limpar algumas áreas que manterão esse fundo azul. Especificamente, os elementos <header> e <footer> permanecerão em azul, assim como a secção herói na página inicial.

Dentro dos nossos elementos <header> e <footer> vamos fazer com que todas as nossas cores do link comecem como brancas e depois, ao passarem, tornam o mesmo verde que nossos títulos.

Começaremos com o nosso elemento <header>. Para selecionar todos os elementos <a> no elemento <header>, vamos adicionar uma classe de cabeçalho primário ao elemento <header> (além das classes de contêiner e grupo existentes). Não se esqueça, precisamos de adicionar esta classe aos elementos <header> em todas as nossas páginas.

<header class="primary-header container group">

...

</header>

Com a classe de cabeçalho principal no lugar no elemento <header> e a classe de rodapé primária existente no lugar no elemento <footer>, podemos adicionar dois novos conjuntos de regras na parte inferior da seção de links no aqruivo main.css.

O primeiro conjunto de regras vai selecionar todos os elementos <a> dentro de um elemento com o valor do atributo de classe do cabeçalho primário ou principal-rodapé e definirá a sua cor como branca, conforme definido pela vírgula que separa os dois seletores individuais que compartilham a mesma propriedade e valor. O segundo conjunto de regras seleciona os mesmos <a> elementos como antes, mas vai mudar a sua cor para verde quando um usuário paira sobre eles.

.primary-header a,

.primary-footer a {

color: #fff;

}

.primary-header a:hover,

.primary-footer a:hover {

color: #648880;

}

1. Enquanto fazemos um pouco do nosso texto branco, vamos fazer o texto dentro da secção de heróis da nossa página inicial também, pois vai permanecer num fundo azul. Temos o conjunto de regras de classe de heróis existente disponível para adicionar estilos, então vamos adicionar a cor de texto em branco lá. No total, o conjunto de regras de classe de heróis deve incluir o seguinte:

.hero {

color: #fff;

line-height: 44px;

padding: 22px 80px 66px 80px;

text-align: center;

}

1. Também dentro da secção de heróis da página inicial, vamos limpar alguns estilos de botão. Começamos por adicionar algumas propriedades novas ao conjunto de regras da classe btn*, dentro da secção de botões do nosso arquivo main.css.

Especificamente, vamos definir a cor do texto do botão em branco, certifique-se de que o cursor seja sempre um ponteiro, aumente o peso da fonte, adicione uma pequena quantidade de espaçamento de letras e altere a transformação de texto para maiúscula.

No total, o novo conjunto de regras da classe btn deve ser assim:

.btn {

border-radius: 5px;

color: #fff;

cursor: pointer;

display: inline-block;

font-weight: 400;

letter-spacing: .5px;

margin: 0;

text-transform: uppercase;

}

Também vamos limpar alguns dos estilos de botão alternativos por meio do conjunto de regras da classe btn-alt. Especificamente, vamos tornar as bordas dos botões brancas e adicionar estilos de hover, incluindo um fundo branco e uma cor de texto azul.

Com todas as adições, o novo conjunto de regras da classe btn-alt deve ser assim:

.btn-alt {

border: 1px solid #fff;

padding: 10px 30px;

}

.btn-alt:hover {

background: #fff;

color: #648880;

}

1. Agora que temos as áreas todas com fundos azuis limpos, vamos adicionar estilos para as linhas que têm fundos brancos. Vamos criar uma nova secção dentro do arquivo main.css para linhas, logo abaixo da secção clearfix. Dentro desta nova secção de linhas, vamos criar um novo seletor de classe chamado linha.

Dentro do nosso novo conjunto de regras de classe de linha, vamos adicionar um fundo branco, uma largura mínima de 960 píxeis (para garantir que os elementos de linha sejam sempre maiores do que a largura dos contêineres ou elementos da grade) e algum preenchimento vertical. Ao todo, a nova secção de linha no nosso arquivo main.css deve ficar assim:

/*

========================================

Rows

========================================

*/

.row {

background: #fff;

min-width: 960px;

padding: 66px 0 44px 0;

}

1. Com os estilos de classe de linha no lugar, vamos adicionar uma linha com um fundo branco para a página inicial. Vamos fazer isso na nossa secção de provocações. Atualmente, esta área tem um elemento <section> com a classe de grade envolvendo três elementos <section> adicionais com as classes de teaser e col-1-3.

Para adicionar um fundo branco a esta seção, vamos envolver todos esses elementos num elemento com a classe de linha.

Como queremos toda a secção de provocações envolvidas num elemento <section>, vamos adicionar um novo elemento <section> com a classe de linha que envolve o elemento <section> existente com a classe de grade.

Ter dois elementos <section> envolvendo exatamente o mesmo conteúdo diminui o valor semântico. Para corrigir isso, mudamos o segundo elemento <section>, aquele com a classe de grade, para um elemento <div>. Afinal, nesse ponto, esse elemento é apenas para adicionar estilos, e é apropriado como um elemento <div>.

A estrutura do novo elemento teasers deve ser assim:

<section class="row">

<div class="grid">

`<!-- Speakers -->`

`<section class="teaser col-1-3">`

  `...`

`</section><!--`

`Schedule`

`--><section class="teaser col-1-3">`

  `...`

`</section><!--`

`Venue`

`--><section class="teaser col-1-3">`

  `...`

`</section>`

</div>

</section>

É incrível como algumas cores de fundo podem afetar o design de um site. O nosso site da Conferência Styles está a correr muito bem, e a nossa página inicial é a prova disso.

Projetando fundos de gradiente

Os fundos de gradiente foram introduzidos com o CSS3, e designers e desenvolvedores de front-end alegraram-se em todos os lugares. Embora os fundos de gradiente não funcionem em navegadores legados, eles são suportados por todos os navegadores modernos.

Dentro do CSS, os fundos de gradiente são tratados como imagens de plano de fundo. Podemos criar um gradiente usando as propriedades de plano de fundo ou imagem de fundo, assim como uma imagem de plano de fundo normal. O valor da propriedade para um fundo de gradiente varia de acordo com o tipo de gradiente que gostaríamos, linear ou radial.

Prefixos do fornecedor de fundo de gradiente

Na Lição 4, "Abrindo o Modelo da Caixa", discutimos a adição de prefixos de fornecedores a novas propriedades ou valores CSS para que os navegadores possam suportar recursos CSS desenvolvidos recentemente. Os valores de fundo de gradiente foram um dos valores que requeriam o uso de prefixos de fornecedores. Felizmente, a maioria dos navegadores eliminou a necessidade de um prefixo de fornecedor para renderizar um fundo de gradiente; no entanto, ainda vale a pena delinear prefixos de fornecedores para garantir o melhor suporte.

No inicio, quando começamos a discutir os fundos de gradiente linear, vamos incluir cada um dos diferentes prefixos do fornecedor. Depois disso, no interesse da brevidade, omitiremos os diferentes prefixos enquanto continuamos a discutir os gradientes de fundos, incluindo os fundos de gradiente radial.

Fundo de gradiente linear

Durante anos, designers e desenvolvedores foram cortando arquivos de imagem em gradiente, criados usando o software de processamento de imagem e usando-os como fundos de gradiente linear em elementos. O processo funcionou, mas demorou um pouco a implementar e foi muito inflexível. Felizmente, esses dias se foram, e os fundos de gradiente linear agora podem ser especificados dentro do CSS. Se uma cor precisa ser alterada, não há necessidade de reproduzir e recortar uma imagem e enviá-la para o servidor. Agora, tudo o que precisamos fazer é mudar um valor rápido dentro do CSS. Bonita.

div {

background: #466368;

background: -webkit-linear-gradient(#648880, #293f50);

background: -moz-linear-gradient(#648880, #293f50);

background: linear-gradient(#648880, #293f50);

}

Demonstração de fundo de gradiente linear

Os gradientes lineares são identificados usando a função de gradiente linear () na propriedade de plano de fundo ou imagem de fundo. A função de gradiente linear () deve incluir dois valores de cor, sendo o primeiro o valor de cor inicial e o segundo do qual será o valor de cor final. O navegador irá então lidar com a transição entre as duas cores.

Antes que qualquer fundo de gradiente seja identificado, também colocaremos uma propriedade de fundo padrão com uma cor sólida. A cor sólida deve ser usada como um retorno se um navegador não suportar fundos de gradiente.

Alterando a direção de um fundo de gradiente

Por padrão, os fundos de gradiente linear se movem da parte superior para a parte inferior de um elemento, fazendo a transição suave entre o primeiro valor da cor e o segundo. Esta direção, no entanto, pode ser alterada com o uso de palavras-chave ou um valor de grau indicado antes de qualquer valor de cor.

Por exemplo, se desejarmos que um gradiente se mova da esquerda de um elemento para a direita, podemos usar o valor da palavra-chave para identificar a direção na qual o gradiente linear deve progredir. Os valores das palavras-chave também podem ser combinados. Se quisermos que o gradiente se mova da parte superior esquerda para a parte inferior direita de um elemento, podemos usar o valor da palavra-chave para a parte inferior direita.

div {

background: #466368;

background: linear-gradient(to right bottom, #648880, #293f50);

}

Demonstração direção de gradiente linear de fundo

Quando usamos um gradiente diagonal num elemento que não é exatamente quadrado, o gradiente de fundo não irá diretamente de um canto para o outro. Em vez disso, o gradiente identificará o centro absoluto do elemento, colocará âncoras nos cantos perpendiculares de onde deve progredir e, em seguida, move-se para a direção geral do canto indicado dentro do valor. Esses cantos em que o gradiente se move são chamados de "cantos mágicos", pois não são absolutos. Eric Meyer fez um trabalho maravilhoso ao delinear essa sintaxe em seu artigo "Gradual Linear".

Além de palavras-chave, os valores dos graus também são aceitáveis. Se queremos que o gradiente se mova para o topo esquerdo de um elemento, podemos usar o valor do grau de 315deg, ou se queremos que nosso gradiente se mova para a parte inferior direita de um elemento, podemos usar o valor do grau de 135deg. Este mesmo conceito pode ser aplicado para qualquer valor de grau, 0 a 360.

Fundo de Gradiente Radial

Enquanto o gradiente linear é perfeito para um gradiente que se move de uma direção para outra, muitas vezes a necessidade de um gradiente radial surge. Os gradientes de fundo radial funcionam exatamente como gradientes lineares e compartilham muitos dos mesmos valores. Para gradientes radiais, em vez de usar a função de gradiente linear () na propriedade de plano de fundo ou imagem de fundo, usaremos a função de gradiente radial ().

div {

background: #466368;

background: radial-gradient(#648880, #293f50);

}

Demonstração de fundo de gradiente radial

Os gradientes radiais funcionam de dentro para fora de um elemento. Assim, a primeira cor identificada dentro da função de gradiente radial () irá sentar-se no centro absoluto do elemento e a segunda cor se sentará na parte externa de um elemento. O navegador criará a transição entre as duas cores.

Uma das principais diferenças entre gradientes radiais e gradientes lineares é que os gradientes radiais podem ser bastante complexos, com valores de localização, tamanho, raio e assim por diante. Vamos abordar o básico, mas sinta-se livre para aprofundar ainda mais os gradientes radiais, pois proporcionam muito mais poder do que aqui descrito.

Gerador de fundo de gradiente CSS3

Trabalhar com gradientes CSS3 à mão pode ser bastante difícil às vezes, especialmente se é novo a trabalhar com eles. Felizmente, alguns geradores de gradiente CSS3 surgiram. Cada gerador funciona um pouco diferente e alguns fornecem mais opções do que outros. Se estiver interessado, eu recomendo fazer algumas pesquisas para encontrar o gerador certo para suas necessidades.

Cortes de cor gradiente

No mínimo, os fundos de gradiente passarão de uma cor para outra; no entanto, podemos adicionar várias cores a um gradiente e ter a transição do navegador entre todos eles. Para fazer isso, adicionaremos paradas de cor para a função de gradiente dada, com vírgulas separando cada parada de cores da próxima.

div {

background: #648880;

background: linear-gradient(to right, #f6f1d3, #648880, #293f50);

}

Demonstração de cortes de cor gradiente

Por padrão, o navegador posicionará cada cor para uma distância igual do próximo e irá transitar entre eles de acordo. Se for desejado mais controlo sobre como as cores são posicionadas, um local ao longo do gradiente pode ser identificado para cada corte de cor. A localização deve ser declarada como um valor de comprimento e deve cair após o valor da cor.

div {

background: #648880;

background: linear-gradient(to right, #f6f1d3, #648880 85%, #293f50);

}

Demonstração de posições de corte de cor gradiente

Salvo indicação em contrário, o primeiro corte de cores será posicionado em 0% e o último será posicionado em 100%.

Exemplo de fundo de gradiente

Usando a mesma mensagem de alerta de sucesso de antes, trocaremos a imagem de fundo antiga para uma imagem de fundo de gradiente linear.

Para isso, incluiremos duas propriedades de fundo. A primeira propriedade de fundo especifica um valor hexadecimal de cor sólida, que serve como um retorno se um navegador não suportar fundos de gradiente linear. A segunda propriedade de fundo inclui a função de gradiente linear (), que identifica um fundo de gradiente verde que transita da parte superior do elemento para a parte inferior do elemento.

HTML

<div class="notice-success">

Woo hoo! Congratulations, you did it!

</div>

CSS

.notice-success {

background: #67b11c;

background: linear-gradient(#72c41f, #5c9e19);

border: 2px solid #467813;

border-radius: 5px;

color: #fff;

font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

padding: 15px 20px;

}

Na prática

Com fundos de gradiente agora no mix, vamos criar uma nova linha para o nosso site da Conferência Styles, desta vez usando um gradiente.

1. Vamos criar uma nova linha com um fundo degradado usando a classe de row-alt. Como a nova linha compartilhará a mesma propriedade de min-width e o valor do seletor de classe de linha, combinaremos esses dois seletores.

.row,

.row-alt {

min-width: 960px;

}

Em seguida, queremos criar novos conjuntos de regras para aplicar estilos especificamente ao seletor de classe row-alt. Estes novos estilos incluirão um fundo de gradiente que começa com verde e as transições para amarelo, da esquerda para a direita.

Usando a função linear-gradient () com os valores apropriados e os prefixos do fornecedor, adicionaremos o fundo de gradiente ao conjunto de regras da classe row-alt. Incluiremos também uma única cor de fundo antes do fundo do gradiente como um retorno, apenas no caso de um navegador não suportar fundos de gradiente.

Por fim, também adicionaremos algum preenchimento vertical. Nossa seção de linha atualizada agora se parece com isso:

.row,

.row-alt{

min-width: 960px;

}

.row {

background: #fff;

padding: 66px 0 44px 0;

}

.row-alt {

background: #cbe2c1;

background: -webkit-linear-gradient(to right, #a1d3b0, #f6f1d3);

background: -moz-linear-gradient(to right, #a1d3b0, #f6f1d3);

background: linear-gradient(to right, #a1d3b0, #f6f1d3);

padding: 44px 0 22px 0;

}

1. Com os nossos estilos de alturas de linha, vamos coloca-los em todas as nossas páginas internas. Atualmente, todas as nossas páginas interiores têm um elemento <section> com uma classe de contêiner. Então, dentro de cada elemento <section> há um elemento <h1> que contém o título da página.

Vamos alterar esses elementos <section>, como fizemos o elemento teaser <section> na página inicial. Vamos embrulhar cada elemento <section> com uma classe de container num elemento <section> com a classe de row-alt. Em seguida, mudaremos cada elemento <section> com uma classe de container para um elemento <div> para melhor alinhamento semântico.

Cada uma das nossas páginas interiores deve agora incluir o seguinte:

<section class="row-alt">

<div class="container">

`<h1>...</h1>`

</div>

</section>

1. Porque estamos aa atualizar as páginas interiores, vamos fazer as apresentações, ou pistas, um pouco mais atraentes. Vamos começar por adicionar um parágrafo apresentando cada página logo abaixo do elemento <h1> em cada elemento <section> com uma classe de row-alt. A nossa página speakers.html, por exemplo, agora pode incluir a seguinte seção principal:

<section class="row-alt">

<div class="container">

`<h1>Speakers</h1>`

`<p>We&#8217;re happy to welcome over twenty speakers to present on the industry&#8217;s latest technologies. 

Prepare for an inspiration extravaganza.</p>`

</div>

</section>

1. Além de inserir o parágrafo, altere também alguns dos estilos dentro da secção principal. Para fazer isso, vamos adicionar uma classe de liderança ao elemento <div> que já possui uma classe de contêiner; isso pode ser encontrado diretamente dentro do elemento <section> com uma classe de row-alt. A secção de liderança para cada página interior agora será assim:

<section class="row-alt">

<div class="lead container">

`...`

</div>

</section>

1. Uma vez que a classe principal está no lugar, vamos centrando o texto todo nesses elementos <div>. Também vamos aumentar o tamanho da fonte e a altura da linha de qualquer parágrafo desses elementos <div>.

Vamos criar uma nova secção para leads dentro do nosso arquivo main.css, logo abaixo da seção de tipografia e adicione os seguintes estilos:

/*

========================================

Leads

========================================

*/

.lead {

text-align: center;

}

.lead p {

font-size: 21px;

line-height: 33px;

}

As páginas internas do nosso site da Conferência Styles agora receberam algum amor há muito atrasado sob a forma de linhas de fundo gradiente e leads. Certifique-se de rever o código de todas as páginas internas para ver os conteúdos, cabeçalhos e parágrafos recém-aprimorados.

Usando várias imagens de fundo

Durante o maior tempo, os elementos foram autorizados a ter apenas uma imagem de plano de fundo por vez, o que criou algumas restrições ao projetar uma página. Felizmente, com CSS3, agora podemos usar mais de uma imagem de fundo num elemento separando vírgulas de vários valores de fundo dentro de uma propriedade de plano de fundo ou imagem de fundo.

O valor da imagem de fundo que vem primeiro será a imagem de fundo principal, e a imagem de fundo que está listada a última será a imagem de fundo mais avançada. Qualquer valor entre o primeiro e o último residirá no meio do terreno de acordo. Aqui está um exemplo do CSS para um elemento <div> que usa três imagens de fundo:

div {

background: url("foreground.png") 0 0 no-repeat, url("middle-ground.png") 0 0 no-repeat, url("background.png") 0 0 no-repeat;

}

O código anterior usa um valor abreviado para a propriedade de fundo, encadeando vários valores de imagem de fundo juntos. Estes valores abreviados também podem ser divididos em valores separados por vírgulas nas propriedades background-image, background-position e background-repeat.

Exemplo de múltiplas imagens de fundo

Voltemos à mensagem de alerta de sucesso mais uma vez para combinar a imagem de fundo do tic e a imagem de fundo de gradiente linear.

Para isso, vamos incluir dois valores na segunda propriedade de fundo. O primeiro valor, a imagem principal, será a imagem do tiquetaque. O segundo valor, a imagem mais recuada, será o gradiente linear. Os dois valores serão separados por vírgulas.

HTML

<div class="notice-success">

Woo hoo! Congratulations, you did it!

</div>

CSS

.notice-success {

background: #67b11c;

background: url("tick.png") 20px 50% no-repeat, linear-gradient(#72c41f, #5c9e19);

border: 2px solid #467813;

border-radius: 5px;

color: #fff;

font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

padding: 15px 20px 15px 50px;

}

Explorando novas propriedades de fundo

Junto com fundos gradientes e várias imagens em segundo plano, o CSS3 também introduziu três novas propriedades CSS: tamanho do fundo, clipe de fundo e origem em segundo plano.

A propriedade background-size permite-nos alterar o tamanho de uma imagem de fundo, enquanto as propriedades de fundo-clipe e origem de fundo nos permitem controlar onde uma imagem de fundo é cortada e onde uma imagem de fundo está contida dentro do elemento (dentro da borda ou dentro do preenchimento, por exemplo).

Tamanho do fundo CSS3

A propriedade background-size permite-nos especificar um tamanho para uma imagem de fundo. A propriedade aceita alguns valores diferentes, incluindo valores de comprimento e palavra-chave.

Ao usar valores de comprimento, podemos especificar uma largura e um valor de altura usando dois valores separados por espaço. O primeiro valor definirá a largura da imagem de fundo, enquanto o segundo valor ajustará a altura da imagem de fundo. É importante notar se os valores de percentagem estão em relação ao tamanho do elemento, e não ao tamanho original da imagem de fundo.

Consequentemente, definir uma propriedade de tamanho de fundo com uma largura de 100% fará com que a imagem de fundo ocupe toda a largura do elemento. Se um segundo valor não for identificado após a largura, o valor de altura será configurado automaticamente para preservar a relação de aspecto da imagem de fundo.

O valor da palavra-chave auto pode ser usado como o valor de largura ou altura para preservar a relação de aspecto da imagem de fundo. Por exemplo, se quisermos definir a altura da imagem de fundo para ser 75% da altura do elemento enquanto mantém a relação de aspecto da imagem, podemos usar um valor de propriedade tamanho real de auto 75%.

div {

background: url("shay.jpg") 0 0 no-repeat;

background-size: auto 75%;

border: 2px dashed #9799a7;

height: 240px;

width: 200px;

}

Cobrir & conter valores de palavras-chave

Além dos valores de propriedade de tamanho de comprimento, também há cobertura e contém valores de palavras-chave disponíveis para a propriedade de tamanho de fundo.

O valor da palavra-chave da capa especifica que a imagem de fundo será redimensionada para cobrir completamente a largura e a altura de um elemento. A relação de aspecto original da imagem de fundo será preservada, mas a imagem irá esticar ou encolher, conforme necessário, para cobrir todo o elemento. Muitas vezes, ao usar o valor da palavra-chave da capa, parte da imagem de fundo é cortada para que a imagem ocupe o espaço disponível completo do elemento.

O valor da palavra-chave contida, por outro lado, especifica que a imagem de fundo será redimensionada para residir inteiramente contida na largura e altura de um elemento. Ao fazê-lo, a relação de aspecto original da imagem de fundo será preservada, mas a imagem irá esticar ou encolher, conforme necessário, para permanecer dentro da largura e altura do elemento. Em contraste com o valor da palavra-chave da capa, o valor da palavra-chave contida mostrará sempre a imagem de fundo completa; no entanto, muitas vezes não ocupará o espaço disponível completo do elemento.

Tanto a capa como os valores de palavra-chave contidos podem resultar em imagens de fundo ligeiramente distorcidas, especialmente quando as imagens estão esticadas para além das suas dimensões originais. Queremos manter um olho para isso ao usar esses valores, para garantir que os estilos resultantes sejam satisfatórios.

Clip de fundo e Origem do fundo CSS3

A propriedade background-clip especifica a área de superfície que uma imagem de fundo irá cobrir e a propriedade de origem de fundo especifica onde a posição de fundo deve ser originada. A introdução destas duas novas propriedades corresponde à introdução de três novos valores de palavras-chave: caixa de borda, caixa de preenchimento e caixa de conteúdo. Cada um desses três valores pode ser usado para as propriedades de background-clip e origem de fundo.

div {

background: url("shay.jpg") 0 0 no-repeat;

background-clip: padding-box;

background-origin: border-box;

}

O valor da propriedade do background-clip é definido como caixa de borda por padrão, permitindo que uma imagem de fundo se estenda para a mesma área que qualquer borda. Enquanto isso, o valor da propriedade de origem de fundo é definido como caixa de preenchimento por padrão, permitindo que o início de uma imagem de fundo se prolongue no preenchimento de um elemento.

Resumo

A adição de origens e gradientes para sas páginas permite-nos trazer a cor à frente dos nossos projetos. Esses recursos também ajudam a definir como o conteúdo é agrupado e a melhorar o layout das nossas páginas como um todo.

Para rever, esta lição abrangeu o seguinte:

• Como adicionar cores de fundo e imagens a elementos

• Gradientes CSS, tanto lineares como radiais, e como personalizá-los

• Como aplicar várias imagens em segundo plano para um único elemento

• Novas propriedades CSS3 que nos permitem alterar o tamanho, área de superfície e origem das imagens de fundo

Adicionar cores de fundo, gradientes e imagens traz poucas possibilidades para aprimorar o design geral dos nossos sites. Em breve, vamos discutir como adicionar semanticamente imagens (além das imagens de fundo) e outras mídias para as páginas. Mas antes disso, vamos dar uma olhada em como criar semanticamente listas.