elWebmaster.com

Dise√Īo | PHP | CSS

Estilos CSS para Safari y Chrome en un archivo aparte

cssAl testear nuestros dise√Īos en varios navegadores, llega un punto que para que todo quede “pixel-perfect” debemos recurrir a los famosos hacks.

Los hacks para Internet Explorer suelen aislarse dentro de tags conticionales para mayor prolijidad, pero lo que muchos no hacen es separar también los hacks para Safari y Chrome. Esto nos permite conservar una hoja de estilos limpia y fácil de actualizar. Seguir leyendo

21/ene/10, 08.00 Juan Manuel 7 comentarios

Dise√Īo | CSS | recursos

CSS para principiantes: im√°genes con doble borde

Hay muchos efectos que podemos aplicar por medio de CSS a las im√°genes de nuestro sitio, pero la mayor√≠a no son compatibles con todos los navegadores. Sin embargo, a veces lo mejor suele ser lo m√°s sencillo, y por medio de CSS liso y llano podemos lograr un buen dise√Īo que sea multiplataforma.

Por ejemplo, podemos agregar un borde de un color a una imagen, ponerle otro color de fondo y por medio del padding generaremos el efecto de “borde doble”. Luego, para una mejor experiencia de usuario, podemos usar este efecto s√≥lo en hover, de manera que al pasar el mouse por encima se resalte la imagen. Seguir leyendo

16/oct/08, 10.50 Juan Manuel 2 comentarios

Dise√Īo | CSS | recursos

Estructur√° el CSS de tu sitio web

Logo CSSMaquetar con CSS es algo fundamental hoy en día, pero muchas veces resulta un reto a la hora de programar cómo estructurar el código de forma correcta y ordenada de manera tal que podamos encontrar lo que buscamos con tan sólo darle un vistazo al mismo.

CSS frame es una herramienta gratuita que nos brinda la estructura CSS inicial que tenemos que usar para realizar estilos en nuestro HTML.
Si bien no vamos a necesitar utilizar todos los estilos, es una forma de obtener una estructura base, r√°pida y simple. Seguir leyendo

09/sep/08, 14.00 Micaela 1 comentario

Dise√Īo | CSS | recursos

Una √ļnica imagen (sprite) para todo un men√ļ interactivo en CSS

Si uno desea crear un men√ļ con varios botones que cambien su imagen al pasar el mouse por encima, normalmente crea varias im√°genes, dos por cada estado de cada bot√≥n. Esto ralentiza el sitio y genera muchas peticiones al servidor (HTTP Requests).

Sab√≠as que Google, por ejemplo, extrae todas las im√°genes de su sitio de un √ļnico archivo? Esto es posible gracias a los sprites, una especie de grilla de im√°genes que naci√≥ con los videojuegos. Conoce c√≥mo aplicar sprites en tu sitio para ganar velocidad de descarga, espacio y peticiones en el servidor y mucho m√°s.
Seguir leyendo

18/ago/08, 09.00 Micaela 11 comentarios

PHP | Programación | CSS

Comprimir din√°micamente (con PHP) tu hoja de estilos CSS

Comprimiendo con PHP el código de tu hoja estilos CSS dinámicamenteSi eres fanático de la reducción de peso en los archivos de tu página web, seguramente tratarás de ofuscar el código de tus archivos lo más posible, no dejando espacios, tabulaciones ni saltos de línea. Pero el problema viene a la hora de trabajar con los archivos que comprimiste. Si bien siempre puedes guardar una copia del código indentado, hay una forma mucho más práctica de comprimir tu código.

Tomemos por ejemplo tu hoja de estilos CSS. Mucho más práctico sería que el código estuviera prolijamente indentado y por medio de PHP podríamos comprimirlo dinámicamente antes de que se cargue en el servidor. ¡Lograr esto es muy sencillo! Sólo tienes que seguir estos pasos. Seguir leyendo

01/ago/08, 14.36 Juan Manuel 4 comentarios

Dise√Īo | Usabilidad | CSS

Eliminando la molesta línea punteada de los enlaces de tu sitio

Eliminando la molesta l√≠nea punteada de los enlaces de tu sitioLos links del tipo “ancla” <a> muestran por defecto una l√≠nea punteada cuando est√°n activos o “en foco”. En Firefox 3 la l√≠nea toma el color del texto mientras que en otros navegadores o versiones directamente se muestra en color gris.

Esto no es una locura, por cuestiones de accesibilidad se muestra qu√© link est√° activo (piensa en personas que no puedan acceder a un sitio con una computadora con mouse. Presionando”tab” se desplazar√°n por los enlaces. Pero si te molesta ver esa l√≠nea en tu sitio por cuesti√≥n de est√©tica o dise√Īo, puedes seguir leyendo para enterarte c√≥mo eliminarla. Seguir leyendo

30/jul/08, 14.04 Juan Manuel 6 comentarios

Dise√Īo | Programaci√≥n | CSS

Posicionando correctamente elementos con estilos CSS

Posicionando correctamente elementos con estilos CSSEl tema del posicionamiento correcto de los elementos mediante estilos CSS es algo que puede resultar muchas veces confuso y dif√≠cil de dominar por completo. Pero en el blog de Kilian Valkhof un art√≠culo llamado “Comprendiendo el posicionamiento en CSS” nos da unos cuantos ejemplos que son de mucha ayuda.

A continuaci√≥n les dejo algunos conceptos que van a resultar bastante √ļtiles a la hora de trabajar sobre todo con las propiedades display y position de CSS. Espero que ustedes tambi√©n lo encuentren tan interesante como yo. Seguir leyendo

29/jul/08, 11.05 Micaela Comentar

Dise√Īo | c√≥digo | estilos CSS

Estilos de Blockquotes (citas) originales en CSS para tu blog

Estilos de Blockquotes (citas) originales en CSS para tu blog¬ŅPor qu√© habr√≠as de quedarte con el estilo que viene por defecto en tu blog, ya sea porque se trate de un tema para WordPress, Blogspot o uno creado por t√≠ mismo? Gracias a CSS podr√°s lograr algunos estilos originales para aplicarle a las citas de tu blog.

<blockquote> </blockquote> son los tags que usamos para encerrar citas de texto, pero hay muchas opciones en cuanto al dise√Īo, algunas m√°s “conservadoras” otras m√°s radicales, art√≠sticas o incluso bizarras. Conoce c√≥mo lograrlos cambiando el c√≥digo de los estilos CSS. Seguir leyendo

25/jul/08, 12.25 Juan Manuel 1 comentario

Dise√Īo | CSS | recursos

RoundedCornr: esquinas redondeadas en HTML y CSS

RoundedCornr: esquinas redondeadas en HTML y CSSRounded Cornr es una aplicación online que nos permite generar esquinas redondeadas para el contenido o botones de nuestro sitio web o blog. En pocos pasos obtendremos el código necesario para usar en nuestro HTML y en la hoja de estilos CSS.

S√≥lo hace falta definir ciertos par√°metros como el color de fondo, el color de la caja, el tama√Īo del radio de la esquina, etc. y hacer clic en “Generate RoundedCornr”. Luego copiamos y pegamos el c√≥digo ¬°y listo! Seguir leyendo

19/jul/08, 12.16 Micaela Comentar

CSS | recursos | código

FancyForm script para darle formato a las casillas de verificación

FancyForm script para darle formato a las casillas de verificaci√≥nSin duda todo dise√Īador se encuentra en un inconveniente a la hora de realizar checkboxes y radio buttons ya que puede resultar bastante engorroso cambiar el dise√Īo que viene por defecto, especialmente en los navegadores m√°s antiguos, lo que le quita bastante est√©tica al sitio.

FancyForm es un script realizado mediante CSS y Javascript, junto con distintas im√°genes, que nos da la posibilidad de cambiar este tedioso formato que tienen los checkboxes por otros que poseen un dise√Īo m√°s interesante y bonito. Seguir leyendo

16/jul/08, 16.52 Micaela 1 comentario

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder