El txoko del programador: CSS

Mostrando entradas con la etiqueta CSS. Mostrar todas las entradas

miércoles, 4 de junio de 2014

Modificar estilo CSS con JavaScript

Como bien sabemos el lenguaje para darle estilo al HTML se llama CSS. También debemos saber que una vez que hemos diseñado una página web con HTML+CSS y tiene una hoja de estilo fija de CSS, ese código se puede cambiar a nuestro antojo con scripts de JavaScript, sin tener que hacer una nueva hoja de estilo de CSS.

Así pues este código HTML+CSS:

<html>
 <head>
  <title>JavaScript y CSS</title>
  <style type="text/css">
      #divUno { 
        width: 200px; 
        height: 200px;
        background-color: #ff0000;
      }
  </style>
 </head>
 <body>
  

</body>
</html>

Y estre otro código HTML+JavaScript:

<html>
 <head>
  <title>JavaScript y CSS</title>
  
 </head>
 <body>
  

</body>
</html>

Obtendran el mismo resultado: un cuadrado rojo de 200x200 con fondo rojo.

Con JavaScript se puede acceder a todas las propiedades CSS de un objeto.
Un saludo.

sábado, 31 de mayo de 2014

Galería de fotos sencilla con HTML, CSS y JavaScript

En este caso vamos a hacer una simple galería de fotos para nuestra página web. Es muy fácil de hacer y muy sencilla de entender. El código está generado por mí al 100% sin haber copiado de ningún lado. Podéis copiar el código si queréis directamente pero es mejor que lo entendáis y lo modifiquéis a vuestro antojo. Se trata de una galería fotográfica con tres fotos. Una siempre se muestra en grande, cada tres segundos pasa a la siguiente foto, pero si hacemos click en una de las fotos pequeñas sale en grande la que hemos elegido.

Veamos el código HTML que debe ir en head:

Veamos el código CSS que debe ir en head:

#galeria{ border: 4px solid #424242; width: 600px; height: 510px; background-color: #D8D8D8;}
#grande{ border: 2px solid #6E6E6E; width: 556px; height: 346px; margin-left: 20px; margin-top: 20px;}
.pequenas{ border: 2px solid #6E6E6E; width: 170px; height: 108px; float: left; margin-top: 10px; margin-left: 19px;}

Veamos el código JavaScript que debe ir en head:

var fotos = ["foto1.jpg","foto2.jpg","foto3.jpg"];
var fotosP = ["fotop1.jpg","fotop2.jpg","fotop3.jpg"];
var fotosURL = ["url(file:///C:/Users/Eneko/Desktop/Cursillo_Javascript/Fotos/foto1.jpg)","url(file:///C:/Users/Eneko/Desktop/Cursillo_Javascript/Fotos/foto2.jpg)","url(file:///C:/Users/Eneko/Desktop/Cursillo_Javascript/Fotos/foto3.jpg)"];

function cargarFotos(){
 document.getElementById('grande').style.backgroundImage = "url(foto1.jpg)";
 for(fo=1;fo<=3;fo++){
  fo = parseInt(fo);
  document.getElementById('pequena'+fo).style.backgroundImage = "url("+fotosP[fo-1]+")";
 }
}
  
function rularFotos(){
 queFoto = document.getElementById('grande').style.backgroundImage;
 //alert(fotosURL[0]);
   
 if(queFoto == fotosURL[0]){
  document.getElementById('grande').style.backgroundImage = fotosURL[1];
 }else{
  if(queFoto == fotosURL[1]){
   document.getElementById('grande').style.backgroundImage = fotosURL[2];
     }else{
   document.getElementById('grande').style.backgroundImage = fotosURL[0];
  }
 }
 setTimeout(rularFotos,3000);
}
  
function cambiarFoto(num){
 document.getElementById('grande').style.backgroundImage = fotosURL[num]; 
}

En el body deberemos poner onLoad="cargarFotos();rularFotos()" para que se ejecuten las funciones.
Veamos el código HTML que debe ir en body:

Los nombres de carpetas, las rutas etc. hay que poner las de vuestro ordenador, evidentement los nombres de las fotos etc. también hay que cambiarlos. Os dejo un enlace del script completo con fotos incluidas.
http://www.eneko-bernaldo.site90.net/scripts/galeria.rar
Un saludo.

miércoles, 18 de enero de 2012

Poner imágenes de fondo y modificar imágenes.

Con CSS además de poder poner un color de fondo también podemos poner una o varias imágenes de fondo de tal manera que nuestra página web tenga una apariencia mas elegante. En este vídeo se puede aprender a hacer lo anteriormente mencionado. Para continuar con aprendiendo con CSS visitar http://www.todesigniseasy.com.

jueves, 29 de diciembre de 2011

Tamaños de letras y fuentes. Colores de letras y fondos.

Continuando con el CSS en este vídeo lo que se enseña es a modificar a nuestro antojo el tamaño, tipo de letra, color, estilo...del texto y a colorear el fondo o poner imágenes que peguen con nuestra página web. El color de la letra en contraste con el color de fondo debe ser agradable, que no canse la vista y además que no asuste al usuario al entrar en nuestra página web...

jueves, 15 de diciembre de 2011

Introducción a CSS, el estilo perfecto para HTML.

El HTML es el lenguaje para diseñar una página web pero el estilo del que podemos hacer uso con HTML es muy limitado y además se está quedando obsoleto, por eso actualmente se recomienda el CSS para aplicar el estilo a documentos HTML. Tamaño, color de fondo, color, sombra, fuente, decoración... y muchos mas campos son los que trabaja el CSS haciendo de nuestras páginas un sitio mas vistoso y alegre para navegar. Con el objetivo de querer enseñaros todo lo que esté a mi alcance, he traido el primer video de CSS con el título "Introducción a CSS (Cascading Style Sheet). Espero que os guste. Un saludo.

jueves, 3 de noviembre de 2011

Código HTML+CSS de una calculadora

Vamos a hacer una calculadora diseñada con HTML+CSS y que funcione mediante el lenguaje de programación Javascript. Lo primero que voy a poner es el estilo: