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

Entradas

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ág...

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...

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 resoluc...

Código jQuery para ver foto más grande

Pues en este post explicaré como hacer para que, al pasar el puntero del mouse por encima de una foto pequeña (o thumbnail), esta se vea más grande en otro sitio. En el código HTML podríamos tener algo como: <div class="box_imgpeque"> <img src="images/100_6747.JPG" width="160" height="90" alt=""/> </div> <div class="box_imgpeque"> <img src="images/100_6745.JPG" width="160" height="90" alt=""> </div> <div class="box_imgpeque"> <img src="images/100_6710.JPG" width="160" height="90" alt=""> </div> <div class="box_imggrande"></div> Creo que el HTML está claro. En los divs "box_imgpeque" tendríamos las imágenes en pequeño y, en el div "box_imggrande" irían las imágenes grandes. Por supuesto en el CSS de "box_imggrande...

ventana modal con html, css y jQuery

Intentaré explicar cómo crear, sólo con CSS , HTML y un poco de jQuery , un tipo de esas ventanitas que no nos permiten pinchar fuera de ellas hasta que las cerremos. Con que hechéis un vistazo al post anterior ya está más de la mitad del trabajo hecho. En dicho post ya expliqué cómo crear la ventana (un div oculto), posicionarla y darle forma con css y abrirla y cerrarla con jQuery, pero, ¿cómo evitar que se pinche fuera de ella?. Lo más sencillo que he encontrado para ello es lo siguiente: (la ventana a abrir será el formulario de correo que comenté en el post anterior el cual os aconsejo tenerlo abierto) Colocar el siguiente div en el html de nuestra página: <div id="fondoformulario"></div> cuyo css será el siguiente: #fondoformulario { position:absolute; top:0px; left:0px; width:100%; /*ocupará todo el ancho de nuestra página*/ height:1860px; /*le d...

Abrir y cerrar formulario de correo en ventana tipo popup con jquery

Este post está relacionado con el anterior sobre enviar formulario de correo en segundo plano , en este voy a hablar sobre como abrir un div que contiene un formulario de correo, tipo popup o, tal vez mejor, ventana modal . En esta página sobre taller del automóvil tengo un formulario de correo oculto que se muestra al pinchar en un enlace. Intento minimizar el scroll de la página para mostrar la información. Me parece que es mejor mostrar toda la información posible moviendo la barra del scroll lo menos posible. Y, en este caso, me parecía que incluir un formulario visible recargaría demasiado la página. Voy a intentar explicar cómo mostrar y ocultar una ventana, que contiene un formulario de correo, usando jQuery . Primero, el código CSS: /*damos forma y posición al div formulario que, por defecto, estará oculto*/ #formulario{ display:none; position:absolute; top: 50%; ...