it-swarm-es.com

Botones sin imagen de Google

Recientemente se han publicado algunos artículos sobre los nuevos botones sin imagen de Google:

Me gusta mucho cómo funcionan estos nuevos botones en Gmail. ¿Cómo puedo usar estos botones o similares en mi sitio? ¿Hay proyectos de código abierto con una apariencia similar?

Si quisiera rodar mi propio paquete de botones como este usando JQuery/XHTML/CSS, ¿qué elementos podría usar? Mis pensamientos iniciales son:

  1. Estándar <input type="button"> con css para mejorar el aspecto (el artículo de diseño hablaba principalmente de css/imges).

  2. ¿Jquery javascript para abrir un diálogo personalizado enraizado en el botón del evento "onclick" que tendría etiquetas <a> en ellas y una barra de búsqueda para el filtrado? ¿Sería sano un diseño de tabla para esa ventana emergente?

Soy terrible con las cosas de ingeniería inversa en la web, ¿cuáles son algunas de las herramientas que podría usar para ayudar a aplicar ingeniería inversa estos botones? Usando la barra de herramientas de desarrollo web de Firefox, no puedo ver el css o javascript (incluso si está minimizado) que se usa en los cuadros de diálogo emergentes de botones. ¿Qué herramienta de navegador u otro método podría usar para echarles un vistazo y obtener algunas ideas?

No estoy buscando robar ninguna de las IP de Google, solo tengo una idea de cómo podría crear una funcionalidad de botón similar.

90
MikeN

- EDITAR - No vi el enlace en la publicación original. ¡Lo siento! Intentaré volver a escribir para reflejar la pregunta real

StopDesign tiene una excelente publicación sobre esto aquí . [edit 20091107] Se publicaron como parte de la biblioteca de cierre : vea la demostración del botón .

Básicamente, los botones personalizados he shows se crean utilizando un bit simple de CSS.

Originalmente usó 9 tablas para obtener el efecto: 9 Tables

Pero más tarde usó un simple margen izquierdo y derecho de 1px en los bordes superior e inferior para lograr el mismo efecto.

El gradiente se falsifica utilizando tres capas: Button Gradient

Todo el código se puede encontrar en la página Botones personalizados 3.1 . (aunque el gradiente sin la imagen solo funciona en Firefox y Safari)

Instrucciones paso a paso

1 - Inserte 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 - Utilice una de las siguientes formas de llamarlo (puede encontrar más información en los enlaces anteriores)

<a href="#" class="btn"><span><span><b>&nbsp;</b><u>button</u></span></span></a>

o

<button type="button" class="btn"><span><span><b>&nbsp;</b><u>button</u></span></span></button>
55
bjtitus

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. Quizás sea solo yo, pero cuando el markup/css sea tan pesado, creo que preferiría UTILIZAR UNA IMAGEN (o un par de imágenes como fondo). Mejor aún, Sprites). Además, una imagen para este botón sería menos que una única K.

Por mucho que amo a Google, esto parece un poco excesivo.


Actualización: Google es un caso único. Si eres un sitio masivo y deseas internacionalizar tu contenido, entonces esta técnica sin imagen es realmente genial. Le permite aplicar casi cualquier lenguaje escrito a su interfaz de usuario, sin necesidad de generar nuevas imágenes, o miedo de romper sus botones.

Vea la pregunta: ¿Cuáles son las ventajas de usar un botón sin imagen?

32
Sampson

Podrías usar este plugin jquery que he desarrollado. Los botones funcionan prácticamente en cualquier lugar y, como es un complemento, son fáciles de configurar y configurar.

http://swizec.com/code/styledButton/

13
Swizec

Sin embargo, si decides hacerlo, asegúrate de que primero renderices 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 podrán utilizar su sitio.

La usabilidad debe ser lo primero!

13
Ty.

Actualización de esta publicación para 2011:

Google lanzó un nuevo diseño en sus servicios en julio de 2011. Los nuevos botones de Google se han recreado aquí: http://pixify.com/blog/use-google-plus-to-improve- tu-ui /

Los nuevos botones se ven así: enter image description here

12
bperdue

Puedes intentar usar el complemento Firebug para Firefox para ver el CSS en el botón.

5
David Grant

El mayor problema que tendrá será hacerlo funcionar en todos los navegadores.

Creo que deberías considerar si realmente lo necesitas ... Google obtiene una gran cantidad de dinero al hacer algo como esto debido a la gran cantidad de botones e idiomas que necesitan; Sospecho que la mayoría de los sitios y aplicaciones estarían tan bien con una imagen.

Sin embargo, un componente de código abierto es una buena idea: difundir la riqueza y el esfuerzo ampliamente.

5
Zac Thompson

La mayoría del trabajo aquí probablemente no será el diseño; esas publicaciones ya son un excelente "Cómo hacer" sobre los efectos de degradado.

El problema es hacer que esto funcione en todos los navegadores, o más específicamente en las extrañas pilas 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, podrás seguir siendo accesible para los lectores de pantalla y se puede degradar muy bien en navegadores muy antiguos.

Para el HTML, creo que lo mejor es visitar Gmail con cada navegador y ver qué HTML se produce. Espero que sea completamente diferente para IE6, IE7 (también dependiendo de si necesitan el modo de caprichos) y todo lo demás. .

2
Keith

Estos se lanzaron como parte de la biblioteca de cierre : vea la demostración de botón

2
Nickolay

El Web Developer Toolbar 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 te permitirá cambiar el CSS sobre la marcha para ver cómo afecta a la página.

1
Mykroft

La publicación con un enlace a la biblioteca de cierre no se aplica. Lo que se publicó como parte de la biblioteca de cierre usa botones con gradientes.

Las otras soluciones enumeradas son inútiles. No puedes ir desde allí y hacer que estos botones funcionen en todos los navegadores en los que Gmail los hace funcionar. Lo que Bowman muestra en su sitio no es código de trabajo.

0
Jose