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

[Wasp1978]

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?

[Wasp1978]

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.

[PrendekZ]

¿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!

[Ruben_JD]

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

[Wasp1978]

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?

[PrendekZ]

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!

[kseso?]

Iniciado por Wasp1978

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:

div.vjs-big-play-button {
    -moz-border-radius: 20px 20px 20px 20px;
    -moz-box-shadow: 4px 4px 8px #000000;
    background: -moz-linear-gradient(center top , #0B151A, #1F3744) repeat scroll left 40px #1F3744;
    border: 3px solid #FFFFFF;
    cursor: pointer !important;
    display: none;
    height: 80px;
    left: 50%;
    margin: -43px 0 0 -43px;
    opacity: 0.9;
    position: absolute;
    text-align: center;
    top: 50%;
    width: 80px;
    z-index: 2;
 
 
}
 
 
div.vjs-big-play-button span {
    border-bottom: 20px solid transparent;
    border-left: 40px solid #FFFFFF;
    border-top: 20px solid transparent;
    display: block;
    font-size: 0;
    height: 0;
    line-height: 0;
    margin: 20px 0 0 23px;
    width: 0;
}
 

y el html

Código HTML:

<div class="vjs-big-play-button" style="display: block;">
       <span></span>
</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.

[Wasp1978]

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.

[Ruben_JD]

Iniciado por Wasp1978

... 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.

[Wasp1978]

Wooowww, muchísimas gracias Ruben_JD. Me va a venir fenomenal tu explicación y todos los enlaces. Gracias

[jomaruro]

Hola:

Iniciado por Ruben_JD

... 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.