Fronteiras têm sido uma parte de CSS desde o início, mas CSS3 acrescenta algumas novas opções realmente emocionantes. Os navegadores modernos suportam agora fronteiras feitas a partir de uma imagem, bem como cantos arredondados e caixa sombras. Estas técnicas prometem adicionar excitantes novos recursos para seus projetos.

Video: Curso HTML5 - Nav e Aside - Aula 8

bordas da imagem

CSS3 permite que você use uma imagem para uma fronteira elemento. O mecanismo é muito poderoso, porque ele detecta as bordas de uma imagem e “fatias”-lo para criar as bordas e cantos da fronteira a partir das bordas e cantos da imagem.

A imagem Frame é armazenado como frame.jpg no mesmo diretório que o arquivo HTML. Tem um centro transparente. Aplicar o seguinte código para adicionar uma borda da imagem em torno de todos os elementos da página:

 h2 {border-width: 15px; border-image: url ("frame.jpg") 25% repeat - webkit-border-image: url ("frame.jpg") 25% repeat - moz-border-image: url ("frame.jpg") 25% repetio}

Veja como você adicionar uma imagem de fronteira:

1. Adquirir sua imagem.

   A imagem já deve ser concebido como uma espécie de fronteira. Normalmente será uma forma em torno das arestas, quer com um centro de cor sólida ou um centro transparente.

2. Especificar a largura da borda.

   Você vai precisar para indicar a largura da borda diretamente. A borda da imagem quadro é redimensionada para caber o tamanho que você quiser.

3. Calcule quanto da borda da imagem que você deseja.

   Se você deixar de fora o sinal de porcentagem, o valor calcula em pixels. Você pode adicionar quatro valores, se você preferir usar quantidades diferentes da imagem original para cada limite.

4. Indicar o comportamento que você quer.

   A imagem original quase nunca é o mesmo tamanho que o elemento que você está querendo cercar, para que possa fornecer uma dica para explicar como o navegador deve lidar com elementos maiores do que o original. As escolhas mais comuns são repetir (Repetir a imagem original) ou esticam (Para ocupar todo o espaço). Com uma imagem simples como o frame.jpg usado neste exemplo, os resultados serão os mesmos.

   

Como adicionar cantos arredondados

CSS mais velho era conhecido por ser muito retangular, de modo web designers tentou suavizar seus projetos, adicionando cantos arredondados. Este foi um efeito difícil de alcançar. CSS3 simplifica grandemente a criação de cantos arredondados, com a fronteira-raio regra.

É muito fácil de obter cantos arredondados sobre os navegadores que suportam a tag:

Video: Protegendo a fronteira

Rodada Corners Demonstração

A regra funciona por cortar um arco de cada canto do elemento. O arco tem o raio especificado, portanto, para cantos afiados, você vai querer um pequeno raio. Você pode medir o raio em qualquer uma das medidas comuns, mas pixels (px) e largura de caracteres (em) são os mais comumente usados.

A fronteira não é visível a menos que o elemento tem o cor de fundo ou fronteira definiram. Note que existem variações de cada tag para apoiar cantos específicos. Isso pode ser útil se você não deseja aplicar o mesmo raio a todos os quatro cantos do seu elemento. Os navegadores mais recentes agora suportam o genérico fronteira-raio regra.

Você pode pegar um número de navegadores da geração anterior usando o prefixo específico do fornecedor. Se seu navegador não compreender a fronteira-raio regra, ele vai simplesmente criar os cantos quadrados ordinários.

Como adicionar uma sombra caixa

sombras caixa são muitas vezes adicionados a elementos para criar a ilusão de profundidade.

O efeito caixa de sombra não é difícil de conseguir, mas é normalmente feito como parte de uma definição de classe para que ele possa ser reutilizado em toda a página. Aqui está um código de exemplo:

Box Demonstração Sombra
Esta caixa tem uma sombra

Adicionando uma sombra caixa é muito mais fácil em CSS3 do que era antes. Aqui estão os passos:

1. Definir uma classe.

   Muitas vezes você vai querer aplicar as mesmas configurações a um número de elementos em uma página, de modo a sombra caixa é muitas vezes combinado com outros elementos como cor de fundo e fronteira em uma classe CSS que pode ser reutilizado em toda a página.

2. Adicione o caixa-sombra regra.

   Os navegadores mais recentes suportam o padrão caixa-sombra regra, mas você também pode querer incluir prefixos navegador para acomodar mais velho navega.

3. Especificar o deslocamento.

   A sombra é tipicamente compensados ​​a partir do retângulo a que pertence. Os dois primeiros valores indicam o deslocamento horizontal e vertical. Medida utilizando qualquer uma das medições padrão CSS (normalmente pixels ou Ems).

4. Determinar as distâncias borrão e se espalhar.

   Você pode modificar ainda mais o comportamento da sombra especificando a rapidez com que a sombra borra e quão longe ele se espalha. Estes são os parâmetros opcionais.

5. Indicar a cor da sombra.

   Você pode fazer a sombra de qualquer cor que desejar. Preto e cinza são comuns, mas você pode obter efeitos interessantes por escolher outras cores.

Muitos outros efeitos de sombra são possíveis. Você pode adicionar várias sombras, e você também pode usar o inserir palavra-chave para produzir uma sombra interior para torná-la como parte da página é cortada.