O @font css3 e transformações 3d

O impacto prático de um casal de recursos CSS3 ainda não está comprovada - o @Fonte

propriedade (o que tem gerado burburinho considerável) e um conjunto emergente de transformações 3D.

Video: CSS3 Flip 3D animation effect - Part 2 of 2

Se você aplicar @Fonte para fontes personalizadas, ou transformadas em 3D, certifique-se sua página funciona bem em ambientes de navegação que não suportam esses efeitos. E, não, porque isso é tão facilmente feito com @Fonte ou transformações 3D, você pode querer esperar e ver como elas se desenvolvem.

O @font transformar em CSS3

O conceito por trás @Fonte é que os desenvolvedores podem finalmente se libertar das restrições apertadas sobre o que as fontes podem ser usadas em páginas da web por meio do upload fontes personalizadas que os usuários depois baixar para ver na página. Contudo, @Fonte é algo de um conceito falho, e na medida em que tem potencial, a implementação não está no lugar para fazer este acessível para a maioria dos web designers. Aqui estão alguns dos problemas @Fonte vem com:

Video: How to Design 3d Fonts in CSS3 and Html5 - GoAllTechTips

• sistemas operacionais não têm essas fontes instaladas. Com uma resolução (em pontos por polegada) cerca de quatro vezes mais granulada (ou menos densa) do que a resolução de impressão, a web exige fontes que são relativamente simples. designers criativos explorar ferramentas CSS para micro-ajuste a altura da fonte e espaçamento para criar tipo único e intrigante usando fontes padrão que já estão instalados na maioria dos computadores.

  Em outras palavras, em muitos casos, os designers podem usar CSS para criar procurando fontes únicas, sem recorrer a pedindo aos usuários para transferir uma fonte antes de uma página pode ser visualizado.

• Os visitantes têm para transferir uma fonte em seu sistema operacional antes de a fonte se aplica. Fazer isso tende a levar advertências em navegadores e requer um processo que, com o tempo e complexidade, é mais provável para conduzir um visitante longe de um site do que fazê-la experiência de navegação mais positiva.

• fontes personalizadas têm de ser comprados. Licenciamento de uso legal de fontes personalizadas envolve contratos de licenciamento bastante complexas, e os custos começam a várias centenas de dólares (para usar uma fonte personalizada em um único site).

• Suporte para @Fonte está a emergir mais lentamente em dispositivos móveis do que é para ambientes de tela cheia. O sistema operacional móvel mais popular, Android, por exemplo, adotou suporte completo para @Fonte na versão 4, mas muitos smartphones continuam a correr em versões do Android 2 e 3.

Às vezes, fontes de disco podem ser apropriados. Por exemplo, se você é Keith Richards dos Rolling Stones, você pode usar um download fonte personalizada. Mas se o seu ambiente de navegação não pode lidar com tipos de letra transferíveis, sua equipe de desenvolvedores criou scripts que detectam que o seu ambiente de navegação não suporta o download da fonte e fornecer uma imagem gráfica do tipo em vez.

Video: 3d card flip animation - css tutorial - Pure Css Social Media Buttons - Plz SUBSCRIBE Us For More

Com todas essas precauções, se você deseja instalar e aplicar fontes personalizadas, siga estes passos:

Video: CSS3 3D Transform Tutorial: Transformation Of CSS Functions

1. Comprar uma fonte ou encontrar um livre online.

   fontes como Fonts.com fornecer fontes descarregáveis, bem como ferramentas de instalação que ajudar a instalar, implementar e solucionar problemas de fontes personalizadas para download. Em muitos casos, os “passos” pode acabar aqui - se você pode gastar na faixa de US $ 500 para um conjunto de fontes para download (conjuntos incluem opções como itálico, negrito, e assim por diante), esta é provavelmente uma boa opção.

2. 
   
   
   

   Instalar a fonte.

   Se a fonte não vem com um pacote de instalação ou instruções, você pode instalá-lo salvando o TTF ou arquivo OTF para a pasta site.

3. No topo do seu arquivo CSS externo, adicione este código:

   @ Font-face {font-family: xxx-src: url (yyy.ttf’) -}

   xxx é o nome que você vai usar em estilos para atribuir a fonte, e yyy é o nome do arquivo TTF (ou OTF) para o fontface você baixou.

4. Com o código anterior no topo do seu arquivo CSS, use o nome da fonte, como parte de definições de estilo.

   Por exemplo:

   h1 {font-family: Courier- yyy-}

   Courier é a fonte de backup que será exibido em navegadores que não suportam a sua fonte para download.

transformadas em 3D

transformações 3D pode rodar um objecto em ambos o X-eixo (horizontal) ou y-eixo (vertical). Porque lançando um objecto horizontalmente ou verticalmente tem implicações de design muito limitadas, estas transformações são destina-se a ser combinados com javascript ou outras ferramentas de animação e interactividade para fazer objectos virar e rotação.

Ainda mais limitante é o âmbito restrito de suporte ao navegador para 3D transforma. Até o presente momento, somente navegadores construído no motor WebKit (Safari e algumas versões do Chrome) suporte 3D transforma.

Com essas ressalvas, aqui está um exemplo de aplicação de uma rotação de 180 vertical para um seletor de classe (.rotate_3d):

.rotate_3d {transform: rotateY (180 °) - webkit-transform: rotateY (180 °) -}