Elfont css3 y transforma 3d

El impacto práctico de un par de características de CSS3 aún no está comprobado - El font

propiedad (que ha generado un gran zumbido) y un conjunto emergente de 3D transforma.

Si se aplica font para los tipos de letra personalizados, o transformadas en 3D, asegúrese de que su página funciona bien en ambientes de navegación que no soportan estos efectos. Y, no por eso se hace tan fácilmente con font o 3D transforma, es posible que desee esperar a ver cómo se desarrollan.

Elfont transformar en CSS3

El concepto detrás de font es que los desarrolladores pueden finalmente liberarse de las fuertes restricciones respecto a lo que las fuentes se pueden usar en páginas web mediante la subida de fuentes personalizadas que los usuarios luego descargar para ver en la página. Sin embargo, font es algo de un concepto erróneo, y en la medida que tiene potencial, la implementación no está en su lugar para que este accesible para la mayoría de los diseñadores web. Éstos son algunos de los problemas font viene con:

• Los sistemas operativos no tienen estas fuentes instaladas. Con una resolución (en puntos por pulgada) cerca de cuatro veces más grano (o menos densa) que la resolución de impresión, la web exige fuentes que son relativamente simples. Diseñadores creativos explotan herramientas CSS para micro-tuning altura de la fuente y el espaciamiento para crear tipo único e intrigante utilizando fuentes estándar que ya están instalados en la mayoría de las computadoras.

  En otras palabras, en muchos casos, los diseñadores pueden utilizar CSS para crear fuentes de mirada única sin recurrir a pedir a los usuarios descargar una fuente antes de una página se puede ver.

• Los visitantes tienen que descargar una fuente en su sistema operativo antes de aplica la fuente. Si lo hace, tiende a impulsar las advertencias en los navegadores y no requiere de un proceso que, en el tiempo y la complejidad, es más probable que conduzca a un visitante lejos de un sitio a hacer su experiencia de navegación más positivo.

• Fuentes personalizadas tienen que ser comprados. Licencias de uso legal de fuentes personalizadas implica contratos de licencia bastante complejas, y los costos comienzan a varios cientos de dólares (para utilizar una fuente personalizada en un solo sitio).

• Apoyo para font está emergiendo con mayor lentitud en los dispositivos móviles de lo que es para entornos de pantalla completa. El sistema operativo móvil más popular, Android, por ejemplo, adoptó el apoyo total para font en la versión 4, pero muchos teléfonos inteligentes aún ejecutarse en versiones de Android 2 y 3.

A veces, fuentes descargables pueden ser apropiados. Por ejemplo, si usted es Keith Richards de los Rolling Stones, se puede utilizar una fuente personalizada descargable. Pero si su entorno de navegación no puede manejar fuentes descargables, su equipo de desarrolladores ha creado guiones que detectan que su entorno de navegación no soporta la descarga de la fuente y el suministro de una imagen gráfica del tipo en su lugar.

Con todas esas precauciones, si desea instalar y aplicar fuentes personalizadas, siga estos pasos:

1. Compra un tipo de letra o encontrar uno libre en línea.

   Fuentes como Fonts.com proporcionan fuentes descargables, así como herramientas de instalación que ayudar a instalar, implementan y solucionar problemas de fuentes personalizadas descargables. En muchos casos, la " los pasos " podría terminar aquí - si se puede pasar en el rango de $ 500 por un conjunto de fuentes descargables (conjuntos incluyen opciones como cursiva, negrita, etc.), esto es probablemente una buena opción.

2. Instale la fuente.

   Si la fuente no vino con un paquete de instalación o las instrucciones, puede instalarlo guardando el archivo TTF o OTF a su carpeta de sitio web.

3. En la parte superior de su archivo CSS externo, agregue este código:

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

   xxx es el nombre que utilizará en estilos para asignar la fuente, y yyy es el nombre del archivo TTF (o OTF) para el tipo de fuente que ha descargado.

4. Con el código anterior en la parte superior de su archivo CSS, utilice el nombre de la fuente, como parte de las definiciones de estilo.

   Por ejemplo:

   h1 {font-family: Courier- yyy-}

   Courier es la fuente de copia de seguridad que aparecerá en los navegadores que no admitan la fuente descargable.

Transformaciones 3D

Transformaciones 3D pueden girar un objeto ya sea en el X-eje (horizontal) o y-eje (vertical). Debido a voltear un objeto horizontal o verticalmente tiene implicaciones de diseño muy limitadas, estas transformaciones están destinados a ser combinado con javascript o otras herramientas de animación e interactividad para hacer objetos voltear y girar.

Aún más limitante es el reducido ámbito de aplicación de la ayuda del navegador para transforma 3D. En este escrito, sólo se navegadores construido en el motor WebKit (Safari y algunas versiones de Chrome) soporte 3D transforma.

Con estas advertencias, he aquí un ejemplo de la aplicación de un giro de 180 vertical para un selector de clase (.rotate_3d):

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