Archivo de la categoría: CSS3

Decora tu web con tipografías personalizadas gracias a Google fonts

Google Web FontsComo el título indica, dedico la entrada al maravilloso servicio Google Web Fonts del monopolista gigante empresarial Google, otro más de los que ofrece de manera libre y gratuita, gracias al cual podremos elegir una tipografía («fuente» para los amigos y amigas de Microsoft) dentro de su muy amplio abanico de posibilidades, para después utilizarla en nuestra página web sin necesidad de recurrir a «trucos CSS» ni alojando la tipo en nuestro servidor.

Para elegir seleccionamos la familia tipográfica, introducimos un texto modelo para visualizar el resultado y vamos escarbando en el listado. La aplicación nos permite trastear con determinados estilos, ver si dispone de tildes o ver cómo resultaría en un párrafo de texto corrido, incluso podremos seleccionar varias para comparar su uso.

¿Cómo incluyo las tipografías en mi web?

Google web fontsPara poder utilizar las fuentes a penas hacen falta unas nociones muy básicas de web. Cuando hemos seleccionado la o las tipografías que nos gusten, nos dará tres opciones:

  1. una simple línea de HTML con la etiqueta LINK para incluir en el HEAD
  2. un @import para incluir en nuestra hoja de estilos CSS
  3. un código JavaScript (viene con las etiquetas <script> para meter en el HEAD, pero puede apartarse a un .JS)

Mi consejo es utilizar la primera opción y no complicarnos la vida.

Como nuestra web ya tendrá localizado el elemento correspondiente a nuestra tipo de Google APIs, solo nos quedará asignar el estilo correspondiente a aquellos elementos que deseamos que aparezcan con la tipografía pertinente. Por ejemplo, si queremos que los títulos H1 tenga nuestra tipo escribiremos lo siguiente en nuestro CSS:

h1 {font-family: 'nuestratipo', sans-serif;}

Este código también nos lo facilitará Google, después lo aplicaremos al gusto.

Ventajas

page load

  1. Primero y ante la principal desventaja, que es lo que pueda tardar en cargar desde Google APIs mientras se carga nuestra web, la propia aplicación incluye un pequeño reloj que nos indica la repercusión que tendrá en la velocidad de carga
  2. Ahorraremos dolores de cabeza a la hora de incluir tipografías completas, antes era más caótico
  3. Es más cómodo para el cross-browser, solo deja de funcionar en navegadores desactualizados
  4. Evitaremos convertir textos en imágenes para subir títulos, mejorando la velocidad de carga, el SEO y ahorrándonos esfuerzo
  5. No ocupa espacio adicional en nuestro servidor (y el de Google no se cae (o sí, pero menos que el nuestro) y tiene un ancho de banda buenísimo)
  6. La exclusividad que supone tener elementos poco convencionales en nuestro espacio web

Estamos en Julio de 2012, seguro que el servicio sigue madurando (y como nos descuidemos lo integran en Google+), así que como última ventaja añadir que está en continuo desarrollo, cada vez hay más tipografías y mejor experiencia de usuario.

9 motivos para no utilizar Internet Explorer

No a Internet ExplorerLa cruzada que tenemos los diseñadores y desarrolladores web contra Internet Explorer no viene de una manía irracional, sino que está basada en decenas de malas experiencias que después el usuario no ve, pero que también sufre.

Voy a exponer algunos de los motivos principales por los que el usuario común de internet no debería utilizar Microsoft Internet Explorer:

  1. Existen mejores opciones, gratis, fáciles de instalar y que ocupan muy poca memoria, como Google Chrome, Mozilla Firefox Opera, incluso Safari, el navegaor de Apple. Todas son mejores, mucho más valoradas, más ágiles, ocupan menos.
  2. Cada actualización es un producto ya obsoleto, tratando de imitar las mejoras de sus competidores, arriba enumerados. Nunca innova, siempre llega tarde.
  3. Sus plugins también nacen obsoletos o son incómodos, bien para intentar emular las características de las que carece respecto a otros navegadores, o bien son molestas barras de herramientas de publicidad.
  4. Es tremendamente lento, al menos considerablemente más que los demás.
  5. No soporta debidamente HTML5, retrasando el progreso en desarrollo web.
  6. No soporta debidamente CSS3, retrasando el progreso en desarrollo web, de nuevo.
  7. No es software libre
  8. Limita su uso a usuarios actualizados en su sistema operativo. En caso de utilizar, por ejemplo, Windows XP, no podrás actualizar Internet Explorer a nuevas versiones.
  9. Las personas que nos dedicamos a esto por profesión no se lo recomendaríamos ni a nuestros enemigos. Si confías en profesionales, rechaza Internet Explorer.

¡Felices fiestas!

Os dejo con un jQuery de copitos de nieve con un poco de CSS3 de texto sombreado e imagen con efecto fotografía, y así de paso, felicito las fiestas. Recordamos que si no ves la felicitación correctamente, es porque utilizas un navegador bochornosamente anticuado. Más adelante, tutorial y descarga:

Generador de degradados automático (background gradient) para CSS3

gradient ColorzillaEsta mañana se ha actualizado en Firefox el plugin Colorzilla, que permite identificar el código hexadecimal de cualquier color (p.e.: #09cf88) con solo un clics.

Para sorpresa mía, tras finalizar ofrecen un enlace a un generador de código CSS3 para degradados, tal y como ellos dicen, con interfaz visual estilo Photoshop:

De manera intuitiva y visual podremos generar un degradado eligiendo los colores que deseemos, tantos como queramos y en la posición que queramos, además podremos adaptarlos al ancho que ocuparán en nuestra web, etc.

El último paso será copiar el código que nos genera dentro de los atributos del elemento al que queramos dar ese degradado como background en nuestra plantilla CSS. Como podemos ver, la compatibilidad cross-browser está muy cuidada, sin excluir versiones ya obsoletas de navegadores anticuados.

Excelente guía CSS3 + HTML en inglés

Esta misma mañana he encontrado en la red una web donde aparecen todos los atributos posibles de CSS3. El manejo es realmente sencillo, tiene un buscador en la columna de la izquierda que, conforme escribes, limita los resultados de dicha columna.

Cuando hacemos clic en cualquiera de los atributos veremos un resumen, la sintaxis, los valores, algunos ejemplos, especificaciones y sobretodo y más importante de esta web, muestra enlaces de ayuda adicional e indica la compatibilidad entre navegadores (cross browsing). Por ejemplo, el text-shadow que utilizan algunos titulares de esta web, no se mostraría en Internet Explorer u Ópera, mientras que en Safari, Chrome y Firefox se ve correctamente,

Además dicha web-guía incluye también un listado de HTML. Ahí dejo el enlace para que lo podáis añadir a vuestros marcadores/favoritos: