Códigos jQuery, CSS, HTML para páginas web

Entradas

Mostrando entradas de noviembre, 2012

Las bondades del CSS3: transition y transform

Por supuesto seguimos con la página de ejemplo Las Edades de la Tierra . En esta ocasión voy a comentar cómo animar los enlaces (aunque realmente no es necesario que sean enlaces) sin la necesidad de usar javascript. Con CSS ( CSS3 ) la tarea es relativamente sencilla. En la página de ejemplo podéis ver que tanto en la sección principal (a la izquierda), que abre las explicaciones sobre las diferentes eras y eones, como en la sección de de enlaces, al pasar el puntero del ratón sobre ellos, estos se hacen más grandes, se transforman a una escala mayor y, lo mejor, es que no es necesario usar javascript para realizar el efecto, basta con unas pocas líneas en el CSS. Aviso que en el IE funciona pero regular (no realiza el efecto de transición suave, por lo menos en la versión 9). Vayamos al grano, el efecto se consigue combinando las propiedades transition y transform , con las cuales podemos realizar animaciones muy buenas. En el caso del ejemplo de la página web Las Edades

Las bondades del CSS3: opacidad del color con rgba

El CSS3 nos trae cosas muy buenas. Entre ellas está la posibilidad de poder controlar la transparencia u opacidad (como lo queramos llamar) del color de fondo de un elemento de la página. Esto nos evita el tener que colocar un fondo transparente mediante una imagen png, con lo cual reducimos el peso de la página a la hora de cargarla. Además lo soportan todos los navegadores modernos. Siguiendo con la página Las Edades de la Tierra , en ella podéis ver que el fondo de varios elementos es negro con un grado de transparencia. La forma de conseguirlo es sencilla: con la instrucción rgba (x, x, x, z.z) , donde la x es un número, de 0 a 255 (tres 0 negro, tres 255 blanco), que nos dará el color y la z es un decimal (entre 0 y 1) que nos dará la transparencia (0 totalmente transparente, 1 sin transparencia). Por ejemplo: rgba (0,0,0,0.5) sería el color negro con media opacidad. El código CSS3 sería el siguiente: background-color: rgba(0, 0, 0, 0.5); O, también: backgr

Imagen de fondo adaptable a todas las resoluciones

Continuando con la página Las Edades de la Tierra , en este post voy a explicar cómo incluir las imágenes de fondo y que estas queden fijas y se adapten a cualquier resolución y tamaño de la ventana. En primer lugar el código HTML5 : <body> <img id="imgback" src="images/fondolatierra.jpg" alt="la tierra"> <header id="cabecera"> <h1> <a title="Las edades de la tierra en millones de años,cenozoico, paleozoico, mesozoico, jurasico, precambrico" href="#"> <img id="imgcabecera" alt="las edades de la tierra" src="images/lasedadesdelatierra.png"></a> </h1> </header> El HTML es sencillo (y el CSS también lo será). Inmediatamente después de la etiqueta 'body' insertamos la imagen de fondo con un 'id'. Después, dentro de la etiqueta 'header' incluimos la imagen (también con un 'id') que nos servirá de

¿Empezamos a crear páginas web en html5 y css3?

Pues va siendo hora. El CSS3 ya está muy implementado en la mayoría de los navegadores. En cuanto a la implementación del HTML5 se está trabajando en ello. En algunos sitios he leído que la implementación ya debería estar realizada a fecha de hoy. En otros, que no lo estará hasta el 2014. En todo caso sería bueno ir conociéndolo e ir haciendo alguna "chapuza" con él, ya que, tiene una buena cantidad de nuevas etiquetas y, algunas, son un poco enrevesadas de entender. Yo estoy trabajando en una (para mi) llamada Las Edades de la Tierra . En esta página voy a intentar usar el mayor número de las nuevas etiquetas HTML5 y de las nuevas facilidades que nos ofrece CSS3 . Esta sólo se verá bien en los navegadores que están actualizados. Aviso que esta página puede que no se vea correctamente en el IE (Internet Explorer) ya que este es el navegador que más tarde implementa las novedades. También intentaré que se adapte al mayor número de pantallas y resoluciones. En