Foros del Web » Creando para Internet » CSS »

Efecto Maestros del web

Estas en el tema de Efecto Maestros del web en el foro de CSS en Foros del Web. Hola amigos, una pregunta que seguro para ustedes sera simple. Como hago el efecto que hacen en los comentarios de maestros del web. Es decir, ...
  #1 (permalink)  
Antiguo 02/06/2008, 23:00
Avatar de Celcius  
Fecha de Ingreso: febrero-2003
Ubicación: Lima - Perú
Mensajes: 652
Antigüedad: 14 años, 10 meses
Puntos: 5
Efecto Maestros del web

Hola amigos, una pregunta que seguro para ustedes sera simple. Como hago el efecto que hacen en los comentarios de maestros del web. Es decir, cuando uno posa el mouse sobre un comentario, éste cambia de color en su borde izquierdo. alguien me podria facilitar el codigo Css de ese efecto? muchas gracias.
__________________
"Si tú conocieras el don de Dios, y quién es el que te dice: 'Dame de beber,' tú Le habrías pedido a El, y El te hubiera dado agua viva.
Sn. Juan 4:19
Jesus
  #2 (permalink)  
Antiguo 03/06/2008, 02:28
 
Fecha de Ingreso: marzo-2008
Mensajes: 166
Antigüedad: 9 años, 8 meses
Puntos: 5
Respuesta: Efecto Maestros del web

Solo es un efecto hover... ejemplo

div.autorcomentario:hover {

border-left-color: #000;

}

Se lo puedes aplicar casi a cualquier elemento, hasta a un h1...

Saludos ;)
  #3 (permalink)  
Antiguo 03/06/2008, 02:47
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Efecto Maestros del web

Cita:
Iniciado por GastoNike Ver Mensaje
Se lo puedes aplicar casi a cualquier elemento, hasta a un h1...
Ojo, pero no para explorer 6 y anteriores, que sólo funciona con lo enlaces (a).

Mikel.
  #4 (permalink)  
Antiguo 03/06/2008, 10:12
Avatar de Celcius  
Fecha de Ingreso: febrero-2003
Ubicación: Lima - Perú
Mensajes: 652
Antigüedad: 14 años, 10 meses
Puntos: 5
Respuesta: Efecto Maestros del web

Hola amigos, agradezco mucho su respuesta. Pero mi pregunta seria respecto hacer eso utilizando la etiqueta <b> del html, es que mis conocimientos de Css son bastante basicos, pero me gustaria aprender mas... solo que ésta semana debo presentar un trabajo y quiero ponerle ese efecto.Alguien me diga como hacerlo con la etiqueta <b> por favor... muchas gracias
__________________
"Si tú conocieras el don de Dios, y quién es el que te dice: 'Dame de beber,' tú Le habrías pedido a El, y El te hubiera dado agua viva.
Sn. Juan 4:19
Jesus
  #5 (permalink)  
Antiguo 03/06/2008, 10:59
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Efecto Maestros del web

¿Con la etiqueta b? No se puede. No te entiendo.

Mikel.
  #6 (permalink)  
Antiguo 03/06/2008, 12:37
 
Fecha de Ingreso: marzo-2008
Mensajes: 166
Antigüedad: 9 años, 8 meses
Puntos: 5
Respuesta: Efecto Maestros del web

Explícate mejor
  #7 (permalink)  
Antiguo 03/06/2008, 14:29
Avatar de Celcius  
Fecha de Ingreso: febrero-2003
Ubicación: Lima - Perú
Mensajes: 652
Antigüedad: 14 años, 10 meses
Puntos: 5
Respuesta: Efecto Maestros del web

Con gusto,
Como me mencionan que se puede aplicar a casi cualquier elemento como un <h1>, pienso que tambien es aplicable a una etiqueta <b>... si me equivoco me gustaria me digan porque no se puede... muchas graicias por su ayuda.

Saludos
__________________
"Si tú conocieras el don de Dios, y quién es el que te dice: 'Dame de beber,' tú Le habrías pedido a El, y El te hubiera dado agua viva.
Sn. Juan 4:19
Jesus
  #8 (permalink)  
Antiguo 03/06/2008, 16:39
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Efecto Maestros del web

En primer lugar, en mi primera respuesta te decía que:

Cita:
Ojo, pero no para explorer 6 y anteriores, que sólo funciona con lo enlaces (a).
Y en segundo lugar, ¿por qué con la etiqueta b? creo que es eso lo que no entendemos, porque carece de sentido. Deberías explicar bien qué tienes y querrías hacer, para poder aconsejarte.

Mikel.
  #9 (permalink)  
Antiguo 03/06/2008, 16:51
Avatar de Celcius  
Fecha de Ingreso: febrero-2003
Ubicación: Lima - Perú
Mensajes: 652
Antigüedad: 14 años, 10 meses
Puntos: 5
Respuesta: Efecto Maestros del web

En primer lugar, no conosco mucho de Css y espero me comprendan. Paso a explicarles que deseo hacer:

