Cambio de color con mucho flow en Adobe Muse (texto o fondo)

Cambio de color con mucho flow en Adobe Muse (texto o fondo)

El otro día un usuario de ConectaTutoriales me preguntó cómo podía hacer un cambio de color cuando el ratón se posicionaba sobre un texto dentro de Adobe Muse.

Vemos que Adobe Muse nos permite hacer el cambio mediante los estados pero no de un texto como tal (Si de una forma o un enlace). Así que les propongo esta rápida solución mediante javascript para que puedan hacer un copia y pega rápido (no hace falta importar como html, muse lo detecta automáticamente al pegar)

<!--cambia el texto de la linea de abajo por el que tu quieras y copia la frase al completo con las etiquetas div incluidas. Dentro de Adobe Muse, puedes pegar directamente. Si lo prefieres puedes importartlo mediante un widget html (Realmente es lo mismo)-->

<div class="animado" style="color:#F80AFF;" onmouseover='this.style.color="#FF0004";' onmouseout='this.style.color="#FFE500";'>Hola! soy un texto con 3 estados de color, normal (magenta), ratón encima(rojo), y ratón fuera (Amarillo). </div>

See the Pen JYNvYo by Rafael Tuduri Amengual (@conecta) on CodePen.

Otro método (posiblemente más adecuado) sería hacerlo mediante CSS que vamos a poder controlar con mayor precisión. Vamos a poner un ejemplo con una transición de color más suavizada. Pero aquí aparece otra pregunta: ¿Cómo puedo insertar CSS personalizado? Lo podemos hacer desde:

Entonces en este caso deberemos poner el css dentro de la etiqueta head y recuerda hacerlo entre las etiquetas <style type=”text/css”></style> para que funcione:

.colorcete {
  color: red;
  -webkit-transition: color 1s ease-out;
  -moz-transition: color 1s ease-out;
  -o-transition: color 1s ease-out;
  transition: color 1s ease-out;
}

.colorcete:hover {
  color: blue;
  cursor: pointer;
}

.fondo {
  color: #ffffff;
  background-color: red;
  -webkit-transition: background-color 1s linear;
  -moz-transition: background-color 1s linear;
  -o-transition: background-color 1s linear;
  transition: background-color 1s linear;
}

.fondo:hover {
  background-color: green;
  cursor: pointer;
}

See the Pen Cambio de color vía CSS by Rafael Tuduri Amengual (@conecta) on CodePen.

2017-06-07T16:46:05+00:00 Octubre 9, 2015|Categories: Recursos Adobe Muse|Tags: , , , |

About the Author:

Soy diseñador gráfico, fotógrafo, publicista y profesor. Actualmente trabajo para España, Reino Unido, EEUU, LatinoAmérica y Austria Adobe User Group Manager // Fundador de ConectaTutoriales // Formador en video2brain & Lynda.com a LinkedIn brand.

Un comentario

  1. Sergio Mora 10 Octubre, 2015 en 12:18 pm- Responder

    En realidad hay una forma mucho más sencilla. Al elegir el marco de texto y el estado en el que quieres cambiar el color, puedes hacerlo en la parte derecha, después de las propiedades del marco de texto, donde vienen las propiedades del texto en sí. Creo que se puede cambiar la fuente, el color y no sé si algo más.

Deje su comentario