unijimpe » CSS http://blog.unijimpe.net Desarrollo Web, SEO, Adsense Mon, 28 Nov 2011 03:18:21 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Como utilizar Transiciones con CSShttp://blog.unijimpe.net/como-utilizar-transiciones-con-css/ http://blog.unijimpe.net/como-utilizar-transiciones-con-css/#comments Sun, 06 Nov 2011 22:15:53 +0000 unijimpe http://blog.unijimpe.net/?p=1303 Las Transiciones con CSS o CSS Transitions permiten realizar cambios en los valores de una propiedad durante un determinado tiempo de manera progresiva, esto permite realizar transiciones en las propiedades de un elemento eliminando la necesidad …

]]> Las Transiciones con CSS o CSS Transitions permiten realizar cambios en los valores de una propiedad durante un determinado tiempo de manera progresiva, esto permite realizar transiciones en las propiedades de un elemento eliminando la necesidad de utilizar Javascript y obteniendo efectos interesantes.

Sintaxis de las Transiciones con CSS

En la especificación del CSS3 se introduce la nueva propiedad transition la cual permite especificar las transiciones con CSS, la sintaxis básica es:

  1. .style {
  2.    transition: property time easing;
  3. }

Donde se tiene:

  • property: propiedad a aplicar la transición (color, width, etc).
  • time: tiempo de duración expresado en segundos de la transición.
  • easing: tipo de aceleración de la animación (ease, linear, ease-in, ease-out, ease-in-out).

Obviamente este código solo funciona en navegadores que tienen implementada la especificación CSS3, entonces para que los navegadores actuales puedan interpretarlo hace falta agregar líneas especificas de acuerdo a cada navegador.

  1. .style {
  2.     -webkit-transition: property time easing; /* Safari 3.2+, Chrome */
  3.     -moz-transition: property time easing;    /* Firefox 4.0+ */ 
  4.     -o-transition: property time easing;      /* Opera 10.5+ */
  5.     transition: property time easing;
  6. }

Esto garantiza que las transiciones se verán correctamente en Chrome, Safari 3.2+, Firefox 4.0+ y Opera 10.5+. En los otros casos (incluyendo Internet Explorer) no se verá la transición solo se verá un cambio brusco entre uno y otro estado.

Ejemplo básico de Uso

Una vez que conocemos la sintaxis, veamos un ejemplo en el cual al pasar el mouse sobre un enlace cambiaremos el color del enlace pero con una pequeña transición del color.

Para comenzar el rollover de un enlace se hace mediante:

  1. a {
  2.     color: #06C;
  3. }
  4. a:hover {
  5.     color: #C00;
  6. }

Luego aplicamos la transición al color durante 0.35 segundos, con lo cual tendríamos:

  1. a {
  2.     color: #06C;   
  3.     -webkit-transition: color .35s ease-out; 
  4.     -moz-transition: color .35s ease-out; 
  5.     -o-transition: color .35s ease-out;
  6.     transition: color .35s ease-out;
  7. }
  8. a:hover {
  9.     color: #C00;
  10.     -webkit-transition: color .35s ease-in; 
  11.     -moz-transition: color .35s ease-in; 
  12.     -o-transition: color .35s ease-in;
  13.     transition: color .35s ease-in;
  14. }

Como se aprecia hemos aplicado la transición sobre la propiedad color el cual durará 0.35 segundos, además hemos aplicado la transición cuando el mouse pasa sobre el enlace y cuando sale del mismo.

Ejemplo de Menú con CSS Transitions

Como segundo ejemplo crearemos un menú de navegación, en el cual cuando el cursor pasa sobre el elemento cambiaremos el color y el ancho del fondo con lo cual obtendremos un resultado interesante. Para ello primero creamos el código HTML para los elementos del menú.

  1. <ul class="menu">
  2.     <li>Home</li>
  3.     <li>Productos</li>
  4.     <li>Ofertas</a></li>
  5.     <li>Contactenos</a></li>
  6. </ul>

