RE: [Ovillo] Botones y Links iguales
Hola a todos, frente a esta inquietud, recomendaria dar un vistazo a este interesante articulo relacionado con la estilización de controles y formularios, el cual muestra cual es la diferencia de presentacion y/o render de los mismos en los diferentes navegadores y sistemas operativos. http://www.456bereastreet.com/archive/200410/styling_even_more_form_controls/ Att. //Jhon Gonzalez -Mensaje original- De: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] En nombre de stripTM Enviado el: viernes, 18 de febrero de 2005 13:58 Para: Ovillo, la lista de CSS en castellano Asunto: Re: [Ovillo] Botones y Links iguales Camilo Kawerín escribió: Hola, AngelG escribió: Me gustaría hacer que los links fuesen iguales (en forma y color) a los botones html. Como podría hacer eso usando css ? En principio, deberías tener en cuenta que la forma y color de los botones html depende del navegador y sistema operativo del usuario. Por lo tanto, sólo podrías imitar el de una combinación de estos. Y... creo que hasta el típico color gris del Windows 98 se puede cambiar. Puedes usar los colores definidos en el S.O. tienes todos estos a tu disposición (bueno a la de tu navegador, jejeje): http://www.sidar.org/recur/desdi/traduc/es/css/box.html#border-properties ActiveBorder Borde de la ventana activa. ActiveCaption Título de la ventana activa. AppWorkspace Color de fondo de una interfaz de documentos múltiples. Background Fondo del escritorio. ButtonFace Color de la cara de los elementos tridimensionales de la pantalla. ButtonHighlight Sombra oscura de los elementos tridimensionales de la pantalla (para los bordes más alejados de la fuente luminosa). ButtonShadow Color de la sombra de los elementos tridimensionales de la pantalla. ButtonText Texto de los botones. CaptionText Texto de los títulos, cajas de dimensiones y cajas de flechas de las barras de desplazamiento. GrayText Texto grisado (deshabilitado). Este color es fijado en #000 si el manejador de pantalla actual no soporta un color gris sólido. Highlight Item(s) seleccionados en un control. HighlightText Texto del(los) item(s) seleccionados en un control. InactiveBorder Borde de la ventana inactiva. InactiveCaption Título de la ventana inactiva. InactiveCaptionText Color del texto de un título inactivo. InfoBackground Color de fondo de los controles de sugerencias (tooltip). InfoText Color del texto de los controles de sugerencias (tooltip). Menu Fondo del menu. MenuText Texto de los menúes. Scrollbar Area gris de la barra de desplazamiento. ThreeDDarkShadow Sombra oscura de los elementos tridimensionales de pantalla. ThreeDFace Color de la cara de los elementos tridimensionales de pantalla. ThreeDHighlight Color resaltado de los elementos tridimensionales de pantalla. ThreeDLightShadow Color claro de los elementos tridimensionales de pantalla (para los bordes enfrentados a la fuente luminosa). ThreeDShadow Sombra oscura de los elementos tridimensionales de pantalla. Window Fondo de la ventana. WindowFrame Marco de la ventana. WindowText Texto de las ventanas. -- Saludos -=stripTM=- ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://ovillo.org/mailman/listinfo/ovillo ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://ovillo.org/mailman/listinfo/ovillo
RE: [Ovillo] Botones y Links iguales
-
Angel, me ha picado la curiosidad tu consulta y,
basándome
en la respuesta de stripTM (y con pocos cambios,
gracias stripTM!),
me he puesto como meta conseguir que un enlace (a)
sea lo mas
parecido posible a un botón de formulario (input
type=submit)
aunque es muy probable que alguién haya publicado algo
semejante
en internet 8¬)
Mando el código como curiosidad (en Firefox el
parecido es mayor
aunque supongo que también se puede conseguir la
clonación
tomando como referencia a IE)
CSS:
body { font: .8em Verdana, Arial, Helvetica,
sans-serif }
a {
border: 2px buttonface outset;
background-color: buttonface;
padding: .1em .675em;
font-size: 1em;
text-decoration: none;
color: black;
}
input { font-family: Verdana, Arial, Helvetica,
sans-serif }
(X)HTML:
a href=#Enlace/a
pBotoacute;n basado en la etiqueta lt;agt;/p
input type=submit name=Submit value=Enlace
pBotoacute;n de formulario (basado en la etiqueta
lt;input
type=quot;submitquot;gt;/p
-
Si al CSS de arriba se le añade:
a:active {
border: 2px buttonface inset;
background-color: buttonface;
padding: .1em .675em;
font-size: 1em;
text-decoration: none;
color: black;
}
El parecido es absoluto, por supuesto que en IE no
funciona, pero en Firefox se ve perfecto.
Pável
__
Renovamos el Correo Yahoo!: ¡250 MB GRATIS!
Nuevos servicios, más seguridad
http://correo.yahoo.es
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Botones y Links iguales
Muchas gracias a todos por las respuestas. On Sat, 19 Feb 2005 11:00:57 -0300, Camilo Kawerín [EMAIL PROTECTED] wrote: Gracias! no la tenía a esa. Saludos stripTM escribió: Puedes usar los colores definidos en el S.O. tienes todos estos a tu disposición (bueno a la de tu navegador, jejeje): http://www.sidar.org/recur/desdi/traduc/es/css/box.html#border-properties -- No virus found in this outgoing message. Checked by AVG Anti-Virus. Version: 7.0.300 / Virus Database: 266.1.0 - Release Date: 18/02/2005 ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://ovillo.org/mailman/listinfo/ovillo ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Botones y Links iguales
Gracias! no la tenía a esa. Saludos stripTM escribió: Puedes usar los colores definidos en el S.O. tienes todos estos a tu disposición (bueno a la de tu navegador, jejeje): http://www.sidar.org/recur/desdi/traduc/es/css/box.html#border-properties -- No virus found in this outgoing message. Checked by AVG Anti-Virus. Version: 7.0.300 / Virus Database: 266.1.0 - Release Date: 18/02/2005 ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://ovillo.org/mailman/listinfo/ovillo
RE: [Ovillo] Botones y Links iguales
AngelG escribió:
Me gustaría hacer que los links fuesen iguales (en forma y color) a los
botones html. Como podría hacer eso usando css ?
Angel, me ha picado la curiosidad tu consulta y, basándome
en la respuesta de stripTM (y con pocos cambios, gracias stripTM!),
me he puesto como meta conseguir que un enlace (a) sea lo mas
parecido posible a un botón de formulario (input type=submit)
aunque es muy probable que alguién haya publicado algo semejante
en internet 8¬)
Mando el código como curiosidad (en Firefox el parecido es mayor
aunque supongo que también se puede conseguir la clonación
tomando como referencia a IE)
CSS:
body { font: .8em Verdana, Arial, Helvetica, sans-serif }
a {
border: 2px buttonface outset;
background-color: buttonface;
padding: .1em .675em;
font-size: 1em;
text-decoration: none;
color: black;
}
input { font-family: Verdana, Arial, Helvetica, sans-serif }
(X)HTML:
a href=#Enlace/a
pBotoacute;n basado en la etiqueta lt;agt;/p
input type=submit name=Submit value=Enlace
pBotoacute;n de formulario (basado en la etiqueta lt;input
type=quot;submitquot;gt;/p
Jose A. Alvarez Laurnaga
Consultor CX-Met
XML INDUSTRY SOLUTIONS
Tel.: 91 80 79 684 / Ext.: 684
[EMAIL PROTECTED]
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Botones y Links iguales
Camilo Kawerín escribió: Hola, AngelG escribió: Me gustaría hacer que los links fuesen iguales (en forma y color) a los botones html. Como podría hacer eso usando css ? En principio, deberías tener en cuenta que la forma y color de los botones html depende del navegador y sistema operativo del usuario. Por lo tanto, sólo podrías imitar el de una combinación de estos. Y... creo que hasta el típico color gris del Windows 98 se puede cambiar. Puedes usar los colores definidos en el S.O. tienes todos estos a tu disposición (bueno a la de tu navegador, jejeje): http://www.sidar.org/recur/desdi/traduc/es/css/box.html#border-properties ActiveBorder Borde de la ventana activa. ActiveCaption Título de la ventana activa. AppWorkspace Color de fondo de una interfaz de documentos múltiples. Background Fondo del escritorio. ButtonFace Color de la cara de los elementos tridimensionales de la pantalla. ButtonHighlight Sombra oscura de los elementos tridimensionales de la pantalla (para los bordes más alejados de la fuente luminosa). ButtonShadow Color de la sombra de los elementos tridimensionales de la pantalla. ButtonText Texto de los botones. CaptionText Texto de los títulos, cajas de dimensiones y cajas de flechas de las barras de desplazamiento. GrayText Texto grisado (deshabilitado). Este color es fijado en #000 si el manejador de pantalla actual no soporta un color gris sólido. Highlight Item(s) seleccionados en un control. HighlightText Texto del(los) item(s) seleccionados en un control. InactiveBorder Borde de la ventana inactiva. InactiveCaption Título de la ventana inactiva. InactiveCaptionText Color del texto de un título inactivo. InfoBackground Color de fondo de los controles de sugerencias (tooltip). InfoText Color del texto de los controles de sugerencias (tooltip). Menu Fondo del menu. MenuText Texto de los menúes. Scrollbar Area gris de la barra de desplazamiento. ThreeDDarkShadow Sombra oscura de los elementos tridimensionales de pantalla. ThreeDFace Color de la cara de los elementos tridimensionales de pantalla. ThreeDHighlight Color resaltado de los elementos tridimensionales de pantalla. ThreeDLightShadow Color claro de los elementos tridimensionales de pantalla (para los bordes enfrentados a la fuente luminosa). ThreeDShadow Sombra oscura de los elementos tridimensionales de pantalla. Window Fondo de la ventana. WindowFrame Marco de la ventana. WindowText Texto de las ventanas. -- Saludos -=stripTM=- ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Botones y Links iguales
Hola,
AngelG escribió:
Me gustaría hacer que los links fuesen iguales (en forma y color) a
los botones html.
Como podría hacer eso usando css ?
En principio, deberías tener en cuenta que la forma y color de los
botones html depende del navegador y sistema operativo del usuario. Por
lo tanto, sólo podrías imitar el de una combinación de estos. Y... creo
que hasta el típico color gris del Windows 98 se puede cambiar.
De todos modos, con CSS podrías imitar tales botones rectangulares y
grises; más o menos así:
a {
display:block;
width:27px;
height:12px;
background-color:#d8d0c8;
border-right:1px solid #808080;
border-bottom:1px solid #808080;
border-left:1px solid #ff;
border-top:1px solid #ff;
}
span {
display:block;
border-right:1px solid #404040;
border-bottom:1px solid #404040;
}
y el html sería:
spana href=#/a/span
(Ojo: no probé el código. Yo uso Windows ME, así que los botones tendrán
la apariencia de ese sistema. Los códigos de los colores los capturé
usando la extensión ColorZilla)
Ahora, si lo que querés imitar es un botón de Windows XP... no te queda
otra que usar una imagen.
Bueno, espero que te sirva, saludos!
--
No virus found in this outgoing message.
Checked by AVG Anti-Virus.
Version: 7.0.300 / Virus Database: 265.8.7 - Release Date: 10/02/2005
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://ovillo.org/mailman/listinfo/ovillo_ovillo.org
