Foros del Web » Creando para Internet » CSS »

Efecto de transición con colores degradados con css

Estas en el tema de Efecto de transición con colores degradados con css en el foro de CSS en Foros del Web. Buenos días muchas gracias por su interés en mi pregunta, resulta que se me ocurrió la idea de crear un botón con degradado valiendome del ...
  #1 (permalink)  
Antiguo 20/06/2014, 08:54
Avatar de WebSalvador  
Fecha de Ingreso: agosto-2011
Ubicación: Lima - Perú
Mensajes: 171
Antigüedad: 13 años, 4 meses
Puntos: 2
Efecto de transición con colores degradados con css

Buenos días muchas gracias por su interés en mi pregunta, resulta que se me ocurrió la idea de crear un botón con degradado valiendome del atributo linear-gradient de la porpiedad background de css, pero al pasar el mouse por encima cambie de colores en su degradado, eso realmente si se puede hacer, pero yo lo quiero con transición para que no se vea el efecto de manera brusca, busque mucha información , pero hasta en este foro dicen que aun no se puede hacer, pero encontre este enlace que parece que si se puede "http://fortis7.moutheme.com/home-section-2/" debajo del slider se ve tres botones redondos y si tiene transición y degradado una magnifica combinación, he tratado de hacer este efecto, pero no lo logro, este es mi código:

