CSS 3 + HTML 5 são o futuro da Web. Eles ainda não chegaram oficialmente, embora muitos navegadores tenham começado a fornecer suporte parcial para eles. Este artigo apresenta 5 técnicas CSS3 que podem ajudá-lo a alcançar o futuro da Web. Atualmente essas técnicas não devem ser usadas em projetos formais de clientes; elas são mais adequadas para o seu blog pessoal, para a comunidade de web design ou para situações onde você não terá clientes reclamando com você.
1. Efeito de cantos arredondados
Um dos novos recursos mais comumente usados do CSS3 é o efeito de canto arredondado. O objeto quadrado HTML padrão tem cantos quadrados de 90 graus que podem ajudá-lo a obter cantos arredondados.
-moz-border-radius: 20px;
-webkit
-border-radius: 20px;
border-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border
-radius-
topright: 20px
; -moz-border-radius-bottomleft: 10px;
-rightright-radius: 20px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 10px
; -webkit-border-bottom-rightright-radius: 10px
; Firefox, Safari, Chrome
2. Bordas gráficas
Como o nome sugere, a borda gráfica é a borda que permite o uso de imagens como objetos. A sintaxe é a seguinte:
border: 5px solid #cccccc
: url(/images/border-image.png; ) 5 repetir;
-moz-border- image: url(/images/border-image.png) 5 repetir;
border-image: url(/images/border-image.png) 5 repetir
Aqui, border: 5px define o largura da borda e, em seguida, cada A definição da imagem da borda informa ao navegador quanto da imagem usar como borda. A imagem da borda também pode ser definida individualmente para cada borda:
border-bottom-rightright-image
border-bottom-image
border-bottom-left-image
border-left-image
border-top-left-image
border-top-image
border- top -rightright-image
border-right-image
navegadores suportados: Firefox 3.1, Safari, Chrome
3. Bloquear sombra e sombra de texto
.
Os efeitos de sombra já foram algo que os web designers amavam e odiavam. Agora, com CSS3, você não precisa mais do Photoshop. Já existem sites que usam esse recurso, como o site 24 Ways
-webkit-box-shadow: 10px 10px 25px.
-moz-box-shadow: 10px 10px 25px #ccc;
box-shadow: 10px 10px 25px #ccc;
As duas primeiras propriedades definem o deslocamento X/Y da sombra, aqui são 10px, e a terceira propriedade define o desfoque da sombra; o Grau da sombra, o último define a cor da sombra. A sombra do texto também pode ser definida assim:
text-shadow: 2px 2px 5px #ccc;
Navegadores suportados: Firefox 3.1, Safari, Chrome (suporta apenas sombra de caixa), Opera (suporta apenas sombra de texto). verde O último valor das três cores azuis representa a transparência. Além disso, também podemos usar a opacidade para obter transparência (atualmente, esta técnica é usada principalmente para efeitos de caixa de luz - Tradutor)
4. Use RGBA para obter efeitos de transparência.
Atualmente, o efeito de transparência no web design é obtido principalmente por imagens PNG (mas não é bem suportado no navegador IE - tradutor. No CSS3, o efeito de transparência pode ser alcançado diretamente).
rgba (200, 54, 54, 0,5);
fundo: rgba (200, 54, 54, 0,5); cor
:
rgba
(200, 54, 54, 0,5)
;
, Safari, Chrome, Opera (opacidade) e IE7 (opacidade, com correções).
5. Use @Font-Face para implementar fontes personalizadas
.Existem várias fontes que são relativamente seguras em web design, como Arial, Helvetica, Verdana, Georgia e Comic Sans (chinês, em geral, Song Dynasty é o único seguro - tradutor agora, usando @font-face do CSS3). posso especificar as fontes sozinho, mas devido a questões de direitos autorais, as fontes reais que podem ser usadas são limitadas (além disso, as enormes fontes chinesas também são um problema difícil de resolver - tradutor).
A sintaxe é a seguinte:
@font-face {
font-family:'Anivers';
url('/images/Anivers.otf') format('opentype'
}
Navegadores suportados: Firefox 3.1, Safari, Opera 10)
;e IE7 (é preciso alguns problemas, se você não tem medo de problemas, você pode implementar esta função no IE, consulte: fazer o font-face funcionar no IE)
Embora o CSS3 ainda esteja em desenvolvimento, essas funções mencionadas acima já estão disponíveis em alguns navegadores usados, especialmente Safari. Infelizmente, o Safari não é um navegador convencional.
O Firefox atualmente tem uma grande base de usuários. Além disso, o próximo Firefox 3.1 suporta muitos efeitos CSS3. Como os usuários do Firefox estão altamente motivados para atualizar, muitos usuários podem experimentar os novos recursos do CSS3 com antecedência.
O Google Chrome foi lançado este ano e é baseado no mecanismo Webkit, por isso é muito semelhante ao Safari. Como o Safari é usado principalmente no mercado Mac, o Chrome pode simplesmente preencher a lacuna no mercado Windows.
Segundo as estatísticas, em novembro de 2008, 44,2% dos usuários usavam Firefox, 3,1% usavam Chrome e 2,7% usavam Safari, o que significa que algumas funções do CSS3 já podem suportar quase metade dos usuários da Internet. proporção pode ser maior, cerca de 73,6% (dados fornecidos pelo Blog.SpoonGraphics)
6. Fatores negativos
Os recursos CSS3 descritos acima trarão excelentes resultados para o seu site, mas ainda existem alguns fatores negativos que devem ser considerados:
Internet Explorer: 46% de a Internet não consegue ver esses efeitos, então não use essas coisas para projetos importantes. Certifique-se também de que, quando estes efeitos não funcionarem, estejam disponíveis designs alternativos.
Problemas de validação de CSS: esses recursos CSS3 não são a versão final. Atualmente, diferentes navegadores usam tags diferentes para implementar esses recursos, o que pode causar problemas de validação para sua folha de estilos.
Código inchado: como navegadores diferentes usam sintaxe de definição diferente, seu código CSS acabará ficando muito inchado.
Uso indevido: O uso indevido desses efeitos pode trazer algumas consequências adversas, principalmente para efeitos de sombra.
Fonte internacional deste artigo: http://www.smashingmagazine.com/2009/01/08/push-your-web-design-into-the-future-with-css3/
Fonte de tradução chinesa: Site oficial do COMSHARP CMS (35km tradução )