Todo relacionado con el Diseño CSS
Es es sueño de un programador cuando trabaja haciendo maquetación css. Poder hacer calculos en nuestro archivo css como si de php se tratara. Y lo mejor, es que se puede hacer y nos permite trabajar en distintas medidas (px, em, %) y funciona incluso con IE 9. Se usa de forma sencilla, con cualquier propiedad css que admita medida, del tipo que sean (tamaño, tiempo..) y aunque actualmente es mejor usarla con el prefijo del navegador -webkit, -moz, etc…
Leer Más
Seleccionar todos los tags/elementos: Todos los elementos («*») Seleccionar todos los elementos que estan en proceso de animación: Extensiones jQuery :animated Selector Selecciona los elementos que tienen el atributo especificado con un valor ya sea igual a una cadena determinada o que comience con esa cadena seguida de un guión (-): Atributo contiene prefijo seleccionado [name|=»value»] Seleccionar elementos que contengan el valor específico, aunque sea parte de una subcadena: Atributo contiene palabra seleccionada [name*=»value»] Selecciona los elementos que tienen el…
Leer Más
o o o o ( O O O \ L ( O O O O O \ L ( O | | \ \ | | \ \ \ \ ( ( 8 o o o ( ( 8 o o o o ) ) b o O o o o o o o ) b o O o o o o o o o o o / / / • • • • • _ _ _ • •…
Leer Más
El problema que planteo es el siguiente: tu creas tu layout con tres columnas y luego quieres que tus columnas, aunque dos de ellas no tengan contenido, lleguen siempre hasta la altura de la que más contenido tenga. Normalmente obtienes algo así: ¡No se alargan las columnas como quieres!, es debido a que lo normal, es que las columnas se expandan según el contenido que tengan. Una opción rápida y chapuzas, sería poner un display:block a cada columna con el…
Leer Más
Con la llegada de los estándares CSS3, han surgido nuevas opciones para diseñar nuestras páginas. Entre ellas, las más interesantes que encuentro están, las transparencias, los degradados y las esquinas redondeadas. Voy a hablar de estas últimas, es algo que los diseñadores siempre han conseguido insertando imágenes redondas al borde y listo. Actualmente, y gracias a los estándares css3 también lo podemos realizar mediante código css con estas instrucciones: border-radius (estándar css) -moz-border-radius (cuando se trataba de mozilla, aunque desde…
Leer Más
Llevo bastante tiempo intentando lograr hacer el efecto de arrastrar y soltar de las cajas de igoogle, hay poquísima información en la red respecto a cómo se consigue crear este efecto, a pesar de que es algo muy interesante a nivel de diseño. ¿Como he conseguido lograr el efecto? La base de todo es la clase prototype que podeis descargar desde ese link. Prototype es un framework hecho en JavaScript que se sirve para ayudar a un desarrollo sencillo y…
Leer Más
Cuando maquetamos una web, lo primero siempre es tener una estructura definida bien sólida 2 columnas -3 filas, 4 filas- 2 columna,.. etc. Siempre he defendido el trabajo sin tablas, y si eres iniciado y crear estas filas y columnas te cuesta, puedes optar por descargártelas desde este link. Los chicos de IronMyers se han molestado en crear una serie de plantillas con muchas combinaciones. Como verás, el código quedará más limpio y estructurado, con la consecuente perdida de peso en…
Leer Más
Para hacer las cosas bien al trabajar con CSS tenemos un abanico de opciones tan grandes como nuestro dominio del lenguaje, pero para que las cosas salgan mal hay una cantidad enorme de errores que podemos cometer. Aquí dejo 5 de los errores más comunes al manejar css, al que agrego otro propio de nuestro lenguaje. No cerrar los corchetes. Mientras definimos los atributos de cada elemento, nuestro código se llena de un mar de corchetes abriendo y cerrando, por…
Leer Más
Todo se resume en esto, los dos primeros parámetros numericos que pongas, uno será el desplazamiento horizontal y otro el vertical, no es una propiedad muy común y muchos no la conocen porque el dreamweaver no la desliza (son medidas y es lógico). Pero ayuda bastante a poner índices en nuestras <ul> o <dl> por ejemplo.
Leer Más
Estoy totalmente en contra de los hacks css, siempre hay otro camino para conseguir el diseño que queramos (Por favor, no uses nunca tablas. ¡ese no es el camino!). Pero cuando no queda otro camino hay que usarlos, aquí dejo una lista de ellos. _left barra delante de la propiedad ejemplo:( .menu{ left:40em;_left:30em;}). La barra solo actua en IE6. .left punto delante de la propiedad ejemplo:( .menu{ left:40em;.left:30em;}). El punto actua tanto en IE6 e IE7. .menu, x:-moz-any-link {left:40em}. Estilo…
Leer Más
