Foros del Web » Creando para Internet » CSS »

Diseñar botones de reproducción de vídeo

Estas en el tema de Diseñar botones de reproducción de vídeo en el foro de CSS en Foros del Web. Hola, no tengo mucha idea sobre diseño pero tengo que diseñar unos botones para un reproductor de vídeo, es decir, los típicos botones de play, ...
  #1 (permalink)  
Antiguo 11/01/2011, 07:29
 
Fecha de Ingreso: marzo-2010
Mensajes: 40
Antigüedad: 7 años, 8 meses
Puntos: 1
Diseñar botones de reproducción de vídeo

Hola, no tengo mucha idea sobre diseño pero tengo que diseñar unos botones para un reproductor de vídeo, es decir, los típicos botones de play, pause,...
No sé si esto podré realizarlo exclusivamente mediante css o si tendré que usar otras alternativas. ¿Qué me podéis aconsejar?
  #2 (permalink)  
Antiguo 11/01/2011, 07:31
 
Fecha de Ingreso: marzo-2010
Mensajes: 40
Antigüedad: 7 años, 8 meses
Puntos: 1
Respuesta: Diseñar botones de reproducción de vídeo

Otra opción supongo que sería mediante diseño gráfico, diseñando imágenes y cosas así, pero de esto si que no tengo ni idea, ni tampoco conozco ningún programa ni nada.
  #3 (permalink)  
Antiguo 11/01/2011, 08:03
 
Fecha de Ingreso: noviembre-2009
Ubicación: Colombía
Mensajes: 311
Antigüedad: 8 años
Puntos: 17
Respuesta: Diseñar botones de reproducción de vídeo

¿CSS? Creo que debería ir a diseño gráfico.

Como diseñar: Diseño Gráfico - Como implementar: CSS.

PD: Puedes buscar en este mismo foro o en google:

Adobe Photoshop
Adobe illustrator

En ambos puedes realizar grandes diseños para botones y lo que quieras, en caso de buscar botones en internet:

http://www.todo-photoshop.com/tutori...p_botones.html

Tutoriales de crear botones para Photoshop.

Cuando tengas dudas, públicalas pero en su categoria correcta.

Saludos!
  #4 (permalink)  
Antiguo 11/01/2011, 10:54
Avatar de Ruben_JD  
Fecha de Ingreso: diciembre-2003
Ubicación: Quito-Ecuador
Mensajes: 218
Antigüedad: 14 años
Puntos: 7
Respuesta: Diseñar botones de reproducción de vídeo

Wasp1978 deacuerdo con PrendekZ, te recomiendo utilizar photoshop para el diseño de los botones, en css utilizaria efectos sobre con imagenes sprites, si utilizas flash para tu reproductor de video solo coloca la imagen de fondo para el boton, pero si no es tu reproductor y quieres modificarlo, tendrias que utilizar codigo para modificarlo por ejemplo html5 para modificar reproductores tipo youtube, o utilizar reproductores personalizables por ejemplo uno pagado o un free .
Suerte
__________________
RubénJ. Regresando al foro despues de un par de años. A preguntar más de las novedades del foro.
  #5 (permalink)  
Antiguo 12/01/2011, 02:39
 
Fecha de Ingreso: marzo-2010
Mensajes: 40
Antigüedad: 7 años, 8 meses
Puntos: 1
Respuesta: Diseñar botones de reproducción de vídeo

Gracias a los dos por vuestra ayuda.
PrendekZ, lo había colocado en CSS porque pensaba que solo usando CSS lo podría hacer. De hecho en este enlace podemos ver un reproductor cuyas skins están implementadas con CSS (según dice en la página):

http://videojs.com/

Entonces, ¿no podría hacerlo usando solo CSS?
  #6 (permalink)  
Antiguo 12/01/2011, 09:17
 
Fecha de Ingreso: noviembre-2009
Ubicación: Colombía
Mensajes: 311
Antigüedad: 8 años
Puntos: 17
Respuesta: Diseñar botones de reproducción de vídeo

Sí, pero botones bien "bonitos" y a tú gusto primero va la parte gráfica en un diseño, después con CSS lo implementas.

Saludos!
  #7 (permalink)  
Antiguo 12/01/2011, 09:34
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Diseñar botones de reproducción de vídeo

Cita:
Iniciado por Wasp1978 Ver Mensaje
Gracias a los dos por vuestra ayuda.
PrendekZ, lo había colocado en CSS porque pensaba que solo usando CSS lo podría hacer. De hecho en este enlace podemos ver un reproductor cuyas skins están implementadas con CSS (según dice en la página):

http://videojs.com/

