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

    Con el uso de media queries de CSS3 podemos adaptar de forma sencilla nuestra página para que esta se vea correctamente en un móvil o en una tablet . Este ejemplo que os comento sólo lo aconsejo para aplicarlo a páginas sencillas. Para páginas más elaboradas es mejor crear CSS específicos y realizar un redireccionamiento al CSS que queramos cargar dependiendo del dispositivo que se esté usando. En este caso, continuando con la página Las Edades de la Tierra , vamos a introducir, dentro del mismo CSS, unas reglas media query, las cuales se ejecutarán, dependiendo del tipo de pantalla con la que estemos  visualizando la página. Antes de nada quiero hacer hincapié en que, para hacer una página adaptable, es conveniente que, siempre que sea posible, uséis porcentajes en las medidas. (Ver ' Consejos crear web ' y ' Imagen adaptable todas resoluciones ' ).    Bien, para hacer esto, basta con añadir un código como el siguiente al final de nuestro CSS:...

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

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

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

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

   Sigo aprendiendo pasito a pasito. No tengo mucho tiempo (trabajo 10 horas al día... de momento) pero algo avanzamos. En este post, para los principiantes como yo, claro, os doy unos consejitos sobre el diseño.    Una de las cosas más importantes del diseño de una página web es que sea lo más accesible a la mayoria de las personas, y visible en la mayoría de monitores y navegadores. Tenéis que saber que los navegadores interpretan a su modo el código y que, dependiendo de la resolución de la pantalla, se verá también muy diferente. Yo, por ejemplo, tengo el monitor con una resolución de 1280x1024 pero mucha más gente tiene la resolución en 1024x768. Así que pongamos en nuestros monitores esta última resolución y, si nuestro monitor es cuadrado, vamos a procurar que el contenido de la página ocupe, casi (dejad algo de margen), el ancho de la pantalla. Os doy este consejo porque, si trabajáis el diseño en una resolución alta, aquel que tenga la resolución más baja ...

  Ya sé que a dia de hoy se puede realizar un efecto sombra en CSS3 pero, a fecha de este post, internet explorer no lo soporta, así que os diré cómo hice el efecto a las fotos, en css y con un par de imágenes.   Antes de nada quiero comentaros que en esta página: http://www.talleresguadamia.com , el título principal del contenido tiene una sombra realizada en CSS3, los que abráis la página con el explorer no la veréis y el resto depende del navegador. El efecto sombra al que me refiero es el véis en las fotos del contenido. Lo realmente importante el código que sigue: @charset "utf-8"; /* CSS Document */ .dropshadow1{     float:left;     background: url(images/shadowAlpha.png) no-repeat bottom right !important ;     background: url(images/shadow.gif) no-repeat bottom right;     margin: 10px 0 0 10px !important ;     margin: 5px 0 0 5px; }     .dropshadow1 img {   di...