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

Entradas

Mostrando entradas de diciembre, 2012

Dos imágenes de fondo con CSS3

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 la parte superior y la segunda (mamut.png) a un

Desplegar y ocultar ventana lateral con jQuery

Este post es una especie de continuación del anterior sobre como girar un div y posicionarlo en vertical . Siguiendo con la página Las Edades de la Tierra , en la zona derecha de la pantalla tenemos una ventana oculta , simpre fija, la cual se muestra, se despliega , al pinchar sobre la pestaña vertical llamada "notas". En este post voy a intentar explicar cómo realizamos este efecto con la ayuda de jQuery . Lo primero el HTML: <!DOCTYPE html> <html lang="es-ES"> <head> <meta charset="utf-8" /> <title>Las de la tierra</title> <link rel="stylesheet" href="estilos.css" /> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="jquery-1.7.1.min.js"></script>')</script> <!-- Aquí podemos colocar el script en jQuery (descrito más abajo). Aunqu

Cargar jQuery siempre sin fallos

Hoy quiero escribir este post porque varios me han dicho que no le funcionan los códigos escritos en jQuery. El problema que tenían es que intentaban cargar este framework desde el servidor de Google de la siguiente manera: < script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">< /script > El problema está en que cada cierto tiempo se actualiza la versión, en este caso es la 1.8.3, pero dentro de poco puede ser la 1.8.4, por lo que no encontrará la carpeta y jQuery no se cargará. Para solucionar esto y asegurarnos de que siempre se carga tenemos que tener descargada una versión de jQuery en nuestro ordenador (o en el servidor) y añadimos la siguiente linea: <script >window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"><\/script>')</ script > Esta linea comprueba si ya está cargado jQuery, de no ser así añadimos, mediante javascript, una linea que nos carga la versión

Las bondades del CSS3: girar, rotar div y texto con transform

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 solid none solid; border-width: 2px; c

Las bondades del css3: border-radius, esquinas redondeadas

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 ; border-radius : 10px 10px 10px 10px ; } Las tres primeras lineas del código son d

Las bondades del CSS3: aplicar sombras a nuestras cajas

Otra de las bondades del CSS3 . Ya no es necesario realizar complicadas lineas de código en el CSS e incluir imágenes en formato png para aplicar una sombra a nuestra caja o div . Basta con una línea de código muy sencilla de entender: box-shadow: -5px 5px 10px black; Con esta sencilla linea aplicamos a nuestro div o caja una sombra que estará desplazada 5 píxeles a la izquierda, 5 píxeles hacia abajo, con un difuminado de 10 píxeles y de color negro. El primer número indica el desplazamiento horizontal, si es positivo la sombra se desplazará hacia la derecha y si es negativo hacia la izquierda. El segundo número indica el desplazamiento vertical, si es positivo la desplazamos hacia arriba y si es negativo hacia abajo. El tercer número indica el grado de difuminado de la sombra , este debe de ser siempre positivo cero píxeles indicarán que no tiene difuminado. Y por último indicamos el color, este lo podemos expresar también en hexadecimal, black (negro) sería #0000. N