Reset CSS para HTML5
Escrito el 24 enero, 2011 por Verónica Milán
Jugando un poco con CSS3 y HTML5 he encontrado este reset CSS para HTML5, muy útil para lograr la tan ansiada compatibilidad entre navegadores.
Este reset, a parte de lo que hacen los reset más tradicionales, como el famoso de Eric Meyer (en el cual se basa), incluye etiquetas de HTML5 para asegurarnos de maximizar el soporte de este lenguaje en diferentes navegadores.
Con el reset le quitamos margins y paddins a cosas que no deben tenerlo, quitamos estilos de fuente, tamaños por defecto, y en particular, lo que me parece muy útil de este reset CSS es darle a ciertas etiquetas HTML5 estructura de bloque (display: block), porque de hecho, deben tenerla, pero hay navegadores antiguos que no las reconocen y por tanto, necesitan de estas reglas para funcionar correctamente:
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}
Sin este tipo de recursos resulta complicado maquetar en HTML5, y casi imposible hacer que los diferentes navegadores rendericen correctamente nuestros diseños.
Por otro lado, ya han salido algunas librerías javascript interesantes para lograr el renderizado correcto de HTML5, como modernizr. Modernizr añade clases CSS a los elementos HTML5 para que puedas definir estilos específicos en función del navegador.
Y para aquellos que os preguntéis porqué molestarse en maquetar en HTML5, aquí os dejo un enlace a una web con ejemplos de lo que se puede hacer en HTML5.
Enlace: reset CSS para HTML5.
Publicado en CSS,HTML,HTML5 | 2 Comentarios
Botones web hechos solo con CSS3
Escrito el 22 septiembre, 2010 por Verónica Milán
Leyendo kabytes he visto unos increíbles botones hechos simplemente con CSS3, sin uso de imágenes (salvo para dar texturra).
Publicado en CSS | 10 Comentarios
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 | 5 Comentarios
Hacer Tabs (pestañas) con jQuery y CSS
Escrito el 10 junio, 2010 por Verónica Milán
Hoy he publicado en la sección de artículos de LaWebera.es un tutorial donde explico como hacer tabs o pestañás usando CSS y jQuery, un efecto muy útil para estructurar la información de una web de forma ordenada o crear menús de navegación. El efecto que se explica en el ejemplo es este:
Puedes ver el ejemplo en marcha aquí: ejemplo de tabs.
Esta página es de Soh Tanaka, un diseñador de Los Angeles al que sigo muy de cerca porque me encanta su trabajo y la calidad con la que lo hace. Es un maestro del CSS.
URL del tutorial en LaWebera.es: Crear tabs o pestañas con jQuery y CSS.
URL (en inglés): Simple Tabs with CSS & jQuery
Publicado en CSS,jQuery | Añadir comentario
Speed CSS – Maquetación de una web a cámara rápida
Escrito el 5 mayo, 2010 por Verónica Milán
Acabo de ver un video curioso en el que se muestra todo el proceso de maquetación de una página web, partiendo de un diseño hecho en Photoshop.
Es un video de 10 minutos a cámara rápida en donde básicamente se ve como pasar de psd a html, a modo resumido.
Como digo, es a cámara rápida, por lo que no sirve para aprender a maquetar webs. Pero sí para que la gente ajena a este campo se haga una pequeña idea del trabajo que lleva maquetar páginas web.
Si quieres aprender paso a paso a maquetar, te recomiendo que sigas los videotutoriales para pasar de psd a html, ya comentados en este blog.
Aquí el video de Speed CSS:
httpv://www.youtube.com/watch?v=byvkWmF64Nc
La Web del Autor: koronas.es
Publicado en CSS,Diseño web | 7 Comentarios
RSS