5 novas tecnologias CSS3 que você deve conhecer

CSS é uma linguagem de estilo de site bem conhecida e amplamente utilizada. Em seu plano de versão 3 (CSS3), foram adicionados alguns novos recursos que podem economizar tempo. Embora esses efeitos sejam suportados apenas pelas versões mais recentes dos navegadores, ainda é necessário e interessante conhecê-los. Bao Fengbinbin mostrará 5 novas tecnologias interessantes em CSS neste artigo: cantos arredondados, cantos arredondados individuais, opacidade, sombra e elementos de redimensionamento.

1: Marca básica

Antes de iniciarmos este tutorial, vamos criar a marcação básica que será usada ao longo do tutorial.

Nosso xHTML requer os seguintes elementos div:

#round, usa código CSS3 para obter cantos arredondados.

#indie, aplique alguns filetes individuais.

#opacity, demonstra a nova maneira CSS3 de implementar a opacidade.

#shadow, mostra como usar CSS3 para obter efeito de sombra sem usar o Photoshop.

#resize, mostra como usar CSS para obter um efeito de redimensionamento.

Resumindo, nosso xHTML deve ficar assim:

A seguir está o conteúdo citado: ​​

Vamos criar o arquivo CSS básico:

Como você pode ver acima, demos a cada elemento div uma largura e altura de 300px e os deixamos flutuar para a esquerda, deixando os divs da página inteiros para estilizarmos mais tarde.

2: cantos arredondados

Atualmente, existem muitas maneiras de criar filetes, mas todas são complicadas. O método mais comum: primeiro você tem que criar uma imagem com cantos arredondados; depois, você tem que criar vários elementos html e usar uma imagem de fundo para exibir os cantos arredondados; Você e eu conhecemos muito bem o processo específico.

Este problema será facilmente resolvido em CSS3 com uma propriedade chamada "border-radius". Primeiro criamos um elemento div preto e definimos uma borda preta para ele. A fronteira é o pré-requisito para alcançar o efeito do atributo “border-radius”.

Assim:

Agora que você criou o elemento div, ele tem a aparência esperada, 300px de altura, angular e preto. Agora vamos adicionar o código para implementar cantos arredondados. É muito simples e requer apenas duas linhas de código.

Aqui, adicionamos duas linhas de código semelhantes, -moz- para o navegador Firefox e -webkit- para o navegador Safari/Chrome.

Nota: Até agora, o navegador IE não suporta o atributo border-radius, portanto, se quiser que o IE tenha um efeito de canto arredondado, você precisa adicionar cantos arredondados separadamente.

A tradução literal da propriedade border-radius é o raio da borda. Assim como no Photoshop, quanto maior for o seu valor, maiores serão os cantos arredondados.

3: Cantos arredondados individuais

Se você seguir os hábitos anteriores, vai perder muito tempo. Agora o CSS3 pode resolver isso rapidamente!

Agora queremos apenas que os cantos superior direito e inferior direito da div sejam arredondados, então só precisamos fazer pequenas modificações:

Imagine para quais elementos da página da web essa abordagem seria usada? Sim, é o botão de navegação com guias!

4: Modifique a opacidade usando CSS3

Agora você pode escrever convencionalmente algumas linhas de código para implementar o efeito de opacidade (hack). No entanto, CSS3 simplifica esse processo.

Esta linha de código é fácil de lembrar, apenas "opacity: value;":

5: Efeito sombra

Existem muitas maneiras de obter sombras. A mais comum é usar o Photoshop para criar uma imagem de sombra e depois aplicá-la às propriedades de fundo. Mas CSS3 torna seu trabalho mais eficiente. Infelizmente, apenas o Safari e o Chrome oferecem suporte a esse novo recurso.

Requer apenas uma linha de código, mas possui 4 valores diferentes:

Deixe-me explicar o que esses quatro valores representam. O primeiro 3px é a distância horizontal (horizontal) entre a sombra especificada e o elemento div, e o segundo 5px refere-se à distância vertical (vertical) entre a sombra e o div. o terceiro 10px refere-se ao desfoque da sombra (semelhante ao enevoamento do Photoshop), quanto maior o valor, mais delicado ele é. Todo mundo sabe que o valor final é a cor da sombra.

Nosso código final de efeito de sombra;

Como você pode ver, nossa div tem fundo branco, borda preta e sombra cinza claro.

6: Redimensionar

Na versão mais recente do CSS, é possível redimensionar elementos (mas atualmente suportado apenas pelo Safari)

Após utilizar este código, um pequeno triângulo aparecerá no canto inferior direito do nosso elemento para lembrar ao usuário que este elemento pode ser redimensionado. O código ainda é muito simples, pode-se dizer que requer apenas uma linha de código. Claro, você também pode usar algumas propriedades que já usou antes, como "largura máxima", "altura máxima", ". largura mínima" e "altura mínima".

Aqui falamos principalmente sobre os atributos resize e overflow: ambos significam que todos os lados podem ser redimensionados. Overflow serve para trabalhar com redimensionamento, então auto é usado aqui.

Resumir

Então, você ganhou alguma coisa com este artigo? Embora apenas alguns navegadores agora suportem CSS3, é inegável que CSS3 realmente economizará mais tempo em nosso trabalho. Se você tem algum conhecimento e compreensão sobre aprimoramento progressivo, acho que aceitará prontamente esta nova e poderosa versão do CSS3. Não gaste todo o seu tempo no IE6, caso contrário você será apenas um engenheiro de desenvolvimento front-end desatualizado.