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

   Con un código, en jQuery ,  tan sencillo como el siguiente: <!-- desplegar/ocultar contenido menu --> <script type="text/javascript"> $(document).ready(function () { $('nav').on('click','li',function () { var $submenu=$(this).next('div.submenu'); if ($submenu.is(':hidden')) { $submenu.slideDown('100'); } else { $submenu.slideUp('100'); } }); }); </script> desplegamos y ocultamos el contenido de un div .    Siguiendo como ejemplo la página Las Edades de la Tierra , en la cual, en su parte izquierda, podéis desplegar y ocultar el contenido de las diferentes Eras, voy a tratar de explicar como poner en práctica este ejemplo. Una parte del código HTML 5 podría ser como lo que sigue: <section> <nav> <article class="menu menuuno"> <hgroup> <h2 class="titulo">CENOZOICO</h2> <ul class="menu1...

   Continuando con la página Las Edades de la Tierra , en este post voy a comentar cómo incluir dos imágenes de fondo en una ventana o div. Podéis ver que, en la citada página, en la zona izquierda, cuando desplegamos las explicaciones de las diferentes Eras de la tierra, tenemos como fondo dos imágenes en lugar de una. Esto lo conseguimos con otra de las bondades del CSS3 , la cual nos permite colocar, insertar (o como lo queráis llamar) dos imágenes de fondo en lugar de una. El código CSS , incluyendo un color con opacidad, es como sigue: .menuuno {     background: url(images/humano.png) no-repeat fixed 35% 35%, url(images/mamut.png) no-repeat fixed 35% 65%;     background-color: rgba(0, 0, 0, 0.6); }    Fácil ¿no?, las dos imágenes en una misma línea, sólo separadas por una coma. En este caso no se repiten (no-repeat), son fijas (fixed), están las dos a un 35% a la izquierda de la pantalla, la primera (humano.png) a un 35% de...

   Sigo con la página Las Edades de la Tierra y quiero que la veáis para ilustrar el ejemplo. En parte derecha de la pantalla podéis ver una pestaña que está en vertical con el texto "Notas" dentro. Al pincharla se despliega una ventana que está oculta. Bien, en este post voy a explicar cómo girar ese elemento para que nos quede vertical (en el próximo post explicaré como desplegar y ocultar la ventana). La instrucción (en CSS3 ) es la siguiente: transform: rotate(-90deg); . Con esta sencilla linea conseguimos el efecto de girar , rotar tanto el div como el texto que contiene y ponerlo en vertical . Bueno, en realidad no sería una sola linea, de momento para que funcione en la mayoría de los navegadores tenemos que que poner los prefijos -ms-(para el IE9) y -webkit-(para Chrome y Safari). El código CSS nos quedaría algo como: .vertical{     background-color: black;     border-radius: 10px 10px 0 0;     border-style: solid so...

   Ya se que la gran mayoría de vosotros conocéis los nuevos elementos del CSS3 , el cual nos trae funciones que nos simplifican el diseño de la página, sin necesidad de incorporar imágenes, las cuales, además, aumentan su peso y relantizan su carga. Pero, siguiendo con la página de ejemplo Las Edades de la Tierra, en la cual pretendo incorporar la mayoría de los nuevos elementos CSS3 y las etiquetas HTML5, sigo con la explicación.    En este caso le toca el turno a border-radius , el cual nos permite redondear las esquinas de una caja o div que tenga un borde alrededor. En este caso voy a plasmar parte del código que he hecho para la caja que tenéis en Las Edades de La Tierra , llamada 'Enlaces de Interés' a la cual e puesto el ID #enlaces. El código CSS es el siguiente: #enlaces {     border-color :  #00FF99 ;     border-style :  solid ;      border-width :  2px ;     bo...

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

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

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

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