¡Advertencia!
Este tema no ha tenido respuestas en más de un mes. Recuerda que si deseas añadir una nueva debes cumplir con las normas de la web.
Un amigo tiene una web para su universidad y la hizo desde one.com. Entonces, él quiere que cuando se pongan encima sobre un icono, ese icono se ponga más claro (por ejemplo, como aquí , que sin clicar en foro, artículos o lo qué sea pues se ilumina) y cómo poner un link qué cuando cliques se vaya a otra página, pero un link invisible. No se si me explico xd...
Lo del link visible no se te entiende, ¿quieres poner un Tooltip en el botón?
Para poner la iluminación del botón solo tienes que jugar con las propiedades del link CSS.
link es el modo normal, visited es cuando estás en la pagina actual y quieres que se vea presionado, como el resplandor interno que tiene el botón del foro. hover es cuando pasas el mouse encima (el efecto que quieres lograr) y active es justo cuando das clic a ese botón.
Para poner la iluminación del botón solo tienes que jugar con las propiedades del link CSS.
a:link {text-decoration: none}
a:visited {text-decoration: none}
a:active {text-decoration: none}
a:hover {text-decoration: underline; color: pink;}link es el modo normal, visited es cuando estás en la pagina actual y quieres que se vea presionado, como el resplandor interno que tiene el botón del foro. hover es cuando pasas el mouse encima (el efecto que quieres lograr) y active es justo cuando das clic a ese botón.
Políticamente irresistible.
Lo del link visible no se te entiende, ¿quieres poner un Tooltip en el botón?
Para poner la iluminación del botón solo tienes que jugar con las propiedades del link CSS.a:link {text-decoration: none} a:visited {text-decoration: none} a:active {text-decoration: none} a:hover {text-decoration: underline; color: pink;}
link es el modo normal, visited es cuando estás en la pagina actual y quieres que se vea presionado, como el resplandor interno que tiene el botón del foro. hover es cuando pasas el mouse encima (el efecto que quieres lograr) y active es justo cuando das clic a ese botón.
Creo que por "link invisible" se refiere a usar javascript (window.location en algún evento onclick). Por lo otro de "iluminar" eso depende, si es de fondo blanco podrías jugar con opacity, quizás:
element:hover{ opacity: 0.8 }Saludos.
Edito: Para lo de iluminar también puedes hacer alguna trampa con box-shadow en inset, pero aun así, sigue siendo mejor opacity.
Saludos.
Arquitecto, diseñador y programador | Comenzando a proyectar mi vida bajo mis propios ideales. Administrador de ilDom, Twiteck y Century21
Yo suelo usar opacity pero porque me queda bien, en algunos casos tengo que usar lo que dice Vheissu pero si hace lo que dice él tendrá que crear un div y con css cambiarle la posición o la url del background en cada hover, active,... esto último (cambiarle el background-image) no se lo recomiendo ya que si aún se está cargando la web y pasa el ratón por encima se verá un poco desagradable porque cargará la imagen poco a poco.
Por eso, como dice Joaquín que haga lo que le convenga, si tiene un fondo blanco o bonito y le queda bien que se transparente, pues lo hace con opacity, sino, indicándole el width y el height a un div, dándole un background-image:url('urldelaimagen.png'); y un background-position y luego ir cambiándosela en hover y active, quedan las dos igual de bien. Lo que le convenga.
Edito: El ejemplo que das tu con el ejemplo del menú de Habbos usa, backgrand-image y después cambia el background-position.
Lo que te he señalado arriba es lo que cambia en cada evento. Y se mide por "x" y "y" añadiéndose px o % o como lo quieras calcular para moverte por la imagen. Ejemplo: Background-position: -125px 0;
Por eso, como dice Joaquín que haga lo que le convenga, si tiene un fondo blanco o bonito y le queda bien que se transparente, pues lo hace con opacity, sino, indicándole el width y el height a un div, dándole un background-image:url('urldelaimagen.png'); y un background-position y luego ir cambiándosela en hover y active, quedan las dos igual de bien. Lo que le convenga.
Edito: El ejemplo que das tu con el ejemplo del menú de Habbos usa, backgrand-image y después cambia el background-position.
#layout #menu ul li{
width: 120px;
height: 35px;
background: url(/images/layout/noise.png),url(/images/layout/menu.png) repeat-x;
background-position: 0 0; //<--- Lo que cambia
}Lo que te he señalado arriba es lo que cambia en cada evento. Y se mide por "x" y "y" añadiéndose px o % o como lo quieras calcular para moverte por la imagen. Ejemplo: Background-position: -125px 0;
Español. Exmiembro del DDI y los ya desaparecidos departamentos de Relaciones públicas y de Artículos. Programador y escritor principiante.
Vale, le mandaré todos vuerstros mensajes a mi amigo, pero antes quiero preguntaros: Todo esto sale en el web editor de one.com? Porque la web es de ahí, de ese dominio gratis de un año y él de programación sabe bien poco y yo leyendo me he hecho la picha un lio.
Aún así, gracias, es bueno tener a gente experimentada por el foro.
PD: Por cieto, lo que quiere hacer mi amigo (es importante, es un ''trabajo'' para la uni) es lo mismo qué aquí ''http://qtip2.com/demos'' Quñe pasas por encima de ''Simple text'' y sale un color y otro texto qué explica un poco qué es.
Aún así, gracias, es bueno tener a gente experimentada por el foro.
PD: Por cieto, lo que quiere hacer mi amigo (es importante, es un ''trabajo'' para la uni) es lo mismo qué aquí ''http://qtip2.com/demos'' Quñe pasas por encima de ''Simple text'' y sale un color y otro texto qué explica un poco qué es.
Vale, le mandaré todos vuerstros mensajes a mi amigo, pero antes quiero preguntaros: Todo esto sale en el web editor de one.com? Porque la web es de ahí, de ese dominio gratis de un año y él de programación sabe bien poco y yo leyendo me he hecho la picha un lio.
Aún así, gracias, es bueno tener a gente experimentada por el foro.
PD: Por cieto, lo que quiere hacer mi amigo (es importante, es un ''trabajo'' para la uni) es lo mismo qué aquí ''http://qtip2.com/demos'' Quñe pasas por encima de ''Simple text'' y sale un color y otro texto qué explica un poco qué es.
Traslada el dominio a cualquier otra parte.
Edito: Puede que esto te sea de utilidad. http://diveditor.zxq.net/
Arquitecto, diseñador y programador | Comenzando a proyectar mi vida bajo mis propios ideales. Administrador de ilDom, Twiteck y Century21
Vale, le mandaré todos vuerstros mensajes a mi amigo, pero antes quiero preguntaros: Todo esto sale en el web editor de one.com? Porque la web es de ahí, de ese dominio gratis de un año y él de programación sabe bien poco y yo leyendo me he hecho la picha un lio.
Aún así, gracias, es bueno tener a gente experimentada por el foro.
PD: Por cieto, lo que quiere hacer mi amigo (es importante, es un ''trabajo'' para la uni) es lo mismo qué aquí ''http://qtip2.com/demos'' Quñe pasas por encima de ''Simple text'' y sale un color y otro texto qué explica un poco qué es.
El dominio no tiene nada que ver, creo. Lo que importa es lo que escribes, únicamente si no tienes un dominio de pago lo que no te funciona es el .htaccess.
¡Pero no! Entonces nada de lo dicho vale si lo que quieres es hacer eso, para ello tiene que usar jQuery en la misma página lo dice jaja, seguramente el te lo haya dicho bien y tu lo hayas confundido un poco al no dar información explicita de lo que quiere.
Si lo que quieres es hacer eso le recomiendo que aprenda jQuery porque sino lo que le contaremos le sonará a chino. Y también si lo que quiere es hacer explícitamente lo que dice ahí tendrá que aprender también Ajax... cof, cof...
¡Viva la publicidad! :lengua:
Español. Exmiembro del DDI y los ya desaparecidos departamentos de Relaciones públicas y de Artículos. Programador y escritor principiante.
El dominio no tiene nada que ver, creo. Lo que importa es lo que escribes, únicamente si no tienes un dominio de pago lo que no te funciona es el .htaccess.
¡Pero no! Entonces nada de lo dicho vale si lo que quieres es hacer eso, para ello tiene que usar jQuery en la misma página lo dice jaja, seguramente el te lo haya dicho bien y tu lo hayas confundido un poco al no dar información explicita de lo que quiere.
Si lo que quieres es hacer eso le recomiendo que aprenda jQuery porque sino lo que le contaremos le sonará a chino. Y también si lo que quiere es hacer explícitamente lo que dice ahí tendrá que aprender también Ajax... cof, cof...
¡Viva la publicidad! :lengua:
No necesita jQuery para eso. No desde la llegada de CCS3 con transitions, animations, transform, etc.
¡Viva la publicidad! :lengua:
:uhh:
Arquitecto, diseñador y programador | Comenzando a proyectar mi vida bajo mis propios ideales. Administrador de ilDom, Twiteck y Century21
No necesita jQuery para eso. No desde la llegada de CCS3 con transitions, animations, transform, etc.
:uhh:
Yo lo digo si lo quiere hacer igual que la página que dijo él... si lo quiere hacer con CSS3 y lo sabe pues ale! Pero si sabe jQuery que lo haga con jQuery, no sé si al dar una web en la que te enseñan con ese lenguaje es porque sabe ese lenguaje y no CSS3...
Español. Exmiembro del DDI y los ya desaparecidos departamentos de Relaciones públicas y de Artículos. Programador y escritor principiante.
Usar imágenes a estas alturas para darle una textura a una botonería lo veo un poco absurdo, a menos que uno le quiera dar máximo detalle, como el estilo de H8. Todo se puede generar vía SVG y con gradientes CSS. Llevando la linea de moda que se da últimamente con el flat design.
Yo suelo usar opacity pero porque me queda bien, en algunos casos tengo que usar lo que dice Vheissu pero si hace lo que dice él tendrá que crear un div y con css cambiarle la posición o la url del background en cada hover, active,... esto último (cambiarle el background-image) no se lo recomiendo ya que si aún se está cargando la web y pasa el ratón por encima se verá un poco desagradable porque cargará la imagen poco a poco.
Por eso, como dice Joaquín que haga lo que le convenga, si tiene un fondo blanco o bonito y le queda bien que se transparente, pues lo hace con opacity, sino, indicándole el width y el height a un div, dándole un background-image:url('urldelaimagen.png'); y un background-position y luego ir cambiándosela en hover y active, quedan las dos igual de bien. Lo que le convenga.
Edito: El ejemplo que das tu con el ejemplo del menú de Habbos usa, backgrand-image y después cambia el background-position.#layout #menu ul li{ width: 120px; height: 35px; background: url(/images/layout/noise.png),url(/images/layout/menu.png) repeat-x; background-position: 0 0; //<--- Lo que cambia }
Lo que te he señalado arriba es lo que cambia en cada evento. Y se mide por "x" y "y" añadiéndose px o % o como lo quieras calcular para moverte por la imagen. Ejemplo: Background-position: -125px 0;
No tengo idea de como sea el editor de Ono, pero es seguro que puede modificar el código, copiándolo y pegándolo en algún editor de texto. ¿Tu amigo sabe las bases de html/css? O usa el editor de Joaquín que está bastante bien logrado, si no usa este: http://www.cssdrive.com/css3button/
Vale, le mandaré todos vuerstros mensajes a mi amigo, pero antes quiero preguntaros: Todo esto sale en el web editor de one.com? Porque la web es de ahí, de ese dominio gratis de un año y él de programación sabe bien poco y yo leyendo me he hecho la picha un lio.
Aún así, gracias, es bueno tener a gente experimentada por el foro.
PD: Por cieto, lo que quiere hacer mi amigo (es importante, es un ''trabajo'' para la uni) es lo mismo qué aquí ''http://qtip2.com/demos'' Quñe pasas por encima de ''Simple text'' y sale un color y otro texto qué explica un poco qué es.
Técnicamente es un generador de lo que el esta buscando.
Políticamente irresistible.
Vale, vale, gracias, le envié el link del foro y leerá todo. Luego cuando me pase imágenes del web editor os las pondré aquí. Muchas gracias chicos!!