Deseo crear un menú con un cambio de color del fondo y los bordes cuando pase el cursor de Mouse encima. Lei por ahi que puedo usar Divs, pero me marea un poco ese tema por ahora, ustedes que me sugieren?
__________________
"Si tú conocieras el don de Dios, y quién es el que te dice: 'Dame de beber,' tú Le habrías pedido a El, y El te hubiera dado agua viva.
Sn. Juan 4:19
Jesus
  #10 (permalink)  
Antiguo 03/06/2008, 16:52
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.547
Antigüedad: 15 años, 8 meses
Puntos: 1262
Respuesta: Efecto Maestros del web

Hola:

Si no me equivoco el :hover debería funcionar en todas las etiquetas visibles, pero con explorer no... ese efecto solo sería posible con javascript, programando los eventos mouseover/mouseout.

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #11 (permalink)  
Antiguo 03/06/2008, 17:04
Avatar de Celcius  
Fecha de Ingreso: febrero-2003
Ubicación: Lima - Perú
Mensajes: 652
Antigüedad: 14 años, 10 meses
Puntos: 5
Respuesta: Efecto Maestros del web

Hola, supongo que no me entendieron la pregunta y siento no haberme explicado correctamente. Lo logré y pégo el código para que lo vean (Utilicé la etiqueta <a>)

Código HTML:
a {
 font-size:10pt;
 font-family:verdana,tahoma,arial;
 height:50px;
 width:200px;
 background-color:#E3F4FD;
 border-left: #72C6F3 solid 5px;
 border-bottom: #72C6F3 solid 2px;
 margin-top:1px;
 padding-left:5pt;
 padding-top:13pt;
 text-align:left;
}
a:hover {
 font-size:10pt;
 font-family:verdana,tahoma,arial;
 background-color:#CDEBFC;
 height:50px;
 width:200px;
 border-left: #000000 solid 5px;
 border-bottom: #000000 solid 2px;
 margin-top:1px;
 padding-left:5pt;
 padding-top:13pt;
 text-align:left;
}
Bueno ahora si me funciona, muchas gracias por la atención.
__________________
"Si tú conocieras el don de Dios, y quién es el que te dice: 'Dame de beber,' tú Le habrías pedido a El, y El te hubiera dado agua viva.
Sn. Juan 4:19
Jesus
  #12 (permalink)  
Antiguo 03/06/2008, 17:06
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Efecto Maestros del web

Cita:
Iniciado por Celcius Ver Mensaje
En primer lugar, no conosco mucho de Css y espero me comprendan. Paso a explicarles que deseo hacer:

Deseo crear un menú con un cambio de color del fondo y los bordes cuando pase el cursor de Mouse encima. Lei por ahi que puedo usar Divs, pero me marea un poco ese tema por ahora, ustedes que me sugieren?
Eso ya es otra cosa.

Si vas a hacer un menú, el menú tendrá enlaces. Entonces, en los enlaces puedes aplicar el pseudo elemento :hover, que produce el efecto que quieres, como ya te habíamos comentado.

Eso se aplica en la hoja de estilo. Sería de esta manera: si creas tu menú con enlaces (etiquetas a) de esta manera por ejemplo:

<a href="#">Un enlace</a>

ahora en la css pones algo así:

a {color: #fff; background-color: #f00;}
a:hover {color: #f00; background-color: #fff; border: solid #f0f;}

por ejemplo, pudiendo poner en ambas etiquetas los estilos que más te gusten.

Espero haberme esplicado bien y que lo sepas aplicar:

Mikel.

EDITO: bueno, ponía mi respueta a la vez que la tuya. Ya veo que lo has resuelto.
  #13 (permalink)  
Antiguo 03/06/2008, 17:17
Avatar de juaniquillo
Colaborador
 
Fecha de Ingreso: noviembre-2005
Ubicación: San Juan, Puerto Rico
Mensajes: 5.745
Antigüedad: 12 años
Puntos: 281
Respuesta: Efecto Maestros del web

Es cierto lo que dice Mikel, esto no funciona en IE6 o anteriores. en el caso del foro el efecto no es una prioridad y por eso no importa si lo usas no funciona en IE6. Tú tienes que decidir si el efecto en tu caso es esencial o no. Si fuera esencial lo mejor es usar javascript. Por cierto, este es el estilo que usa el foro:

Código HTML:
.tdtitle {font-size:13px;}
.tdtitle:hover{background:#eee;}
en cuanto a lo del elemento <b>, creo que sería mejor que lo usaras en un elemento bloque y con algo de padding para que se vea mejor el efecto.

EDITO:

Ja, me tarde mucho en responder.
__________________
Por fin.. tengo algo parecido a un blog
Y por lo visto ya estoy escribiendo...
  #14 (permalink)  
Antiguo 03/06/2008, 17:37
Avatar de Celcius  
Fecha de Ingreso: febrero-2003
Ubicación: Lima - Perú
Mensajes: 652
Antigüedad: 14 años, 10 meses
Puntos: 5
Respuesta: Efecto Maestros del web

Jejeje muchas gracias a todos, en realidad consegui lo que deseaba con la etiqueta <a> y lo hice como enciona Mikel.

Muchas gracias a todos, Dios los bendiga :)
__________________
"Si tú conocieras el don de Dios, y quién es el que te dice: 'Dame de beber,' tú Le habrías pedido a El, y El te hubiera dado agua viva.
Sn. Juan 4:19
Jesus
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 22:12.