Problema en ie7 – ie6 con text-indent en inputs, submit buttons…
Escrito el 16 agosto, 2010 por Verónica Milán
Es frecuente usar imágenes de fondo para dar estilo a los botones de un formulario. Cuando se hace esto, se suele despejar el botón de texto mediante la propiedad text-indent, dando márgenes negativos al texto de forma que deja de ser visible en pantalla.
Dado este botón:
<input type=”submit” value=”Buscar” class=”button” />
Usamos un CSS parecido a este para que se muestre la imagen como botón y se esconda el texto “buscar”, que aparecería por defecto como texto del botón (por encima incluso de la imagen) si no hacemos nada: Leer más…
Publicado en CSS | 3 Comentarios
Reducir el número de peticiones http con CSS Sprites
Escrito el 29 enero, 2010 por Verónica Milán
Últimamente estoy aprendiendo mucho sobre la optimización de sitios web, tanto a nivel de código css y html como a nivel de navegadores y experiencia de usuario.
Hace unos días leí el artículo how to reduce the number of HTTP request, muy útil para acelerar la carga de nuestras webs. Además justo estos días atrás en lawebera.es escribimos un artículo sobre el tema, y anteriormente hemos publicados otras cosas relacionadas que puedes leer aquí: Cómo hacer diseños web de carga rápida y como acelerar la carga de un sitio web.
Entre otras cosas, en el artículo explican la utilidad básica de CSS Sprites:
- CSS Sprites: es una técnica usada para combinar una serie de imágenes en una. A continuación, utilizando la propiedad background-position en el archivo CSS se controla qué parte de esa imagen será visible para un cierto elemento. De esta manera, en lugar de tener una petición HTTP para cada imagen individual, sólo habrá una para un archivo de imagen más grande que contiene a todas las demás. Muy recomendable. Leer más…
Publicado en Optimización | 7 Comentarios
Diseños web con estilo… espectacular
Escrito el 1 diciembre, 2009 por Verónica Milán
(click para ampliar)
The Pixel Blog.
Leyendo Smashing Magazine me topé con este diseño, y francamente, me ha dejado asombrada.
Pocos diseñadores web están al alcance de crear diseños como este, sobre todo por la parte artística, o cuando menos pocos se atreven. No he visto cosas parecidas muchas veces, y siempre es de agradecer que a alguien se le ocurran este tipo de ideas y se exploten. Leer más…
Publicado en Con estilo | 4 Comentarios
Galería de diseños web para inspirarte
Escrito el 30 julio, 2009 por Verónica Milán
Pattern Tap es una comunidad web que colecciona y muestra por categorías diseños web para inspiración del que los vea.
Por ejemplo,puedes encontrar trabajos reales de páginas de error 404, fondos de pantalla, botones, bordes y más
Como usuario, puedes crear tus propias galerías con los diseños que más te gusten, como esta galería de texturas de papel y seguir la pista a los usuarios que te gusten para encontrar las galerías que ellos mismos han creado.
Los diseños web que muestran en sus galerías son de mucha calidad, actuales y variados. Sólo falta que más usuarios contribuyan colgando sus diseños para que se convierta en una web de referencia como fuente de inspiración a diseñadores y maquetadores web.
Enlace: Pattern Tap.
Publicado en Diseño web | 6 Comentarios
Crear botones para tu blog con Pixel Button
Escrito el 23 junio, 2007 por Verónica Milán
Navegando en busca de herramientas interesantes me encuentro con Pixel Button, una herramienta online gratuita para crear los típicos botones que se ven en los blogs. Te premite modificar el color del texto, del fondo y de los bordes, pones el texto que quieras en cada parte de la imagen, seleccionas el tipo de archivo que quieres (gif o png) y te la crea lista para descargar. Muy sencilla y práctica.
Ejemplo de imagen con Pixel Button: 
Navegando un poco más me he encontrado con otra herramienta que hace lo mismo, RSS Button. Esta te permite personalizar más los botones, ya que a parte de las opciones de la anterior herramienta online, puedes elegir el tipo de letra, su tamaño y el ancho de cada parte, así como el margen entre el texto y el borde de la imagen.
Ejemplo de imagen con RSS Button: 
Anteriormente ya se comentó en este blog una herramienta gratis para crear botones web 2.0, tal vez también te interese.
Publicado en Web 2.0 | Comenta
RSS