Google의 Imageless 버튼

https://stackoverflow.com/questions/520640

21-08-2019
|

문제

최근 Google의 새로운 Imageless 버튼에 관한 몇 가지 기사가있었습니다.

이 새로운 버튼이 Gmail에서 어떻게 작동하는지 정말 좋아합니다. 내 사이트에서 이러한 버튼 또는 유사한 버튼을 어떻게 사용할 수 있습니까? 비슷한 외관과 느낌을 가진 오픈 소스 프로젝트가 있습니까?

jQuery/XHTML/CSS를 사용하여 이와 같은 자신의 버튼 패키지를 굴려보고 싶다면 어떤 요소를 사용할 수 있습니까? 나의 초기 생각은 다음과 같습니다.

기준 <input type="button"> 외관을 개선하기 위해 CSS와 함께 (디자인 기사는 주로 CSS/Imges에 대해 이야기했습니다.)
jQuery javaScript "on Click"이벤트의 버튼에 루팅 된 사용자 정의 대화 상자를 표시합니다. <a> 그들 안에 태그와 필터링을위한 검색 창? 해당 팝업의 테이블 레이아웃이 제정신일까요?

웹의 리버스 엔지니어링에 끔찍합니다.이 버튼을 리버스 엔지니어링하는 데 사용할 수있는 도구는 무엇입니까? Firefox의 웹 개발자 도구 모음을 사용하면 버튼 팝업 대화 상자에 사용되는 CSS 또는 JavaScript (미니어링 된 경우에도)를 실제로 볼 수 없습니다. 어떤 브라우저 도구 또는 기타 방법을 살펴보고 아이디어를 얻을 수 있습니까?

나는 Google의 IP를 훔치려 고하지 않고 유사한 버튼 기능을 어떻게 만들 수 있는지에 대한 아이디어를 얻으십시오.

해결책

- 편집- 원래 게시물에서 링크가 보이지 않았습니다. 죄송합니다! 실제 질문을 반영하기 위해 다시 쓰려고 노력할 것입니다

StopDesign은 이것에 대한 훌륭한 게시물을 가지고 있습니다 여기. 편집 20091107] 이들은 폐쇄 라이브러리: 참조 버튼 데모.

기본적으로 그는 사용자 정의 버튼입니다 쇼 간단한 CSS를 사용하여 만들어집니다.

그는 원래 9 개의 테이블을 사용하여 효과를 얻었습니다. 9 Tables

그러나 나중에 그는 상단 및 하단 테두리에 간단한 1px 왼쪽 및 오른쪽 마진을 사용하여 동일한 효과를 달성했습니다.

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

모든 코드는 다음에서 찾을 수 있습니다 사용자 정의 버튼 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에 적용 할 수 있습니다.

질문 참조 : Imageless 버튼을 사용하면 어떤 장점이 있습니까?

그러나 당신은 그것을하기로 결정하고, 먼저 기본값으로 페이지를 렌더링해야합니다.

<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/

새 버튼은 다음과 같습니다. enter image description here

당신은 그것을 사용해 볼 수 있습니다 개똥 벌레 버튼에서 CSS를 볼 수있는 Firefox 플러그인.

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

나는 당신이 정말로 필요한지 여부를 강력히 고려해야한다고 생각합니다 ... Google은 필요한 버튼과 언어로 인해 이와 같은 것을 만들어 벅에 대한 많은 것을 얻습니다. 나는 대부분의 사이트와 응용 프로그램이 이미지를 사용하는 것만 큼 잘 어울릴 것이라고 생각합니다.

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

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

문제는 모든 브라우저, 특히 IE6 및 IE7 인 기발한 쓰레기 더미 에서이 작업을 수행하는 것입니다.

나는 당신이 jQuery로 다시 작성되는 표준 버튼으로 올바른 길을 가고 있다고 생각합니다. 따라서 스크린 리더가 여전히 액세스 할 수 있으며 오래된 브라우저에서 잘 분해 할 수 있습니다.

HTML의 경우 가장 좋은 방법은 각 브라우저와 함께 Gmail을 방문하여 HTML이 생성되는 내용을 확인하는 것입니다. IE6, IE7 (Quirks -Mode가 필요한지 여부) 및 기타 모든 것에 대해 완전히 다를 것으로 기대합니다. .

이것들은 폐쇄 라이브러리: 참조 버튼 데모

그만큼 웹 개발자 도구 모음 CSS 메뉴에 뷰 스타일 정보가있어 항목에 적용되는 CSS를 알려줍니다. 해당 메뉴에는 CSS가 페이지에 어떤 영향을 미치는지 확인할 수있는 CSS 편집 기능도 있습니다.

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

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

라이센스 : CC-BY-SA ~와 함께 속성

제휴하지 않습니다 StackOverflow