Cambiar colores de la pagina automaticamente

Oscar_Hidro · #1 (**permalink**) 09/12/2011, 09:08

Hola foreros, vengo con una consulta, puesto que voy a empezar el diseño de una pagina web, y quiero que sea algo no tan comun. Mi idea es que en la pagina principal, debajo de un slide, va a ver unas columnas de contenidos, y me gustaria que los titulos de esos contenidos, cambiaran automaticamente de color. Pudiera ser a través de un click en algun boton para que me redireccione a la misma página pero con diferentes colores. Quisiera saber si hay alguna forma de que esto pueda suceder unicamente con css. Que al momento de ingresar a la pagina, sea con un color distinto en algunas secciones.

Saludos!!!

kseso? · #2 (**permalink**) 09/12/2011, 09:47

¿Cuando habla de cambiar el color a qué se refiere?

Si es que vayan cambiando su color a medida que transcurre x tiempo para hacerlo con css debería recurrir a las transitions y keyframes.

Si lo que quiere es que cada título se vea de un color diferente use el selector de pseudoelementos :nth-child(nº)
Recuerde que (nº) admite "expresiones complejas", tales como (2n+1)/(4n-3)/...

Y en última instancia, siempre puede usar una combinación de ambas y lograr los dos efectos a la vez.

Oscar_Hidro · #3 (**permalink**) 09/12/2011, 09:54

Kseso, justamente busco lo que comentas al principio. Que vayan cambiando los colores de algunos textos a medida que transcurra el tiempo. Como manejo las transitions y keyframes??

Algun lenguaje en particular para manejar estos elementos? o todo se puede hacer desde el codigo css html?

kseso? · #4 (**permalink**) 09/12/2011, 10:56

A ver si esto le es útil.
Los pasos de la keyframes y los efectos están sin pulir. Sólo para que se haga una idea.
Note que sólo están incluidos los prefijos -webkit-

Código CSS:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
<head>
<title>Kseso? jugando con css</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<style type="text/css">
* {margin:0; padding:0;  position: relative;}
 
@-webkit-keyframes cambia_color {
    0% {color: #fff; text-shadow: 1px 1px 1px #000; padding-left: 1em}
    90% {color: #03f; text-shadow: 1px 1px 1px #fff; padding-left: 9em;}
}
#noticias {
  width: 600px;
  margin: 10px auto;
  font-size: 1em;
}
h2 {
  font-size: 1.5em;
  text-transform: uppercase;
  margin-top: 1.em;
  background: red; 
   -webkit-animation-name: cambia_color;
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-timing-function: ease-out;
   -webkit-animation-duration: 10s;
}
</style>
 
</head>
<body>
  <div id="noticias">
      <h2>Noticia Primera</h2>
      <p>Lorem ipsum dolor sit amet consectetuer pede pretium odio ultrices Phasellus. Sapien felis augue nunc ipsum feugiat et justo ac molestie vitae. Natoque libero convallis aliquam adipiscing interdum pede quam congue Aenean.</p>
      <h2>Noticia 2</h2>
      <p>Sed condimentum eleifend Aenean justo volutpat Pellentesque montes cursus Vestibulum auctor. Risus dis consequat Quisque montes vestibulum neque orci eu Pellentesque Nulla. Sem lacus nec dolor egestas ut Vestibulum porttitor aliquam quis lacinia. Vitae Ut id Vivamus Vivamus iaculis nisl id urna Quisque ultrices. Tristique amet odio sem sociis quam orci Donec Curabitur condimentum et. Lobortis justo consequat accumsan sed pede nibh eget Donec Sed feugiat. Tortor Nulla orci lacus nibh.</p>
      <h2>Noticia 3</h2>
      <p>Lorem ipsum dolor sit amet consectetuer pede pretium odio ultrices Phasellus. Sapien felis augue nunc ipsum feugiat et justo ac molestie vitae. Natoque libero convallis aliquam adipiscing interdum pede quam congue Aenean a. Sed condimentum eleifend Aenean justo volutpat Pellentesque montes cursus Vestibulum auctor. Risus dis consequat Quisque montes vestibulum neque orci eu Pellentesque Nulla. Sem lacus nec dolor egestas ut Vestibulum porttitor aliquam quis lacinia. Vitae Ut id Vivamus Vivamus iaculis nisl id urna Quisque ultrices. Tristique amet odio sem sociis quam orci Donec Curabitur condimentum et. Lobortis justo consequat accumsan sed pede nibh eget Donec Sed feugiat. Tortor Nulla orci lacus nibh.</p>
  </div>
</body>
</html>

Oscar_Hidro · #5 (**permalink**) 09/12/2011, 11:12

Muchas gracias hermano. Esto es algo como lo que estoy buscando. Ya solo es adecuarlo a como lo necesitaria. Solamente una ultima pregunta acerca del ejemplo que me diste.

Al momento que termina de hacer el efecto, termina en un color casi negro. Empieza en blanco. Como hacer para que cuando llegue al negro, el cambio al momento de que empieza la animacion nuevamente, no se vea tan brusco?

kseso? · #6 (**permalink**) 09/12/2011, 11:48

El movimiento al igual que el cambio de color para que se haga de forma fluida, sin saltos ni brusquedades lo debe ajustar con los frames:

Código CSS:

Ver original@-webkit-keyframes cambia_color {
    0% {color: #fff; text-shadow: 1px 1px 1px #000; padding-left: 1em}
    50% {color: #03f; text-shadow: 1px 1px 1px #fff; padding-left: 9em;}
}

añadiendo tantos pasos intermedios (x%) como crea necesarios.
Lo mismo con las propiedades y los valores declarados en cada frame.

Oscar_Hidro · #7 (**permalink**) 09/12/2011, 12:25

Gracias hermano, he encontrado un monton de informacion acerca de efectos con css. Que puedo emplear para lo que quiero.

Saludos!