Css ha incorporado unas funciones de color, rgb y hls, con versiones que incluyen canal alpha o de transparencia. Quien trabaje con hls ya conoce como funciona, y a los demás con rbg tenemos suficiente. Así que me voy a centrar en la función rgba. Su sintaxis es: rgba (rojo, verde, azul, transparencia)
Las animaciones en la web no son nada nuevo, basadas en javascript, y si usas alguna librería como Jquery son fáciles de conseguir. ¿Por qué usar entonces animaciones CSS? Pues porque el código de la animación se ejecutará nativamente en el navegador, cuyo código es compilado y está muy optimizado, mientras que javascript será
Uno de los recursos estéticos que más se está usando para romper con la rigidez de bloques y bordes de las páginas web son las esquinas redondeadas. Durante años se han hecho virguerías para conseguir este efecto, tales como poner imágenes del mismo color del fondo en las esquinas, algoritmos que colorean pixeles, etc.
#contenedor{ overflow: hidden; text-overflow: ellipsis " [ver]"; white-space : nowrap; width: 300px; /** Extra para decoracion **/ background-color: #d0d0d0; padding: 10px 10px 10px 10px; border-radius: 8px; margin-left:0; margin-right:0; } #contenedor:hover{ white-space : normal; /** Extra para decoracion **/ background-color: #f0f0f0; } Texto de ejemplo para ver como funciona la propiedad text-overflow. Al pasar el ratón por
Vamos a partir de un ejemplo sencillo y bastante común en javascipt, tenemos una fecha en formato texto de la que queremos sacar el día y pasarlo a número para poder sumar o restar días. var fecha="01/02/2011"; var trozos=fecha.split("/"); console.debug(trozos[0]); //Imprime 01 var dia=parseInt(trozos[0]); console.debug(dia); //Imprime 1 Parece que funciona bien, acabamos teniendo en día un
En la anterior entrada (ZOOM vs SCALE en CSS) hablábamos de escalado y la propiedad zoom, y parecía funcionar todo perfecto en cualquier navegador, pero me he encontrado un problema del que no consigo salir. El ejemplo sobre el que vamos a trabajar es muy sencillo, un div que contiene otros dos divs, el
Hace algunas entradas hablamos de las transformaciones 2D de CSS3, poniendo como ejemplo la rotación. Ahora vamos a dar algunos detalles más sobre el escalado de elementos. Según lo que hemos visto, en el estándar hacer un escalado CSS es tan sencillo como: #elem{ transform: scale(1.5); } Lo que haría el elemento “elem”
Esta entrada es básicamente para preguntaros. ¿Por qué usáis Internet Explorer? Supongo que hay mucha gente con poco conocimiento informático, que es el que ya estaba instalado en Windows y no sabe bien que hay otros navegadores, ni en que iba a mejorar su navegación, y lo usen. Pero viendo estadísticas como
Las nuevas propiedades CSS3 permiten, entre otras cosas transformaciones visuales de los elementos de una página, como trasladar, rotar, escalar y sesgar. Esto permite hacer animaciones y efectos visuales muy complejos que antes solo eran posibles en flash o similares. Aunque no realicemos efectos tan complejos, siempre podemos usar algunas transformaciones para que la
¿Qué es la geolocalización? Básicamente poder poner la posición de tus usuarios en un mapa. Los navegadores modernos soportan la funcionalidad para dar la posición geográfica del cliente si la conocen. En dispositivos móviles se utiliza el GPS, pero he probado en ordenadores de sobremesa y también sabe donde estoy, no se si utiliza información del
