Explore novas ideias em termos de design e layout de sites

Com o forte suporte para CSS3 (Folhas de Estilos em Cascata, Nível 3) do Internet Explorer 10 e do Internet Explorer 9, você pode ter certeza de que o design do seu site "funciona simplesmente" em todos os navegadores mais comuns. Esta parte do Centro de Desenvolvimento do Windows Internet Explorer mostra um pouco do potencial gerado pelo suporte avançado ao padrão CSS (Folhas de Estilos em Cascata) para o design e o layout de conteúdo do seu site.Este tópico contém as seguintes seções:

Tópicos de instruções do Internet Explorer 10

Os tópicos a seguir destacam as novas funcionalidades CSS no Internet Explorer 10:

TópicoDescrição

Como impedir (ou permitir) a seleção de texto em sua página da Web usando o CSS

-ms-user-select é uma nova propriedade CSS que permite que desenvolvedores de aplicativos e da Web controlem onde os usuários podem selecionar texto nas páginas da Web ou nos aplicativos da Windows Store em JavaScript.

Como criar um layout adaptável com grade CSS

Aqui, orientamos você na criação de uma página simples tipo caixa de luz para visualização de fotos em uma galeria de fotos. Usamos o layout de grade para organizar o conteúdo da página e as consultas de mídia para otimizar o layout, possibilitando a visualização em uma orientação retrato ou paisagem.

Como trazer a sua página web para a vida com as transformações, transições e animações CSS

O Internet Explorer 10 (e os aplicativos da Windows Store em JavaScript) complementa o suporte a transformações CSS em 2D, apresentado no Internet Explorer 9, com o suporte a transformações CSS em 3D, transições CSS e animações CSS.

Como adicionar efeitos de texto divertidos usando CSS

O Internet Explorer 10 apresenta o suporte para sombras de texto aceleradas por hardware usando a propriedade text-shadow  CSS.

 

Tópicos de instruções do Internet Explorer 9

Os tópicos a seguir destacam os diversos recursos CSS apresentados no Internet Explorer 9:

TópicoDescrição

Adicione cantos arredondados com o CSS3

Usando o CSS3 para arredondar os cantos dos elementos de layout, você pode refinar a aparência do seu site. Aqui aprendemos algumas formas básicas de deixar o layout do seu site mais atraente usando o novo suporte interno a cantos arredondados do Internet Explorer 9.

Adicione sombras com o CSS3

Você pode adicionar sombras à parte externa ou interna dos elementos de layout usando o Internet Explorer 9 e o CSS3. As sombras até seguem as curvas dos cantos que você cria com o novo suporte a cantos arredondados do Internet Explorer 9.

Crie botões elegantes com o CSS3

Com o CSS3 e o Internet Explorer 9, você pode criar botões visualmente atraentes usando só um pouco de marcação. A seguir você aprenderá como transformar um simples hiperlink em um botão com estilo definido inteiramente pelo CSS.

Aprimore o design dos tipos do seu site com o CSS3

Este tópico mostra como incorporar novos recursos de Fontes CSS3 no seu site para que o design dos tipos seja enfatizado no Internet Explorer 9 e em outros navegadores modernos.

 

Guia do designer para os novos recursos CSS

Caso seja um designer da Web experiente, você sabe como pode ser frustrante quando navegadores diferentes oferecem níveis variados de suporte para os recursos de ponta que você quer usar. A Microsoft vem trabalhando muito com órgãos definidores de padrões e outros fornecedores de navegadores para reduzir essas disparidades. Nós fazemos parte do CSSWG (CSS Working Group) e sabemos que o entrosamento constante com o W3C (World Wide Web Consortium), com outros fornecedores de navegadores, com editores de especificações e com especialistas convidados da comunidade em geral é necessário para o avanço do estado da Web para todos os usuários.

Visando esse fim, nós adicionamos suporte a vários recursos do CSS3 no Internet Explorer 9 e ainda mais no Internet Explorer 10. A lista completa de novos recursos encontra-se no Guia para Desenvolvedores do Internet Explorer 10 e no Guia para Desenvolvedores do Internet Explorer 9.

Estes são alguns destaques do Internet Explorer 10:

Estes são alguns destaques do Internet Explorer 9:

Postagens do blog da equipe do Internet Explorer

O Blog do IE é sua linha direta com a equipe do Internet Explorer na Microsoft. Para ficar por dentro dos últimos desenvolvimentos em design e layout de conteúdo, veja as postagens marcadas com "CSS".

Eis algumas postagens recentes no blog que poderão ser úteis:

