Foros del Web » Creando para Internet » CSS »

Crear barra flotante HTML estilo "Series.ly"

Estas en el tema de Crear barra flotante HTML estilo "Series.ly" en el foro de CSS en Foros del Web. Hola, quería crear una barra flotante como la que usan en http://series.ly/scripts/ o http://bazzinga.es/vote (que tenga varios iconos y cada uno de ellos enlace a ...
  #1 (permalink)  
Antiguo 09/02/2015, 11:00
 
Fecha de Ingreso: febrero-2015
Mensajes: 2
Antigüedad: 4 años, 10 meses
Puntos: 0
Crear barra flotante HTML estilo "Series.ly"

Hola, quería crear una barra flotante como la que usan en http://series.ly/scripts/ o http://bazzinga.es/vote (que tenga varios iconos y cada uno de ellos enlace a una url especifica). ¿Como puedo hacerlo?

Un saludo y gracias :D
  #2 (permalink)  
Antiguo 09/02/2015, 11:27
Avatar de fede5426  
Fecha de Ingreso: diciembre-2014
Ubicación: Córdoba
Mensajes: 444
Antigüedad: 5 años
Puntos: 207
Respuesta: Crear barra flotante HTML estilo "Series.ly"

En esas webs que pasaste, es un contenedor <div> con position fixed. Dentro del div hay una lista, cada item con su respectivo enlace.

Este es el código que tiene series.ly

  #3 (permalink)  
Antiguo 09/02/2015, 11:54
 
Fecha de Ingreso: febrero-2015
Mensajes: 2
Antigüedad: 4 años, 10 meses
Puntos: 0
Respuesta: Crear barra flotante HTML estilo "Series.ly"

Cita:
Iniciado por fede5426 Ver Mensaje
En esas webs que pasaste, es un contenedor <div> con position fixed. Dentro del div hay una lista, cada item con su respectivo enlace.

Este es el código que tiene series.ly

Gracias!!

Soy novato total, lo del contenedor <div> quieres decir que es HTLM? PHP? En que parte del codigo tendria que meterlo?

Un saludo
  #4 (permalink)  
Antiguo 09/02/2015, 12:57
Avatar de GemliosG  
Fecha de Ingreso: enero-2015
Ubicación: La Habana
Mensajes: 153
Antigüedad: 4 años, 10 meses
Puntos: 8
De acuerdo Respuesta: Crear barra flotante HTML estilo "Series.ly"

Hola.

El codigo div va en el html.

Por ejemplo, aqui te voy a mostrar la división de un menú:

<div></div>

Eso para dividirlo, pero deben tener un identificador o una clase, aqui es cuando entra el css

id, es el master por así decirlo

class. es por si quieres que algun objeto dentro del div master tenga un diseño un poco diferente

En CSS cuando vas a darle forma a los dos es así:

ID:

#nombredelid{ las características que quieres tener, ya sea color, lineas, etc}

Class

.nombredelaclase{ lo mismo que arriba}

Es facil, ejemplo de un menú superior con id y uno de sus sub menús con class.

Código:
<div id="menu">
<ul>
<li>Home</li>
<li>Sobre nosotros</li>
<li class="menu1">AAA</li>
</ul>
</div>
Ahora después de esto en el CSS pon

Código:
#menu{ background: black;}
 .menu1{ background: red;}
Más o menos lo que hice fue que el menú tenga de fondo el color negro pero AAA tenga de fondo rojo.

Otra cosa que se me olvidaba.

En mi caso yo siempre creo un divisor para contenido, ya sabes donde pondré etiquetas form p h1 ul , etc

al crear el div le pongo con, pero para no tener que ponerle class a cada elemento que quiero diferente. Simplemente en el CSS declaro

#nombredelid p {}

Esto me modificará todas las etiquetas p del contenido o de la etiqueta que mongas.

Espero que te sea de utilidad
__________________
GemliosG
  #5 (permalink)  
Antiguo 09/02/2015, 13:03
Avatar de GemliosG  
Fecha de Ingreso: enero-2015
Ubicación: La Habana
Mensajes: 153
Antigüedad: 4 años, 10 meses
Puntos: 8
Respuesta: Crear barra flotante HTML estilo "Series.ly"

Mire tengo una duda, los efectos de cuando le paces por encima de alargarse es con CSS o con javascript, si es con alguno me puede recomendar donde puedo aprenderlos
__________________
GemliosG
  #6 (permalink)  
Antiguo 09/02/2015, 13:25
Avatar de fede5426  
Fecha de Ingreso: diciembre-2014
Ubicación: Córdoba
Mensajes: 444
Antigüedad: 5 años
Puntos: 207
Respuesta: Crear barra flotante HTML estilo "Series.ly"

En este caso en particular, está hecho con CSS.. Con la propiedad transition.
Por ejemplo

#capsule-widget ul li a{
Width: 52px; //definimos el ancho
Height: 52px; //definimos el alto
Transition: width 0.5s; //definimos la propiedad que queremos alterar y el tiempo, en este caso 0.5 segundos.
}

Y despues:

#capsule-widget ul li a:hover{
Width: 80px;
}

Con esto indicamos que queremos que al pasar el mouse por encima, el enlace pase de tener 52px a 80px.
  #7 (permalink)  
Antiguo 09/02/2015, 18:41
Avatar de fede5426  
Fecha de Ingreso: diciembre-2014
Ubicación: Córdoba
Mensajes: 444
Antigüedad: 5 años
Puntos: 207
Respuesta: Crear barra flotante HTML estilo "Series.ly"

Cita:
Iniciado por GemliosG Ver Mensaje
Mire tengo una duda, los efectos de cuando le paces por encima de alargarse es con CSS o con javascript, si es con alguno me puede recomendar donde puedo aprenderlos
Donde aprender, hay infinidad de lugares. Hay cursos básicos, cursos avanzados, de pago, gratuitos, en videos, en libros digitales, etc.. eso hablando de estudiar desde tu casa, seguramente en tu ciudad o en cercanias hay alguna institucion donde dicten clases de diseño y programacion web.

Etiquetas: barra, estilo, flotante, 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

SíEste tema le ha gustado a 1 personas




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