Luego, creamos la hoja de estilos en el cual definimos primero las propiedades del elemento de menú y también las propiedades del elemento esta en rollover.

  1. .menu li {
  2.     list-style: none;
  3.     padding: 0 0 0 10px;
  4.     width: 200px;
  5.     color: #fff;
  6.     background: #6CF;
  7.    
  8.     -webkit-transition: all .35s ease-in; 
  9.     -moz-transition: all .35s ease-in; 
  10.     -o-transition: all .35s ease-in;
  11.     transition: all .35s ease-in;
  12. }
  13. .menu li:hover {
  14.     background: #06F;
  15.     width: 220px;
  16.    
  17.     -webkit-transition: all .35s ease-out; 
  18.     -moz-transition: all .35s ease-out; 
  19.     -o-transition: all .35s ease-out;
  20.     transition: all .35s ease-out;
  21. }

Notese que hemos utilizado all como propiedad, lo cual indica que se debe hacer la transición sobre todos las propiedades del elemento. Pueden ver el ejemplo funcionando en CSS Transitions Demo.

Ahora solo queda a la creatividad para lograr efectos destacables, por ejemplo en Original Hover Effects with CSS3 pueden ver una lista de ejemplos muy vistosos de rollover utilizando CSS Transitions.

Mas Información

© 2006 - 2011 unijimpe - Utiliza este feed solo para uso personal, partes de este feed pueden ser utilizados mencionando al autor, no esta permitido publicar enteramente este feed para uso comercial sin permiso del autor.


]]> http://blog.unijimpe.net/como-utilizar-transiciones-con-css/feed/ 4 Inserta cualquier tipografía en tu web con @font-facehttp://blog.unijimpe.net/inserta-cualquier-tipografia-en-tu-web-con-font-face/ http://blog.unijimpe.net/inserta-cualquier-tipografia-en-tu-web-con-font-face/#comments Wed, 02 Nov 2011 04:10:34 +0000 unijimpe http://blog.unijimpe.net/?p=1300 @font-face es un propiedad de CSS disponible desde CSS2 y que la han incorporado los navegadores actuales (Firefox 3.5, Firefox 3.5, Chrome 4.0, Internet Explorer 5, Safari 3.1, Opera 10…

]]> @font-face es un propiedad de CSS disponible desde CSS2 y que la han incorporado los navegadores actuales (Firefox 3.5, Firefox 3.5, Chrome 4.0, Internet Explorer 5, Safari 3.1, Opera 10). De esta forma ya no estaremos restringidos a utilizar las fuentes clásicas en nuestras páginas y tampoco hace falta utilizar librerías javascript, flash o imágenes para obtener los mismos resultados.

Sintaxis Básica

El uso de esta propiedad es sencilla, para ello hay que definir un nombre y la ruta donde se encuentra el archivo de la fuente. Por ejemplo en el siguiente código vamos a utilizar la fuente helveticaneue_light.ttf la cual está ubicada en la carpeta fonts y que la nombramos como "HelveticaNeueLight" para utilizarlo posteriormente.

  1. @font-face {
  2.     font-family: 'HelveticaNeueLight';
  3.     src: url('fonts/helveticaneue_light.ttf') format("truetype");
  4.     font-style: normal;
  5.     font-weight: normal;
  6. }

Luego para utilizar esta fuente recién declarado lo hacemos mediante la propiedad font-family en donde le pasamos el nombre que hemos definido anteriormente.

  1. h3 {
  2.     font-family: 'HelveticaNeueLight';
  3.     font-size: 18px;
  4.     color: #F36;
  5. }

Sintaxis Completa

