javascript - saltarse - no soy un robot para que sirve
Botones sin imagen de Google (11)
Recientemente se han publicado algunos artículos sobre los nuevos botones sin imagen de Google:
- http://stopdesign.com/archive/2009/02/04/recreating-the-button.html
- http://stopdesign.com/eg/buttons/3.0/code.html
- http://stopdesign.com/eg/buttons/3.1/code.html
- http://gmailblog.blogspot.com/2009/02/new-ways-to-label-with-move-to-and-auto.html
Me gusta mucho cómo funcionan estos nuevos botones en Gmail. ¿Cómo puedo usar estos botones o similares en mi sitio? ¿Hay algún proyecto de código abierto con un aspecto similar?
Si quisiera rodar mi propio paquete de botones de esta manera usando JQuery / XHTML / CSS, ¿qué elementos podría usar? Mis pensamientos iniciales son:
Estándar
<input type="button">con css para mejorar la apariencia (el artículo de diseño que se habla principalmente sobre css / imges involucra).¿Jquery javascript para abrir un diálogo personalizado enraizado en el botón del evento "onclick" que tendría etiquetas
<a>y una barra de búsqueda para filtrar? ¿Sería sensato el diseño de una tabla para esa ventana emergente?
Soy terrible en la ingeniería inversa de cosas en la web, ¿cuáles son algunas de las herramientas que podría utilizar para ayudar a invertir la ingeniería de estos botones? Utilizando la barra de herramientas del desarrollador web de Firefox, realmente no puedo ver el css o javascript (incluso si está minificado) que se usa en los cuadros de diálogo emergentes de los botones. ¿Qué herramienta de navegador u otro método podría usar para echarles un vistazo y obtener algunas ideas?
No busco robar ninguna de las IP de Google, solo tengo una idea de cómo podría crear una funcionalidad de botón similar.
- EDITAR - No vi el enlace en la publicación original. ¡Lo siento! Intentará y volverá a escribir para reflejar la pregunta real
StopDesign tiene una excelente publicación sobre esto http://stopdesign.com/archive/2009/02/04/recreating-the-button.html . [edit 20091107] Estos fueron lanzados como parte de la biblioteca de cierre : vea la demostración del botón .
Básicamente, los botones personalizados que http://stopdesign.com/eg/buttons/3.0/code.html se crean con un simple trozo de CSS.
Originalmente usó 9 tablas para obtener el efecto:
Pero luego usó un simple margen izquierdo y derecho de 1px en los bordes superior e inferior para lograr el mismo efecto.
El degradado se simula utilizando tres capas:
Todo el código se puede encontrar en la página http://stopdesign.com/eg/buttons/3.1/code.html . (aunque el gradiente sin la imagen solo funciona en Firefox y Safari)
Instrucciones paso a paso
1 - Inserta el siguiente CSS:
/* Start custom button CSS here
---------------------------------------- */
.btn {
display:inline-block;
background:none;
margin:0;
padding:3px 0;
border-width:0;
overflow:visible;
font:100%/1.2 Arial,Sans-serif;
text-decoration:none;
color:#333;
}
* html button.btn {
padding-bottom:1px;
}
/* Immediately below is a temporary hack to serve the
following margin values only to Gecko browsers
Gecko browsers add an extra 3px of left/right
padding to button elements which can''t be overriden.
Thus, we use -3px of left/right margin to overcome this. */
html:not([lang*=""]) button.btn {
margin:0 -3px;
}
.btn span {
background:#f9f9f9;
z-index:1;
margin:0;
padding:3px 0;
border-left:1px solid #ccc;
border-right:1px solid #bbb;
}
* html .btn span {
padding-top:0;
}
.btn span span {
background:none;
position:relative;
padding:3px .4em;
border-width:0;
border-top:1px solid #ccc;
border-bottom:1px solid #bbb;
}
.btn b {
background:#e3e3e3;
position:absolute;
z-index:2;
bottom:0;
left:0;
width:100%;
overflow:hidden;
height:40%;
border-top:3px solid #eee;
}
* html .btn b {
top:1px;
}
.btn u {
text-decoration:none;
position:relative;
z-index:3;
}
/* pill classes only needed if using pill style buttons ( LEFT | CENTER | RIGHT ) */
button.pill-l span {
border-right-width:0;
}
button.pill-l span span {
border-right:1px solid #ccc;
}
button.pill-c span {
border-right-style:none;
border-left-color:#fff;
}
button.pill-c span span {
border-right:1px solid #ccc;
}
button.pill-r span {
border-left-color:#fff;
}
/* only needed if implementing separate hover state for buttons */
.btn:hover span, .btn:hover span span {
cursor:pointer;
border-color:#9cf !important;
color:#000;
}
/* use if one button should be the ''primary'' button */
.primary {
font-weight:bold;
color:#000;
}
2 - Use una de las siguientes formas para llamarlo (puede encontrar más en los enlaces de arriba)
<a href="#" class="btn"><span><span><b> </b><u>button</u></span></span></a>
o
<button type="button" class="btn"><span><span><b> </b><u>button</u></span></span></button>
El mayor problema que tendrá será hacerlo funcionar en todos los navegadores.
Creo que deberías considerar seriamente si realmente lo necesitas ... Google obtiene una gran cantidad de dinero haciendo algo como esto debido a la gran cantidad de botones e idiomas que necesitan; Sospecho que la mayoría de los sitios y aplicaciones serían igual de buenos usando una imagen.
Sin embargo, una buena idea es un componente de código abierto: difundir ampliamente la riqueza y el esfuerzo.
Este es su botón "Archivar", según Firebug.
<div tabindex="0" act="7" class="goog-imageless-button goog-inline-block goog-imageless-button goog-imageless-button-collapse-right goog-imageless-button-primary" id="">
<div class="goog-inline-block goog-imageless-button-outer-box">
<div class="goog-inline-block goog-imageless-button-inner-box">
<div class="goog-imageless-button-pos">
<div class="goog-imageless-button-top-shadow"> </div>
<div class="goog-imageless-button-content"><b>Archive</b></div>
</div>
</div>
</div>
</div>
El CSS es más de lo que me importa organizar / pegar para esto. Tal vez soy solo yo, pero cuando el marcado / css se vuelve tan pesado, creo que preferiría usar una imagen (o un par de imágenes como fondos. Mejor aún, Sprites). Además, una imagen para este botón sería menos que una sola K.
Por mucho que ame Google, esto parece un poco exagerado.
Actualización: Google es un caso único. Si eres un sitio masivo y deseas internacionalizar tu contenido, entonces esta técnica sin imágenes es realmente genial. Le permite aplicar casi cualquier lenguaje escrito a su UI, sin necesidad de generar nuevas imágenes, o miedo a romper sus botones.
Ver pregunta: ¿Cuáles son las ventajas de usar un botón sin imágenes?
Estos fueron lanzados como parte de la biblioteca de cierre : ver el botón de demostración
Independientemente de cómo decida hacerlo, asegúrese de representar primero la página con el valor predeterminado:
<input type="submit" value="submit" />
... Y luego use jQuery para intercambiar el elemento de entrada con su botón personalizado que tiene un evento onClick. Esto asegurará que las personas sin JavaScript habilitado aún puedan usar su sitio.
¡La usabilidad debe ser lo primero!
La barra de herramientas de desarrollador web tiene una información de estilo de vista en el menú css que le indicará qué CSS se aplica a un elemento. También está la función Editar CSS en ese menú que le permitirá cambiar el CSS sobre la marcha para ver cómo afecta la página.
La mayoría del trabajo aquí probablemente no será el diseño, esas publicaciones ya son un excelente How-To en los efectos de gradiente.
El problema es hacer que esto funcione en todos los navegadores, o más específicamente en los estrafalarios montones de basura que son IE6 e IE7.
Creo que estás en el camino correcto con un botón estándar que se vuelve a escribir con jQuery: de esa manera seguirás siendo accesible para los lectores de pantalla y puede degradarse muy bien en los navegadores realmente antiguos.
Para el HTML, creo que su mejor opción es visitar Gmail con cada navegador y ver qué HTML se produce. Espero que sea completamente diferente para IE6, IE7, (dependiendo de si necesitan el modo peculiar) y todo lo demás. .
La publicación con un enlace a la biblioteca de cierre no se aplica. Lo que se lanzó como parte de la biblioteca de cierre usa botones con degradados .
Las otras soluciones enumeradas son inútiles. No puede ir desde allí y hacer que estos botones funcionen en todos los navegadores que Gmail tenga funcionando. Lo que Bowman muestra en su sitio no funciona.
Podrías usar este plugin jquery que he desarrollado. Los botones funcionan prácticamente en cualquier lugar y, dado que es un complemento, son fáciles de configurar y configurar.
Puede intentar usar el complemento Firebug para Firefox para ver el CSS en el botón.
Actualizando esta publicación para 2011:
Google lanzó un nuevo diseño en todos sus servicios en julio de 2011. Los nuevos botones de Google se han recreado aquí: http://pixify.com/blog/use-google-plus-to-improve-your-ui/
Los nuevos botones se ven así: