Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Consulta - Borde animado en CSS

 Estas en el tema de Consulta - Borde animado en CSS en el foro de CSS en Foros del Web. Buenos días! Tengo armado el siguiente menú con CSS. @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código CSS: Ver original <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > <html ...
  #1 (permalink)  
Antiguo 04/10/2014, 08:37
 
Fecha de Ingreso: julio-2008
Mensajes: 57
Antigüedad: 16 años, 4 meses
Puntos: 0
Consulta - Borde animado en CSS
Buenos días! Tengo armado el siguiente menú con CSS.

Código CSS: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <title></title>
  6. <style>
  7. #menu ul {
  8.     margin:0;
  9.     padding:0;
  10.     float:left;
  11.     list-style-type:none;
  12. }
  13. #menu li {
  14.     float:left;
  15.     margin-left:30px;
  16. }
  17. #menu a {
  18.     display:block;
  19.     font-family:Arial, Helvetica, sans-serif;
  20.     font-size:13px;
  21.     color:#323839;
  22.     text-decoration:none;
  23.     padding-bottom:12px;
  24. }
  25. #menu a:hover {
  26.     border-bottom:2px solid #cbdb2b;
  27. }
  28. #menu .active {
  29.     color:#5a6265;
  30.     border-bottom:2px solid #cbdb2b;
  31. }
  32. </style>
  33. </head>
  34. <body>
  35. <div id="menu">
  36.   <ul>
  37.     <li><a href="#" class="active">HOME</a></li>
  38.     <li><a href="#">QUIENES SOMOS</a></li>
  39.     <li><a href="#">PRODUCTOS</a></li>
  40.     <li><a href="#">CONTÁCTENOS</a></li>
  41.   </ul>
  42. </div>
  43. </body>
  44. </html>

Lo que necesito es animar el borde al hacer Hover, o sea que el borde se cree de 0 a 100, en lugar de aparecer directamente.

Me podrán orientar como lograr ese efecto?

Tengo entendido que con la propiedad moz-transition se pueden animar, pero no encuentro ningún ejemplo, me podrán ayudar?

Muchas gracias de antemano!
Última edición por pzin; 04/10/2014 a las 10:19
  #2 (permalink)  
Antiguo 04/10/2014, 09:42
 
Fecha de Ingreso: julio-2008
Mensajes: 57
Antigüedad: 16 años, 4 meses
Puntos: 0
Respuesta: Consulta - Borde animado en CSS
Aca encontré una página que tiene el mismo efecto que necesito:

http://demos.codexcoder.com/biz-demo/video-parallax/

Me podrán ayudar?

Mil gracias!
  #3 (permalink)  
Antiguo 04/10/2014, 15:45
Avatar de siddartha23  
Fecha de Ingreso: septiembre-2013
Mensajes: 357
Antigüedad: 11 años, 2 meses
Puntos: 39
Respuesta: Consulta - Borde animado en CSS
El borde no está animado, sino un pseudo-elemento :before ubicado con posicionamiento absoluto. Solo tienes que añadirle a tus enlaces la propiedad position: relative y luego crear el pseudo-elemento a:before con width 0 y left 50% para que no se vea y quede al medio, le das un height de 2px, le pones el color de fondo y le añades el transition a la velocidad que gustes, en tu página de ejemplo le dan .25s ease-in.

Al hacer hover sobre cada enlace (a:hover:before) le das un width de 100% y left 0.
__________________
velarde23.com - Soluciones Web
  #4 (permalink)  
Antiguo 04/10/2014, 17:11
 
Fecha de Ingreso: julio-2008
Mensajes: 57
Antigüedad: 16 años, 4 meses
Puntos: 0
Respuesta: Consulta - Borde animado en CSS
Pude lograr la animación de la siguiente manera:

Código CSS: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <title></title>
  6. <style>
  7. #menu ul {
  8.     margin:0;
  9.     padding:0;
  10.     float:left;
  11.     list-style-type:none;
  12. }
  13. #menu li {
  14.     float:left;
  15.     margin-left:30px;
  16. }
  17. #menu a {
  18.     display:block;
  19.     font-family:Arial, Helvetica, sans-serif;
  20.     font-size:13px;
  21.     color:#323839;
  22.     text-decoration:none;
  23.     padding-bottom:12px;
  24.     position:relative;
  25. }
  26. #menu a:hover:before {
  27.     width:100%;
  28. }
  29. #menu a:before {
  30.     content:"";
  31.     display:block;
  32.     position:absolute;
  33.     left:0;
  34.     bottom:0;
  35.     height:2px;
  36.     width:0;
  37.     background:#cbdb2b;
  38.  -webkit-transition:width .20s;
  39.  -moz-transition:width .20s;
  40.  -ms-transition:width .20s;
  41.  -o-transition:width .20s;
  42.  transition:width .20s;
  43. }
  44. </style>
  45. </head>
  46. <body>
  47. <div id="menu">
  48.   <ul>
  49.     <li><a href="#" class="active">HOME</a></li>
  50.     <li><a href="#">QUIENES SOMOS</a></li>
  51.     <li><a href="#">PRODUCTOS</a></li>
  52.     <li><a href="#">CONTÁCTENOS</a></li>
  53.   </ul>
  54. </div>
  55. </body>
  56. </html>

Ahora lo que me está faltando es que la animación arranque desde el medio hacia afuera, porque lo que logré es que se anime de izquierda a derecha.

Que le tendré que modificar? Es posible?
Última edición por pzin; 05/10/2014 a las 01:01 Razón: Sacar el highlight de la cita (?)
  #5 (permalink)  