Lamentablemente no todos los navegadores aceptan el mismo formato de archivo para las fuentes, por ello existe una sintaxis mas compleja la cual asegura mayor compatibilidad con los navegadores. En donde se requiere tener las fuentes en diferentes formatos: .eot, .woff, .ttf y .svg.

  1. @font-face {
  2.     font-family: 'HelveticaNeueLight';
  3.     src: url('../fonts/helveticaneue_light.eot');
  4.     src: url('../fonts/helveticaneue_light.eot?#iefix') format('embedded-opentype'),
  5.          url('../fonts/helveticaneue_light.woff') format('woff'),
  6.          url('../fonts/helveticaneue_light.ttf') format('truetype'),
  7.          url('../fonts/helveticaneue_light.svg#HelveticaNeueLight') format('svg');
  8.     font-weight: normal;
  9.     font-style: normal;
  10. }

Como convertir las fuentes

Si no tenemos las fuentes en todos los formatos antes mencionados, existe un servicio gratuito @font-face Generator que permite hacer la conversión a todos los formatos necesarios para la máxima compatibilidad.

Seleccionan la fuente y esta devolverá un archivo zip que contiene las fuentes en los formatos necesarios así como el código CSS necesario para colocarlo en nuestra hoja de estilos.

Como obtener las fuentes

La mayoría de las fuentes tienes derechos de autor asi que no las podremos utilizar a menos que tengamos la licencia de uso. Pero también existen fuentes gratuitas, para descargar estas fuentes existen dos páginas con gran variedad de tipografías.

Para finalizar les dejo los archivos fuente con un ejemplo de uso de fuentes utilizando @font-face.

Mas Información

© 2006 - 2011 unijimpe - Utiliza este feed solo para uso personal, partes de este feed pueden ser utilizados mencionando al autor, no esta permitido publicar enteramente este feed para uso comercial sin permiso del autor.


]]> http://blog.unijimpe.net/inserta-cualquier-tipografia-en-tu-web-con-font-face/feed/ 3 Controlar el redimensionado de textarea con CSShttp://blog.unijimpe.net/controlar-el-redimensionado-de-textarea-con-css/ http://blog.unijimpe.net/controlar-el-redimensionado-de-textarea-con-css/#comments Mon, 26 Sep 2011 03:19:38 +0000 unijimpe http://blog.unijimpe.net/?p=1292 Los navegadores actuales (Safari, Chrome, Firefox) están implementando nuevas funcionalidades para facilitar al usuario la interacción con el contenido. Una de estas características es la habilidad de redimensionar de los áreas de texto o textarea. …

]]> Los navegadores actuales (Safari, Chrome, Firefox) están implementando nuevas funcionalidades para facilitar al usuario la interacción con el contenido. Una de estas características es la habilidad de redimensionar de los áreas de texto o textarea. Ahora veremos como controlar estar características utilizando CSS.

CSS para controlar el redimensionado

El control del redimensionado de los textarea se puede hacer utilizando la propiedad CSS3 llamada resize la cual tiene las siguientes opciones: both, none, vertical, horizontal.

  1. textarea { resize:both; } /* reescalado horizontal y vertical */
  2. textarea { resize:none; } /* desactiva el reescalado */
  3. textarea { resize:vertical; } /* reescalado solo vertical */
  4. textarea { resize:horizontal; } /* reescaldo solo horizontal */

Adicionalmente se podría limitar las dimensiones del reescalado utilizando las propiedades: max-width, min-width, max-height y min-width.

Por ejemplo si deseamos que nuestro campo de texto solo se pueda redimensionar la altura y con un mínimo de 60px y un máximo de 300px de alto.

  1. textarea {
  2.    resize: vertical;
  3.    min-height: 60px;
  4.    max-height: 300px;
  5. }

Esta propiedad esta disponible en las ultimas versiones de Safari, Chrome y Firefox.

© 2006 - 2011 unijimpe - Utiliza este feed solo para uso personal, partes de este feed pueden ser utilizados mencionando al autor, no esta permitido publicar enteramente este feed para uso comercial sin permiso del autor.


]]> http://blog.unijimpe.net/controlar-el-redimensionado-de-textarea-con-css/feed/ 1 Smaller: Interfaz Gráfica para YUI Compressor en MAChttp://blog.unijimpe.net/smaller-interfaz-grafica-para-yui-compressor-en-mac/ http://blog.unijimpe.net/smaller-interfaz-grafica-para-yui-compressor-en-mac/#comments Wed, 22 Jun 2011 04:57:46 +0000 unijimpe http://blog.unijimpe.net/?p=1277 Smaller es una interfaz gráfica para YUI Compressor en Mac, con esta herramienta podremos minificar múltiples archivos Javascript y CSS sin necesidad de utilizar línea de comandos. Es ideal para diseñadores que no necesitan aprender línea …

]]> Smaller es una interfaz gráfica para YUI Compressor en Mac, con esta herramienta podremos minificar múltiples archivos Javascript y CSS sin necesidad de utilizar línea de comandos. Es ideal para diseñadores que no necesitan aprender línea de comandos para minificar los archivos.

YUI Compressor

YUI Compressor el una herramienta desarrollada en Java que permite minificar (Elimina espacios en blanco, saltos de linea, reemplaza los nombres de variables por otras mas cortas) archivos Javascript y CSS para de esta forma acelerar la carga de nuestras páginas. Para comprimir o minificar un archivo con YUI Compressor se utiliza la siguiente sintaxis en linea de comandos:

  1. java -jar yuicompressor-2.1.1.jar myfile.js -o myfile-min.js

En donde myfile.js es el archivo que deseamos comprimir. De forma semejante se puede minificar archivos CSS.

Smaller

Si eres diseñador y te es complicado aprender la sintaxis en línea de comandos o deseas acelerar el proceso de minificar archivos, entonces Smaller te sacará de apuros pues es una interfaz gráfica para utilizar YUI Compressor en MAC. Con Smaller puedes arrastrar directamente los archivos hasta la ventana de Smaller y minificarlos rápidamente.

Puedes arrastrar varios archivos a la vez o incluso carpetas completas, además de ello tiene un panel de configuración para controlar al detalle el proceso de minificar archivos. En mi caso el proceso de minificar archivos que me demoraba 5 minutos ahora se ha reducido a 30 segundos!!!

Smaller tiene un costo de US$ 20.00 pero tiene una versión de prueba por 30 días. Adicionalmente se puede obtener un descuento del 25% en el precio para ello solo tienen que seguir en Twitter al creador @chenluois y publicar un tweet con el siguiente texto: Smaller - Batch Minify CSS and JavaScript on the Mac http://smallerapp.com.

Más Información

© 2006 - 2011 unijimpe - Utiliza este feed solo para uso personal, partes de este feed pueden ser utilizados mencionando al autor, no esta permitido publicar enteramente este feed para uso comercial sin permiso del autor.


]]> http://blog.unijimpe.net/smaller-interfaz-grafica-para-yui-compressor-en-mac/feed/ 0 Herramientas Online para trabajar con CSShttp://blog.unijimpe.net/herramientas-online-para-trabajar-con-css/ http://blog.unijimpe.net/herramientas-online-para-trabajar-con-css/#comments Sun, 06 Jun 2010 02:36:05 +0000 unijimpe http://blog.unijimpe.net/?p=1182 Las hojas de estilos nos sirven para dar formato al contenido de nuestra web, el mejor software para editar estilos en Adobe Dreamweaver, pero si no quieres instalar programas adicionales, existen servicios online que permiten …

]]> Las hojas de estilos nos sirven para dar formato al contenido de nuestra web, el mejor software para editar estilos en Adobe Dreamweaver, pero si no quieres instalar programas adicionales, existen servicios online que permiten editar, optimizar y validar documentos CSS, veamos algunas de estas aplicaciones.

Editar CSS

CSSDesk - Online CSS Sandbox
Esta es ta de las interesantes herramientas que ademas de permitir editar los estilos, permite la previsualización inmediata del resultado, además de ello puede colorear automáticamente el código. Finalmente cuando hayas terminado la edición tiene la opción para descargar el archivo con el resultado de nuestro trabajo.

Online CSS Editor
Esta herramienta permite crear tus CSS en internet y automáticamente previsualizar el resultado, con ello puedes obtener la hoja de estilos que necesitas sin necesidad de ningún software adicional.

Optimizar CSS
Optimizar CSS consiste en utilizar de forma eficiente los selectores así como versiones abreviadas de códigos de colores y de bordes, de esta forma el documento CSS se reducirá en tamaño logrando acelerar la carga de nuestro web.

CSS Formatter and Optimiser
Esta herramienta permite pegar tu código CSS o colocar la ruta a tu archivo CSS, con múltiples opciones de compresión puede optimizar adecuadamente tu archivo CSS. Ofrece un reporte del resultado del proceso indicando que líneas se han modificado y el resultado del mismo.

CSS Compressor
Esta herramienta semejante a la anterior permite optimizar nuestro código, permite subir nuestro archivo directamente, colocar la ruta a nuestro archivo o pegar el código de nuestro CSS. Finalmente obtendremos el resultado del proceso nuestro archivo optimizado.

Formatear CSS
Cuando se optimiza las hojas de estilos se eliminan los saltos de línea y espacios en blanco lo cual lo hacen dificiles de entender y editar, para ello tenemos herramientas que formatearán el código agregando saltos de línea y tabulando el contenido.

Styleneat - CSS Organizer
Esta aplicación permite formatear hojas de estilos que han sido minificadas, puedes pegar el código, subir un archivo o colocar la ruta al archivo. Devuelve el código CSS formateado y resaltado en colores para entender rápidamente la hojas de estilos.

Online CSS beautifier and Indenter
Esta web permite formatear e identar el código CSS rápidamente, aunque no colorea el código es muy eficiente y rápido en el resultado de formatear las hojas de estilos.

© 2006 - 2011 unijimpe - Utiliza este feed solo para uso personal, partes de este feed pueden ser utilizados mencionando al autor, no esta permitido publicar enteramente este feed para uso comercial sin permiso del autor.


]]> http://blog.unijimpe.net/herramientas-online-para-trabajar-con-css/feed/ 2 Google Font Library – Fuentes para tu Webhttp://blog.unijimpe.net/google-font-library-fuentes-para-tu-web/ http://blog.unijimpe.net/google-font-library-fuentes-para-tu-web/#comments Fri, 21 May 2010 04:56:29 +0000 unijimpe http://blog.unijimpe.net/?p=1171 Google Font Library es un servicio recién lanzado por Google que permitirá incluir fuentes o tipografías adicionales a las tradicionales con la cual se puede dar un mejor aspecto a diseño de un website o blog.…

]]> Google Font Library es un servicio recién lanzado por Google que permitirá incluir fuentes o tipografías adicionales a las tradicionales con la cual se puede dar un mejor aspecto a diseño de un website o blog.

Para ello Google aloja en sus servidores fuentes gratuitas las cuales podemos integrar en nuestro web gracias a un API que han creado. Esto hará que podamos incluir tipografías diferentes a las tradicionales (Arial, Verdana, Times, etc.) que nos ayudará a dar un mejor acabado a nuestro web que de otra forma lo haríamos utilizando imágenes o flash.

Utilizar Google Font Library

Lo primero es elegir la fuente para ello pueden ver el listado de fuentes disponibles con todas sus variantes (normal, italic, bold, etc.) en Google Font Directory. Primero cargamos la tipografía utilizando el tag link y luego podemos utilizar la tipografía como si fuera una fuente estandar. Por ejemplo escogemos la fuente 'Lobster' y deseamos aplicarlo a los elementos h1 de nuestra página.

  1. <link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
  2. <style type="text/css">
  3. body {
  4.    font-family: 'Lobster', serif;
  5.    font-style: italic;
  6.    font-size: 24px;
  7. }
  8. </style>

Si deseas incluir mas de una fuente debes separar los nombres de las fuentes por el carácter "|" en la ruta, por ejemplo si deseamos utilizar las fuentes Lobster y Cantarell, tendríamos.

  1. http://fonts.googleapis.com/css?family=Lobster|Cantarell

Como pueden ver es sencillo de utilizar y como las fuentes están alojadas en los servidores de Google nos garantizan una excelente velocidad de carga. Para demostrar el funcionamiento de este servicio pueden ver un ejemplo funcionando en google-font donde hemos utilizado dos fuentes diferentes, pueden ver el código fuente para ver como hemos utilizado este servicio.

Font previewer

Para facilitar el uso de esta librería, pueden visitar Font Previewer en donde pueden seleccionar la tipografía, variante, tamaño y demás opciones y tendrán automáticamente generado el código que deben utilizar en su web.

Compatibilidad

Esta librería tiene sus limitaciones y es que solo funciona en las navegadores mas modernos. Los navegadores compatibles con esta librería son:

  • Google Chrome: versión 4.249.4+
  • Mozilla Firefox: versión: 3.5+
  • Apple Safari: versión 3.1+
  • Microsoft Internet Explorer: versión 6+

Google Font API no es compatible con: iPhone, iPad, iPod, o Android. En el caso de estos dispositivos el browser mostrará la siguiente tipografía en la lista de tipografías de la hoja de estilos.

© 2006 - 2011 unijimpe - Utiliza este feed solo para uso personal, partes de este feed pueden ser utilizados mencionando al autor, no esta permitido publicar enteramente este feed para uso comercial sin permiso del autor.


]]> http://blog.unijimpe.net/google-font-library-fuentes-para-tu-web/feed/ 9 Precargar Imagenes con JShttp://blog.unijimpe.net/precargar-imagenes-con-js/ http://blog.unijimpe.net/precargar-imagenes-con-js/#comments Mon, 27 Apr 2009 03:25:12 +0000 unijimpe http://blog.unijimpe.net/?p=1023 Luego del post Precargar imágenes con CSS en el cual comentábamos como colocar una imagen de fondo para indicar que se esta cargando una imagen, esta vez les presentamos una solución mas completa el cual incluye …

]]> Luego del post Precargar imágenes con CSS en el cual comentábamos como colocar una imagen de fondo para indicar que se esta cargando una imagen, esta vez les presentamos una solución mas completa el cual incluye javascript.

jspreload

Creando los estilos
Lo primero es crear dos estilos, un estilo que contiene una imagen de precarga y otro que elimina la imagen de fondo.

  1. .loading {
  2.     background: url(loading.gif) no-repeat center center;
  3. }
  4. .loaded {
  5.     background: none;
  6. }

Cargando la Imagen de Precarga
Lo siguiente es cargar al inicio la imagen del precargador, esto para que se pueda mostrar como fondo de las imágenes a precargar. Esto lo colocamos en el header de nuestro html.

  1. <script type="text/javascript">
  2. loadImage = new Image();
  3. loadImage.src = "loading.gif";
  4. </script>

Incluyendo las Imagenes
Lo que sigue es incluir las imágenes que deseamos mostrar, esto lo hacemos de la forma normal, pero le aplicamos el estilo .loading para mostrar la imagen de precarga.

  1. <img src="img1.png" width="512" height="387" class="loading" />
  2. <img src="img2.png" width="512" height="387" class="loading" />

Finalmente completamos el proceso creando un javascript que recorra todas las imágenes que contiene nuestro HTML, esto lo hacemos con la función getElementsByTagName, luego detectamos el evento onload de cada imagen para aplicarle el estilo que elimina la imagen de fondo.

  1. <script type="text/javascript">
  2. var imgs = document.getElementsByTagName('img');
  3. for(i in imgs) {
  4.     imgs[i].onload = function() {
  5.         this.className = "loaded";
  6.     }
  7. }
  8. </script>