Entonces, ¿no podría hacerlo usando solo CSS?
Sí, claro que está realizado con css (el central de play). Y es tan sencillo como:
Código CSS:
Ver original
  1. div.vjs-big-play-button {
  2.     -moz-border-radius: 20px 20px 20px 20px;
  3.     -moz-box-shadow: 4px 4px 8px #000000;
  4.     background: -moz-linear-gradient(center top , #0B151A, #1F3744) repeat scroll left 40px #1F3744;
  5.     border: 3px solid #FFFFFF;
  6.     cursor: pointer !important;
  7.     display: none;
  8.     height: 80px;
  9.     left: 50%;
  10.     margin: -43px 0 0 -43px;
  11.     opacity: 0.9;
  12.     position: absolute;
  13.     text-align: center;
  14.     top: 50%;
  15.     width: 80px;
  16.     z-index: 2;
  17.  
  18.  
  19. }
  20.  
  21.  
  22. div.vjs-big-play-button span {
  23.     border-bottom: 20px solid transparent;
  24.     border-left: 40px solid #FFFFFF;
  25.     border-top: 20px solid transparent;
  26.     display: block;
  27.     font-size: 0;
  28.     height: 0;
  29.     line-height: 0;
  30.     margin: 20px 0 0 23px;
  31.     width: 0;
  32. }
y el html
Código HTML:
Ver original
  1. <div class="vjs-big-play-button" style="display: block;">
  2.        <span></span>
  3. </div>

Pero fíjese en las advertencias:
No es válido para ninguna de las versiones estables de ie (incluida la 8).

Así que programa de dibujo o diseño gráfico.
  #8 (permalink)  
Antiguo 13/01/2011, 02:54
 
Fecha de Ingreso: marzo-2010
Mensajes: 40
Antigüedad: 7 años, 8 meses
Puntos: 1
Respuesta: Diseñar botones de reproducción de vídeo

Bueno, tan sencillo, tan sencillo xD . Es que soy un poco nueva en cuanto a diseño, pero me cogeré algun manual de CSS y me pondré a ello, aunque si alguien me puede aclarar estas líneas lo agradecería:

Código:
    -moz-border-radius: 20px 20px 20px 20px;
    -moz-box-shadow: 4px 4px 8px #000000;

    cursor: pointer !important;
Gracias por tu ayuda.

Por cierto, aunque no tiene que ver con el mismo asunto aprovecho el hilo. En el código html has puesto una etiqueta span, ¿porqué? es que no comprendo bien cuando hay que usarlo y que es lo que hace exactamente.
  #9 (permalink)  
Antiguo 13/01/2011, 10:16
Avatar de Ruben_JD  
Fecha de Ingreso: diciembre-2003
Ubicación: Quito-Ecuador
Mensajes: 218
Antigüedad: 14 años
Puntos: 7
Respuesta: Diseñar botones de reproducción de vídeo

Cita:
Iniciado por Wasp1978 Ver Mensaje
... me puede aclarar estas líneas lo agradecería:

Código:
    -moz-border-radius: 20px 20px 20px 20px;
    -moz-box-shadow: 4px 4px 8px #000000;

    cursor: pointer !important;
Gracias por tu ayuda.
la primera te da el valor de la curva para las esquinas redondeadas, arriba izq, arriba der, abajo izq, abajo der.
la segunda es para darle sombra a la caja redondeada, distancia, tamaño posicion y color de la sombra, son dos codigos implementados por Mozilla
y la tercera es para que el cursor al pasarlo sobre el boton se cambie de fecha = default a la manito = pointer, inportant es solo para que lo obligue a hacerlo.

Te dejo unas webs para que veas y aprendas un poco mas, web1 , web2, web3 , web4

lee detenidamente y busca la compatibilidad de navegadores y hacks disponibles, tambien de comentarios donde digan que no funciona con ie, utiliza esos botones y date tu toque personal.
Suerte.
__________________
RubénJ. Regresando al foro despues de un par de años. A preguntar más de las novedades del foro.

Última edición por Ruben_JD; 13/01/2011 a las 10:18 Razón: se elimino un quote
  #10 (permalink)  
Antiguo 14/01/2011, 04:05
 
Fecha de Ingreso: marzo-2010
Mensajes: 40
Antigüedad: 7 años, 8 meses
Puntos: 1
Respuesta: Diseñar botones de reproducción de vídeo

Wooowww, muchísimas gracias Ruben_JD. Me va a venir fenomenal tu explicación y todos los enlaces. Gracias
  #11 (permalink)  
Antiguo 17/01/2011, 03:38
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Diseñar botones de reproducción de vídeo

Hola:

Cita:
Iniciado por Ruben_JD Ver Mensaje
... deacuerdo con PrendekZ, te recomiendo utilizar photoshop para el diseño de los botones...
Yo hay cosas que no entiendo, primero está diciendo que de diseño no tiene mucha idea y le recomendais, para hacer unos botones, que se compre el photoshop ¿Cuanto vale? ¿1000€?

Hay alternativas gratuitas, echarle un vistazo a estos ejemplos: http://www.forosdelweb.com/f6/progra...torial-287581/

Saludos.


Etiquetas: botones, diseño
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 04:19.