Google의 Imageless 버튼

최근 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

이 새로운 버튼이 Gmail에서 작동하는 방식이 정말 마음에 듭니다. 내 사이트에서 이러한 또는 유사한 버튼을 어떻게 사용할 수 있습니까? 비슷한 모양과 느낌의 오픈 소스 프로젝트가 있습니까?

JQuery / XHTML / CSS를 사용하여 이와 같은 내 버튼 패키지를 롤링하려면 어떤 요소를 사용할 수 있습니까? 내 초기 생각은 다음과 같습니다.

1. <input type="button">모양을 개선하기 위해 CSS를 사용하는 표준 (CS / imges에 대해 주로 언급 된 디자인 기사에 포함됨)

2. Jquery javascript를 사용하여 "onclick"이벤트의 버튼에 기반한 사용자 정의 대화 상자를 가져 오십시오. 여기에는 <a>태그가 있고 필터링을위한 검색 창이 있습니까? 해당 팝업의 테이블 레이아웃이 정상일까요?

웹에서 리버스 엔지니어링을하는 것이 끔찍합니다. 이러한 버튼을 리버스 엔지니어링하는 데 사용할 수있는 도구에는 어떤 것이 있습니까? Firefox의 웹 개발자 도구 모음을 사용하면 버튼 팝업 대화 상자에서 사용되는 CSS 또는 자바 스크립트 (최소화 되더라도)를 실제로 볼 수 없습니다. 어떤 브라우저 도구 나 다른 방법을 사용하여이를 살펴보고 아이디어를 얻을 수 있습니까?

Google의 IP를 훔치려는 것이 아니라 유사한 버튼 기능을 만드는 방법에 대한 아이디어 만 얻으십시오.

-편집-원본 게시물에 링크가 표시되지 않았습니다. 죄송합니다! 실제 질문을 반영하기 위해 시도하고 다시 작성합니다.

StopDesign에는 여기 에 대한 훌륭한 게시물이 있습니다 . [편집 20091107] 이것들은 클로저 라이브러리의 일부로 릴리즈되었습니다 : 버튼 데모를 보세요.

기본적으로 그가 보여주는 사용자 정의 버튼 은 간단한 CSS를 사용하여 생성됩니다.

그는 원래 효과를 얻기 위해 9 개의 테이블을 사용했습니다.

그러나 나중에 그는 동일한 효과를 얻기 위해 상단 및 하단 테두리에 간단한 1px 왼쪽 및 오른쪽 여백을 사용했습니다.

그라디언트는 세 개의 레이어를 사용하여 가짜입니다.

모든 코드는 Custom Buttons 3.1 페이지 에서 찾을 수 있습니다 . (이미지가없는 그라데이션은 Firefox 및 Safari에서만 작동하지만)

단계별 지침

1-다음 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-다음 방법 중 하나를 사용하여 호출합니다 (위 링크에서 더 많은 정보를 찾을 수 있음).

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

또는

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

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>

CSS는 내가 이것을 구성 / 붙여 넣기하는 것 이상입니다. 아마도 나뿐일지도 모르지만 마크 업 / css가 이렇게 무거워지면 이미지 (또는 두 개의 이미지를 배경으로 사용합니다. 더 좋은 방법은 스프라이트)를 사용하는 것이 좋습니다. 게다가이 버튼의 이미지는 하나의 K보다 작습니다.

내가 Google을 좋아하는만큼 이것은 약간 과잉 인 것 같습니다.

업데이트 : Google은 독특한 사례입니다. 방대한 사이트이고 콘텐츠를 국제화하려는 경우이 이미지없는 기술은 실제로 정말 멋집니다. 새로운 이미지를 생성하거나 버튼이 깨지는 것을 두려워하지 않고도 거의 모든 서면 언어를 UI에 적용 할 수 있습니다.

질문 : 이미지 없는 버튼을 사용하면 어떤 이점이 있습니까?를 참조하십시오 .

하지만 그렇게하기로 결정했다면 먼저 기본값으로 페이지를 렌더링해야합니다.

<input type="submit" value="submit" />

... 그런 다음 jQuery를 사용하여 입력 요소를 onClick 이벤트가있는 사용자 정의 버튼으로 교체합니다. 이렇게하면 JavaScript가 활성화되지 않은 사람들도 귀하의 사이트를 계속 사용할 수 있습니다.

사용성이 최우선입니다!

내가 개발 한이 jquery 플러그인을 사용할 수 있습니다. 버튼은 어디서나 실용적으로 작동하며 플러그인이기 때문에 설정 및 구성이 쉽습니다.

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

2011 년에이 게시물 업데이트 :

Google은 2011 년 7 월 서비스 전반에 걸쳐 새로운 디자인을 출시했습니다. 새로운 Google 버튼이 여기에 다시 만들어졌습니다. http://pixify.com/blog/use-google-plus-to-improve-your-ui /

새 버튼은 다음과 같습니다.

Firefox 용 Firebug 플러그인을 사용 하여 버튼의 CSS를 볼 수 있습니다.

가장 큰 문제는 브라우저에서 작동하게 만드는 것입니다.

정말 필요한지 여부를 강하게 고려해야한다고 생각합니다. Google은 필요한 버튼과 언어가 너무 많기 때문에 이와 같은 것을 만들어서 큰 이익을 얻습니다. 나는 대부분의 사이트와 응용 프로그램이 이미지를 사용하는 것만 큼 잘 될 것이라고 생각합니다.

그러나 오픈 소스 구성 요소는 좋은 생각입니다. 부와 노력을 널리 퍼 뜨리십시오.

여기서 작업의 대부분은 아마도 디자인이 아닐 것입니다.이 게시물은 이미 그라디언트 효과에 대한 훌륭한 How-To입니다.

문제는 이것이 모든 브라우저에서 작동하도록하는 것입니다.보다 구체적으로는 IE6 및 IE7의 기발한 쓰레기 더미입니다.

jQuery로 다시 작성되는 표준 버튼을 사용하여 올바른 길을 가고 있다고 생각합니다. 그러면 화면 판독기에서 계속 액세스 할 수 있고 정말 오래된 브라우저에서는 성능이 저하 될 수 있습니다.

HTML의 경우 가장 좋은 방법은 각 브라우저로 Gmail을 방문하여 어떤 HTML이 생성되는지 확인하는 것입니다. IE6, IE7 (쿼크 모드가 필요한지 여부에 따라) 및 기타 모든 항목에서 완전히 다를 것으로 예상합니다. .

이것들은 클로저 라이브러리의 일부로 출시되었습니다 : 버튼 데모보기

웹 개발자 도구 모음 CSS는 항목에 적용되는 무엇을 말할 것이다 CSS는 메뉴에서 뷰 스타일 정보가 있습니다. 해당 메뉴에는 CSS 편집 기능이있어 페이지에 미치는 영향을 확인하기 위해 즉시 CSS를 변경할 수 있습니다.

클로저 라이브러리에 대한 링크가있는 게시물은 적용되지 않습니다. 클로저 라이브러리의 일부로 출시 된 것은 그라디언트 가있는 버튼을 사용 합니다 .

나열된 다른 솔루션은 쓸모가 없습니다. 거기에서 이동하여 Gmail이 작동하는 모든 브라우저에서 이러한 버튼을 작동시킬 수는 없습니다. Bowman이 자신의 사이트에서 보여주는 것은 작동 코드가 아닙니다.