Este script lo colocamos al final del HTML antes del tag </body> y listo ya tenemos nuestro script de precarga de imágenes completo que lo podemos incluir en cualquier en cualquier página html. Pueden ver el ejemplo funcionando en jspreload.

© 2006 - 2011 unijimpe - Utiliza este feed solo para uso personal, partes de este feed pueden ser utilizados mencionando al autor, no esta permitido publicar enteramente este feed para uso comercial sin permiso del autor.


]]> http://blog.unijimpe.net/precargar-imagenes-con-js/feed/ 6 Precargar Imagenes con CSShttp://blog.unijimpe.net/precargar-imagenes-con-css/ http://blog.unijimpe.net/precargar-imagenes-con-css/#comments Mon, 13 Apr 2009 02:02:56 +0000 unijimpe http://blog.unijimpe.net/?p=1016 Cuando cargamos múltiples imágenes en un solo HTML o cuando cargamos imágenes de alta calidad, estas demoran en cargar y en ocasiones parece un error de diseño al no mostrarse ninguna imagen. Para ello agregaremos un …

]]> Cuando cargamos múltiples imágenes en un solo HTML o cuando cargamos imágenes de alta calidad, estas demoran en cargar y en ocasiones parece un error de diseño al no mostrarse ninguna imagen. Para ello agregaremos un pequeño precargador para indicar que la imagen se esta cargando.

csspreload

Bueno para problemas complicados, soluciones sencillas como lo explican en How To Add Image Loading Icon To Large Images Using CSS el cual consiste el colocar una imagen de fondo que simula un precargador, ello lo hacemos con CSS.

Obteniendo la Imagen
Lo primero es conseguir una imagen la cual utilizaremos para indicar que se esta cargando la imagen, para ello podemos hacer una búsqueda sencilla en Google de la siguiente forma:

http://images.google.com/images?q=loading+gif&imgsz=icon

Encontramos gran variedad de imágenes de precarga de donde escogemos el que mas nos agrade para nuestra web.

Creando el estilo
Ahora que ya tenemos la imagen, creamos un estilo llamado loading donde colocamos como fondo centrado horizontal y verticalmente si que se repita.

  1. .loading {
  2.     background: url(loading.gif) no-repeat center center;
  3. }

Luego para finalizar aplicamos este estilo a la imagen que deseamos, hay que notar que es recomendable colocar las dimensiones de la imagen para que el navegador reserve el espacio necesario para la imagen que es donde se mostrará el precargador.

  1. <img src="photo.jpg" width="250" height="150" class="loading" />

Pueden ver un ejemplo del funcionamiento de esta técnica en nuestro buscador de videos Sprytube. Seguramente este pequeño tip les servirá mucho para sus proyectos.

© 2006 - 2011 unijimpe - Utiliza este feed solo para uso personal, partes de este feed pueden ser utilizados mencionando al autor, no esta permitido publicar enteramente este feed para uso comercial sin permiso del autor.


]]> http://blog.unijimpe.net/precargar-imagenes-con-css/feed/ 17 Ajuste de Texto en iPhonehttp://blog.unijimpe.net/ajuste-de-texto-en-iphone/ http://blog.unijimpe.net/ajuste-de-texto-en-iphone/#comments Mon, 22 Dec 2008 03:16:47 +0000 unijimpe http://blog.unijimpe.net/?p=978 iPhone trae Safari como browser predeterminado el cual interpreta a la perfección las paginas HTML, además para facilitar la lectura tiene la propiedad de ajustar el tamaño del texto, es decir los textos son re-escalados y …

]]> iPhone trae Safari como browser predeterminado el cual interpreta a la perfección las paginas HTML, además para facilitar la lectura tiene la propiedad de ajustar el tamaño del texto, es decir los textos son re-escalados y mostrados mas grandes mejorando la legibilidad pero en ocasiones alterando la distribución que habíamos planeado.

