Foros del Web » Creando para Internet » CSS »

Se podrá hacer con CSS?

Estas en el tema de Se podrá hacer con CSS? en el foro de CSS en Foros del Web. Hola.. que tal? Bueno les cuento yo hace unos años hice unos botones con Flash.. y me gustaría cambiarlos por CSS.. sin embargo no querría ...
  #1 (permalink)  
Antiguo 11/03/2011, 09:30
 
Fecha de Ingreso: abril-2007
Ubicación: Tandil, Bs As, Argentina
Mensajes: 106
Antigüedad: 10 años, 8 meses
Puntos: 2
Se podrá hacer con CSS?

Hola.. que tal? Bueno les cuento yo hace unos años hice unos botones con Flash.. y me gustaría cambiarlos por CSS.. sin embargo no querría que mis usuarios notaran el cambio, por lo que los botones deberían quedar iguales.. o muy similares..

Estuve un buen rato probando combinaciones y buscando por la web pero no lo he logrado.. si alguien me puede dar una mano, yo encantado..

Les dejo el boton:

http://www.gigasize.com/get/r9po91pxm4d

Pesa solo 1Kb pero no lo puedo insertar directamente aca :S

Saludos y gracias!!
  #2 (permalink)  
Antiguo 12/03/2011, 21:48
Avatar de SPAWN3000  
Fecha de Ingreso: marzo-2008
Ubicación: Bogota
Mensajes: 858
Antigüedad: 9 años, 8 meses
Puntos: 15
Respuesta: Se podrá hacer con CSS?

Bueno, realmente no pude ver el boton...lo cierto es que si es solo una animacion, pueder crear una imagen gif (Que no ejecute un ciclo de repeticiones...), Ahora puedes hacer que en la propiedad hover, reemplaze la imagen estatica por la que tiene la animacion(Simuando flash). Y listo. (Recomendacion:Seria mucho mejor usar sprites--Esto para que no se note el espacion de carga entre el cambio de imagen que puede generar la primera vez que el usuario pasa el mouse sobre la imagen).

Espero te ayude, saludos...
  #3 (permalink)  
Antiguo 12/03/2011, 21:50
Avatar de SPAWN3000  
Fecha de Ingreso: marzo-2008
Ubicación: Bogota
Mensajes: 858
Antigüedad: 9 años, 8 meses
Puntos: 15
Respuesta: Se podrá hacer con CSS?

Ya lo visualize, y sipi, si se puede dejar igual....
  #4 (permalink)  
Antiguo 17/03/2011, 20:23
 
Fecha de Ingreso: abril-2007
Ubicación: Tandil, Bs As, Argentina
Mensajes: 106
Antigüedad: 10 años, 8 meses
Puntos: 2
Respuesta: Se podrá hacer con CSS?

Cita:
Iniciado por SPAWN3000 Ver Mensaje
Ya lo visualize, y sipi, si se puede dejar igual....
Hola, gracias x contestar y perdón la demora. Estuve rindiendo finales en la universidad jeje..

Se puede hacer con CSS eso? O sea.. no uso el flash o el cambio de imágenes xq mi barra de menú es variable y carga el campo nombre de una base de datos respecto a un query.. entonces cada vez que cargo la pagina se podría llegar a ver distinto a la anterior, además del hecho de poder agregar o quitar categorías sin tener que hacer nuevas imágenes o tocar mi código.. es el motivo por el cual quería recurrir al CSS.. Entonces se puede? Como sería?

Muchas gracias!
  #5 (permalink)  
Antiguo 17/03/2011, 21:07
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Se podrá hacer con CSS?

Hola megcapkill, crea una capa, y crea las dos imágenes (default y hover) en una sola usando sprites (aquí el generador online que uso yo)

luego cambias el background position de la imagen según el boton este en reposo o esté en hover.

ejemplo:
a{background-position:...esto esta en reposo...;}
a:hover{background-position:...esto esta en hover...;}

Espero te sea de utilidad. un abrazo.
  #6 (permalink)  
Antiguo 18/03/2011, 08:42
 
Fecha de Ingreso: abril-2007
Ubicación: Tandil, Bs As, Argentina
Mensajes: 106
Antigüedad: 10 años, 8 meses
Puntos: 2
Respuesta: Se podrá hacer con CSS?

No lo quiero hacer a partir de imágenes ya que lo que dicen los botones puede cambiar con una simple modificación de mi base de datos, y no es la idea estar atado a lo que dice el botón, ni tener que cambiarlo a cada momento. Gracias por el generador, me será útil para otra cosa, pero en este momento querría saber si se puede hacer a simple CSS, o sea, tener el formato de la animación definido y meterle el texto que sea..