TítuloDescrição

Animações de página inteira usando CSS

O Internet Explorer 9 introduziu o suporte a transformações CSS  em 2D. O Internet Explorer 10 adicionou o suporte a transformações CSS em 3D  e a animações CSS.

Gradientes CSS3 não prefixados no IE10

O Internet Explorer 10 dá suporte à Recomendação Candidata do W3C para Gradientes CSS na forma não prefixada.

Transformações CSS3 em 3D no IE10

Os recursos CSS3 facilitam a criação de experiências atraentes e imersivas na Web.

Controle da seleção com CSS user-select

O Internet Explorer 10 inclui o suporte à nova propriedade CSS, -ms-user-select, que torna mais fácil para os desenvolvedores da Web controlarem exatamente qual texto pode ser selecionado em seus sites.

CSS Corner: usando toda a fonte

Com suporte entre navegadores para a regra @font-face do CSS3 e o formato de empacotamento de fontes WOFF (Web Open Font Format), a tipografia moderna da Web se expandiu muito além das "fontes seguras para a Web".

Adicionando personalidade com transições e animações CSS3

Avanços como JavaScript compilado de alto desempenho e renderização acelerada por hardware do HTML5 e do CSS3 no Internet Explorer 9 e no Internet Explorer 10 permitem que os desenvolvedores da Web criem experiências mais completas do que era possível anteriormente. Dois recursos relacionados, Transições CSS3 e Animações CSS3, oferecem aos desenvolvedores uma forma declarativa de conferir personalidade facilmente a interações de páginas da Web.

Criando páginas centradas em Rich Text no IE10

O Internet Explorer 10 introduz dois novos recursos de CSS projetados para facilitar a criação de aplicativos e páginas da Web centradas em rich text pelos desenvolvedores. As Regiões CSS3 proporcionam um mecanismo leve para fluir conteúdo por várias áreas não contíguas. O suporte do Internet Explorer 10 à Hifenização CSS3 fornece aos desenvolvedores um mecanismo simples para hifenizar texto em uma ampla gama de idiomas.

Sombra de texto CSS3 no IE10

O Internet Explorer 10 introduz o suporte à propriedade CSS3 acelerada por hardware text-shadow. A propriedade text-shadow é um dos principais recursos solicitados pelos desenvolvedores da Web. Ela habilita efeitos de texto que antes eram difíceis ou impossíveis de conseguir de forma compatível com os padrões sem precisar recorrer a imagens de texto embutidas.

Internet Explorer 10 e recursos CSS para layouts adaptáveis

O Internet Explorer 10 contém diversos novos recursos de CSS3 desenvolvidos como implementações de padrões da Web em evolução. Esta postagem examina três desses recursos de CSS— Layout de Grade CSS3, Layout de Caixa Flexível e Layout com Várias Colunas.

 

Galeria de Amostras do Internet Explorer

A Galeria de Amostras do Internet Explorer pode servir de inspiração para você implementar alguns dos novos recursos de design e layout do Internet Explorer.

Estão são apenas alguns exemplos:

ExemploDescrição

Caixa Flexível CSS

A Caixa Flexível CSS permite criar páginas da Web com elementos, controles, formulários, barras de ferramentas e menus que podem se redimensionar e reposicionar quando o usuário muda o tamanho da janela do navegador.

Layout com várias colunas CSS

Enquanto os jornais impressos estão cedendo espaço para as versões eletrônicas, a coluna está viva e bem online. Um layout com várias colunas CSS permite criar layouts de texto atraentes em diversas variações.

Sobreposição de Grade CSS

A Grade CSS permite criar páginas da Web com um layout em que os elementos se sobrepõem e respondem às mudanças no tamanho das janelas, sem requerer cálculos de pixels complicados.

Exclusões CSS

As Exclusões CSS permitem criar páginas da Web onde o texto e outros tipos de conteúdo podem ser dispostos ao redor de elementos específicos. Este exemplo mostra como usar exclusões para criar layouts complexos com elementos posicionados de forma absoluta em relação a um contêiner.

 

Demonstrações do Internet Explorer Test Drive

O Internet Explorer Test Drive é uma ótima maneira de explorar as possibilidades de design e apresentação de conteúdo no Internet Explorer 9 e no Internet Explorer 10. Para ver a lista completa de demonstrações disponíveis, consulte o mapa do site de test drives. Algumas das nossas demonstrações de CSS favoritas estão relacionadas aqui:

Outros recursos essenciais

 

 

Mostrar:
© 2014 Microsoft