iphone-noresize

CSS para iPhone
Hay varias formas de detectar el browser para iPhone y aplicar CSS especificos pero uno de los mas sencillos es un selector especial que nos permitirá aplicar reglas solo aplicables al iPhone.

  1. @media screen and (max-device-width: 480px) {
  2.    /* iPhone CSS */
  3. }

Esto lo podemos incluir en nuestra hoja de estilos, con lo cual agregamos funcionalida para iPhone.

Ajustando el texto en iPhone
Para controlar el tamaño de los textos se puede hacer uso de la propiedad -webkit-text-size-adjust con el cual podemos indicar como interpretar el tamaño de las tipografías. Esta propiedas puede tener los siguientes valores:

  • none: el texto no será escalado y se mostrará en su tamaño original.
  • auto: propiedad por defecto y redimensiona los textos para mejorar la legibilidad.
  • nn%: porcentaje que indica con que factor de zoom se mostrarán los textos.

En mi caso prefiero que el texto no se re-escale para mantener el aspecto que tiene el diseño en los browser normales, entonces la hoja de estilos sería.

  1. @media screen and (max-device-width: 480px) {
  2.     html { -webkit-text-size-adjust: none; }
  3. }

Pueden encontrar mas información acerca de como preparar contenido para iPhone en Designing Content for iPhone.

© 2006 - 2011 unijimpe - Utiliza este feed solo para uso personal, partes de este feed pueden ser utilizados mencionando al autor, no esta permitido publicar enteramente este feed para uso comercial sin permiso del autor.


]]> http://blog.unijimpe.net/ajuste-de-texto-en-iphone/feed/ 0 Color de Texto Seleccionadohttp://blog.unijimpe.net/color-de-texto-seleccionado/ http://blog.unijimpe.net/color-de-texto-seleccionado/#comments Mon, 22 Dec 2008 01:51:07 +0000 unijimpe http://blog.unijimpe.net/?p=976 Una de las propiedades que se vienen en el nuevo CSS3 es la posibilidad de personalizar el color del texto seleccionado, algunos browser como Safari y Firefox ya lo vienen interpretando, con lo cual podremos personalizar …

]]> Una de las propiedades que se vienen en el nuevo CSS3 es la posibilidad de personalizar el color del texto seleccionado, algunos browser como Safari y Firefox ya lo vienen interpretando, con lo cual podremos personalizar mucho mas nuestros Webs.

textselection

Aplicando a todo el Texto
Para personalizar el texto seleccionado podemos utilizar el selector ::selection para Safari y ::-moz-selection en el caso de Firefox, el cual se aplica de la siguiente forma en la hoja de estilos.

  1. ::selection {
  2.     background: #009900;
  3.     color: white;
  4. }
  5. ::-moz-selection {
  6.     background: #009900;
  7.     color: white;
  8. }

Aplicando a Diferentes Bloques
Además de ello se puede aplicar la personalización diferente para cada bloque de deseamos, para ello si tenemos bloques con la clase red y blue, entonces los estilos serían:

  1. p.red::selection {
  2.     background: #ffb7b7;
  3. }
  4. p.red::-moz-selection {
  5.     background: #ffb7b7;
  6. }
  7. p.blue::selection {
  8.     background: #a8d1ff;
  9. }
  10. p.blue::-moz-selection {
  11.     background: #a8d1ff;
  12. }

Como pueden ver es sencillo de utilizar pero llegamos a controlar mucho mas la presentación que deseamos dar a nuestras paginas.

© 2006 - 2011 unijimpe - Utiliza este feed solo para uso personal, partes de este feed pueden ser utilizados mencionando al autor, no esta permitido publicar enteramente este feed para uso comercial sin permiso del autor.


]]> http://blog.unijimpe.net/color-de-texto-seleccionado/feed/ 1