Antiguo 04/10/2014, 17:35
Avatar de siddartha23  
Fecha de Ingreso: septiembre-2013
Mensajes: 357
Antigüedad: 11 años, 2 meses
Puntos: 39
Respuesta: Consulta - Borde animado en CSS
Modifica su posición inicial a left 50% para que quede al medio y en el hover lo mueves a left 0, la transición tienes que aplicarla a todas las propiedades (all) no solo al width...
__________________
velarde23.com - Soluciones Web
Última edición por siddartha23; 04/10/2014 a las 17:45
  #6 (permalink)  
Antiguo 04/10/2014, 17:46
 
Fecha de Ingreso: julio-2008
Mensajes: 57
Antigüedad: 16 años, 4 meses
Puntos: 0
Respuesta: Consulta - Borde animado en CSS
Lo modifiqué como me indicaste, pero hace un comportamiento raro:

Te paso el código de como quedó:

Código CSS: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.     <html xmlns="http://www.w3.org/1999/xhtml">
  3.     <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5.     <title></title>
  6.     <style>
  7.     #menu ul {
  8.         margin:0;
  9.         padding:0;
  10.         float:left;
  11.         list-style-type:none;
  12.     }
  13.     #menu li {
  14.         float:left;
  15.         margin-left:30px;
  16.     }
  17.     #menu a {
  18.         display:block;
  19.         font-family:Arial, Helvetica, sans-serif;
  20.         font-size:13px;
  21.         color:#323839;
  22.         text-decoration:none;
  23.         padding-bottom:12px;
  24.         position:relative;
  25.     }
  26.     #menu a:hover:before {
  27.         width:100%;
  28.         left:0;
  29.     }
  30.     #menu a:before {
  31.         content:"";
  32.         display:block;
  33.         position:absolute;
  34.         left:50%;
  35.         bottom:0;
  36.         height:2px;
  37.         width:0;
  38.         background:#cbdb2b;
  39.      -webkit-transition:width .20s;
  40.      -moz-transition:width .20s;
  41.      -ms-transition:width .20s;
  42.      -o-transition:width .20s;
  43.      transition:width .20s;
  44.     }
  45.     </style>
  46.     </head>
  47.     <body>
  48.     <div id="menu">
  49.       <ul>
  50.         <li><a href="#" class="active">HOME</a></li>
  51.         <li><a href="#">QUIENES SOMOS</a></li>
  52.         <li><a href="#">PRODUCTOS</a></li>
  53.         <li><a href="#">CONTÁCTENOS</a></li>
  54.       </ul>
  55.     </div>
  56.     </body>
  57.     </html>

Raro no?
Última edición por pzin; 05/10/2014 a las 01:01 Razón: Sacar el highlight de la cita (?)
  #7 (permalink)  
Antiguo 04/10/2014, 17:49
Avatar de siddartha23  
Fecha de Ingreso: septiembre-2013
Mensajes: 357
Antigüedad: 11 años, 2 meses
Puntos: 39
Respuesta: Consulta - Borde animado en CSS
te falta modificar el transition: all y queda!!!
__________________
velarde23.com - Soluciones Web
  #8 (permalink)  
Antiguo 04/10/2014, 18:11
 
Fecha de Ingreso: julio-2008
Mensajes: 57
Antigüedad: 16 años, 4 meses
Puntos: 0
Respuesta: Consulta - Borde animado en CSS
Ahora me falta solamente que el active quede bien!

Código CSS: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <title></title>
  6. <style>
  7. #menu ul {
  8.     margin:0;
  9.     padding:0;
  10.     float:left;
  11.     list-style-type:none;
  12. }
  13. #menu li {
  14.     float:left;
  15.     margin-left:30px;
  16. }
  17. #menu a {
  18.     display:block;
  19.     font-family:Arial, Helvetica, sans-serif;
  20.     font-size:13px;
  21.     color:#323839;
  22.     text-decoration:none;
  23.     padding-bottom:10px;
  24.     position:relative;
  25. }
  26. #menu a:before {
  27.     content:"";
  28.     display:block;
  29.     position:absolute;
  30.     left:50%;
  31.     bottom:0;
  32.     height:2px;
  33.     width:0;
  34.     background:#cbdb2b;
  35.  -webkit-transition:width .20s;
  36.  -moz-transition:width .20s;
  37.  -ms-transition:width .20s;
  38.  -o-transition:width .20s;
  39.  transition:all .20s;
  40. }
  41. #menu a:hover:before {
  42.     width:100%;
  43.     left:0;
  44. }
  45. #menu li.active a:before {
  46.     width:100%;
  47. }
  48. </style>
  49. </head>
  50. <body>
  51. <div id="menu">
  52.   <ul>
  53.     <li class="active"><a href="#">HOME</a></li>
  54.     <li><a href="#">QUIENES SOMOS</a></li>
  55.     <li><a href="#">PRODUCTOS</a></li>
  56.     <li><a href="#">CONTÁCTENOS</a></li>
  57.   </ul>
  58. </div>
  59. </body>
  60. </html>

Me darías una mano por favor?

Ya casi termino!

Mil gracias!
Última edición por pzin; 05/10/2014 a las 01:02 Razón: Sacar el highlight de la cita (?)
  #9 (permalink)  
Antiguo 04/10/2014, 18:31
Avatar de siddartha23  
Fecha de Ingreso: septiembre-2013
Mensajes: 357
Antigüedad: 11 años, 2 meses
Puntos: 39
Respuesta: Consulta - Borde animado en CSS
No es tan complicado amigo, en el .active el pseudo-elemento ocupa el 100% del enlace pero aparece al medio por que esta ubicado a un 50% de la izquierda, muévelo a 0... suerte!
__________________
velarde23.com - Soluciones Web

Etiquetas: color, hover, html
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


« Tema Anterior | Próximo Tema »


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