Muchas gracias!
  #7 (permalink)  
Antiguo 18/03/2011, 09:32
Avatar de mdk
mdk
 
Fecha de Ingreso: noviembre-2002
Mensajes: 531
Antigüedad: 15 años, 1 mes
Puntos: 11
Respuesta: Se podrá hacer con CSS?

Si, puedes hacerlo mediante scrites como ya te han dicho, de forma, que solo cambies el texto y los links de los botones, las imágenes si las hicieras en formato png para que fuera transparente el fondo sobre el que irian las rayas, sería lo mejor, y luego metiendo un tiempo entre cada imagen para que se note la animación. Tendrías que recurrir también a javascript si deseas esa animación.
__________________
SoY Lo Ke VeS iNKLuSo KuAnDo No Me VeS ;)
  #8 (permalink)  
Antiguo 18/03/2011, 13:49
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Se podrá hacer con CSS?

Megcapkill, coincido con mdk, si el texto cambia cuando el raton se pose en hover, sería en mi humilde opinión demasiado rebuscado hacerlo solo con css. mas bien lo haría con jquery que te garantiza que va a funcionar incluso en ie6. creando una capa padre relativa y dos hijas absolutas con el texto (dinámico) adentro. y que al producirse el hover sobre la caja padre cambien las coordenadas de posicion las cajas hijas o bien cambien su valor de display (none por block y viceversa).

Saludos.

pd: fijate este enlace, busca el efecto hover, ahi tienes un ejemplo.
  #9 (permalink)  
Antiguo 18/03/2011, 16:48
 
Fecha de Ingreso: abril-2007
Ubicación: Tandil, Bs As, Argentina
Mensajes: 106
Antigüedad: 10 años, 8 meses
Puntos: 2
Respuesta: Se podrá hacer con CSS?

Mmm ahí lo estuve mirando, pero no entendí demasiado, lo miraré con más profundidad.

Intenté hacer algo con cambio de imágenes. Puse la imagen quieta y al hacer rollover lo cambiaba por un gif que hacia el movimiento de la barras y su cambio de color (no se xq en el gif se ve muy entrecortado)

Lo que me mató fue que el color del texto cambia después de un cierto tiempo de iniciado el gif, y bueno me enroqué y nada bueno ocurrió luego. Les dejo el código que intenté (con javascript):

Código Javascript:
Ver original
  1. <script>
  2.     function colorear(src, colorActual) {
  3.         src.style.color=colorActual;
  4.     }
  5.     function hover(src, colorActual) {
  6.         src.style.background="url(img/menu2.png)";
  7.         colorear(src, colorActual);
  8.     }
  9.     function hout(src, colorActual) {
  10.         src.style.background="url(img/menu1.png)";
  11.         colorear(src, colorActual);
  12.     }
  13. </script>

Y lo llamo con:

Código HTML:
Ver original
  1. <div class="barra">
  2.                 <ul>
  3.  
  4. <?php
  5.     $sec_select="SELECT SEC_ID, SEC_nombre, SEC_orden FROM SECCION WHERE SEC_catID='" . $categoriaActual . "' ORDER BY SEC_orden";
  6.     $sec_result = mysql_query($sec_select) or die(mysql_error());
  7.     while ($sec = mysql_fetch_array($sec_result, MYSQL_BOTH)) {
  8.         $nombreSeccion = strtoupper($sec["SEC_nombre"]);
  9.         if ($sec["SEC_ID"] == $seccionActual) {
  10.             ?> <li style="background:url(img/menu1.png); background-repeat:no-repeat"> <?php echo $nombreSeccion . "</li>";
  11.         } else {
  12.             ?> <li style="background:url(img/menu1.png); background-repeat:no-repeat"><a href="javascript:avanzar(<?php echo $categoriaActual; ?>,<?php echo $sec["SEC_ID"]; ?>,1)" onmouseover="hover(this,'red')" onmouseout="hout(this,'black')"><?php echo $nombreSeccion; ?></a></li> <?php
  13.         }
  14.     } ?>
  15.    
  16.                 </ul>
  17.             </div>

Y el CSS:

Código CSS:
Ver original
  1. .barra ul {
  2. padding-left: 0;
  3. margin-left: 0;
  4. float: center;
  5. width: 100%;
  6. font-family: Tahoma, arial;
  7. }
  8.  
  9. .barra ul li {
  10. display: inline;
  11. }

O sea, las barritas de la animación son las mismas para todos los botones, lo que cambia es el texto de uno a otro. Por eso tengo que independizar ambas partes es la animación. Eso es lo que me está llevando a mis problemas :(

Muchas gracias a todos!!

Etiquetas: Ninguno
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

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 18:39.