Código PHP:
.services_medium {
width102px;
height102px;
border-radius50%;
-
webkit-border-radius50%;
-
moz-border-radius50%;
positionrelative;
backgroundrgba(1941952010.95);
background: -moz-linear-gradient(toprgba(1941952010.950%, rgba(2472472470.95100%);
background: -webkit-gradient(linearleft topleft bottomcolor-stop(0%,rgba(1941952010.95)), color-stop(100%,rgba(2472472470.95)));
background: -webkit-linear-gradient(toprgba(1941952010.950%, rgba(2472472470.95100%);
background: -o-linear-gradient(toprgba(1941952010.950%, rgba(2472472470.95100%);
background: -ms-linear-gradient(toprgba(1941952010.950%, rgba(2472472470.95100%);
backgroundlinear-gradient(to bottomrgba(1941952010.950%, rgba(2472472470.95100%);
filterprogid:DXImageTransform.Microsoft.gradientstartColorstr='rgba(194, 195, 201, 0.95)'endColorstr='rgba(247, 247, 247, 0.95)',GradientType=);
-
webkit-transitionbackground 0.4s ease ;
-
moz-transitionbackground 0.4s ease;
-
ms-transitionbackground 0.4s ease;
-
o-transitionbackground 0.4s ease;
transitionbackground 0.4s ease;
margin:0 auto 15px auto;
}

.
services_medium:hover {
backgroundrgba(501502000.95);
background: -moz-linear-gradient(toprgba(501502000.950%, rgba(35801150.9550%, rgba(0,31610.95100%);
background: -webkit-gradient(linearleft topleft bottomcolor-stop(0%,rgba(501502000.95)), color-stop(100%,rgba(0,31610.95)));
background: -webkit-linear-gradient(toprgba(501502000.950%, rgba(35801150.9550%, rgba(0,31610.95100%);
background: -o-linear-gradient(toprgba(501502000.950%, rgba(35801150.9550%, rgba(0,31610.95100%);
background: -ms-linear-gradient(toprgba(501502000.950%, rgba(35801150.9550%, rgba(0,31610.95100%);
backgroundlinear-gradient(to bottomrgba(501502000.950%, rgba(35801150.9550%, rgba(0,31610.95100%);
filterprogid:DXImageTransform.Microsoft.gradientstartColorstr='rgba(50, 150, 200, 0.95)'endColorstr='rgba(0,31, 61, 0.95)',GradientType=);
-
webkit-transitionbackground 0.4s ease;
-
moz-transitionbackground 0.4s ease;
-
ms-transitionbackground 0.4s ease;
-
o-transitionbackground 0.4s ease;
transitionbackground 0.4s ease;

Pero no se puede hacer la transición, pero cuando le pongo un color solido si se aprecia la transición, debo estar pasando algo por alto pero me rompo la cabeza y no logro a entenderlo, espero me puedan dar apoyo, para lograr este efecto.
__________________
Studio Web Salvador http://www.acuarel.pe/
  #2 (permalink)  
Antiguo 20/06/2014, 10:04
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.489
Antigüedad: 22 años, 4 meses
Puntos: 2114
Respuesta: Efecto de transición con colores degradados con css

No se puede hacer.

Y en esa web tampoco lo hacen. Ahí lo que hacen es tener un elemento con degradado donde cambian su opacidad; cuando no hay color, realmente el elemento no se ve, sólo cuando aparece el color. Y esa es la transición que tiene.

Sólo tienes que mirar un poco el código fuente.
__________________
(:
  #3 (permalink)  
Antiguo 21/06/2014, 18:29
 
Fecha de Ingreso: marzo-2012
Ubicación: New York
Mensajes: 11
Antigüedad: 12 años, 8 meses
Puntos: 1
Información Respuesta: Efecto de transición con colores degradados con css

Buen día, en efecto, no es posible añadir un efecto para ir de gradient a gradient, sin embargo lo que nosotros hacemos para crear este efecto es jugar con la propiedad background-position, al background-position si le puedes añadir efecto de transición, de modo que la idea que te muestro es la siguiente:
Primero tu gradient, debes partirlo en dos, el 50% del gradient será el estilo que deseas mostrar en un inicio y el restante siguiente 50% es el estilo final, cuando hagas la transición, de modo que tu gradient, al inicio únicamente se mostrará al 50% y lugo añadiendo un efecto de transición al background-position se mostrará el otro 50% restante y el primer 50% del gradient desaparece (espero expresarme con claridad, si no lo he logrado no dudes en indicarme tus dudas).
Te colocaré el código que usamos para hacer este efecto

Primero el código del botón en su estado inicial:

Código:
.boton{
    background: linear-gradient(to bottom, #ffec64 1%, #ffab23 40%, #ffec64 74%) repeat scroll 0 0 / 1px 80px rgba(0, 0, 0, 0);
    border: 1px solid #ffaa22;
    border-radius: 6px;
    box-shadow: 0 1px 0 0 #fff6af;
    color: #333333;
    display: inline-block;
    font-family: arial;
    font-size: 18px;
    font-weight: bold;
    margin: 10px;
    padding: 6px 24px;
    text-decoration: none;
    text-shadow: 0 1px 0 #ffee66;
    transition: all 0.2s ease-in 0s;
}
Nada particularmente especial por aquí :D

Luego tenemos el código del pseudo elemento "hover" el cuál nos quedaría asi:

Código:
.boton:hover{
    background-position: 160px center;
}
Cómo puedes observar, al hacer el efecto de transición en el atributo background-position, como resultado obtenemos un efecto de transición dentro de nuestro gradient, que en realidad no es el gradient el que estamos moviendo, pero nos da el efecto deseado :D

Te voy a colocar todo el código de un pequeño archivo HTML con este ejemplo para que puedas copiar y pegar, y ver el resultado:

Código HTML:
<!DOCTYPE html>
<html>
<head>    
<title>Boton con efecto de gradient</title>

<style media="screen" type="text/css">

.boton{
    background: linear-gradient(to bottom, #ffec64 1%, #ffab23 40%, #ffec64 74%) repeat scroll 0 0 / 1px 80px rgba(0, 0, 0, 0);
    border: 1px solid #ffaa22;
    border-radius: 6px;
    box-shadow: 0 1px 0 0 #fff6af;
    color: #333333;
    display: inline-block;
    font-family: arial;
    font-size: 18px;
    font-weight: bold;
    margin: 10px;
    padding: 6px 24px;
    text-decoration: none;
    text-shadow: 0 1px 0 #ffee66;
    transition: all 0.2s ease-in 0s;
}

.boton:hover{
    background-position: 160px center;
}

</style>

</head>
<body>

<a href="#" class="boton">Hola :)</a>

</body>
</html> 
Listo, si tienes dudas estamos para ayudar :)
Saludos.
  #4 (permalink)  
Antiguo 25/06/2014, 13:08
Avatar de WebSalvador  
Fecha de Ingreso: agosto-2011
Ubicación: Lima - Perú
Mensajes: 171
Antigüedad: 13 años, 4 meses
Puntos: 2
Respuesta: Efecto de transición con colores degradados con css

Muchas Gracias, busque y realmente no encontre la manera de hacerlo, pero si pude realizar el efecto, ya estaré subiendo el código para realizarlo.
__________________
Studio Web Salvador http://www.acuarel.pe/

Etiquetas: degradados, efecto, transicion
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 21:23.