Google의 Imageless 버튼

IT story

Google의 Imageless 버튼

hot-time 2020. 9. 5. 10:33

Google의 Imageless 버튼

최근 Google의 새로운 이미지없는 버튼에 대한 몇 가지 기사가 있습니다.

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

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

<input type="button">모양을 개선하기 위해 CSS를 사용하는 표준 (CS / imges에 대해 주로 언급 된 디자인 기사에 포함됨)
Jquery javascript를 사용하여 "onclick"이벤트에있는 버튼을 기반으로하는 사용자 지정 대화 상자를 표시합니다. 여기에는 <a>태그와 필터링을위한 검색 창이 있습니다. 해당 팝업의 테이블 레이아웃이 정상일까요?

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

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

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

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

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

그는 원래 효과를 얻기 위해 9 개의 테이블을 사용했습니다. 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>

This is their "Archive" Button, according to 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>

The CSS is more than I care to organize/paste for this. Perhaps it's just me, but when the markup/css become this heavy, I think I would much rather USE AN IMAGE (or a couple images as backgrounds. Better yet, Sprites). Besides, an image for this button would be less than a single K.

As much as I love Google, this seems a bit overkill.

Update: Google is a unique case. If you're a massive site and you wish to internationalize your content, then this image-less technique is actually really cool. It allows you to apply just about any written language to your UI, without needing to generate new images, or fear of breaking your buttons.

See Question: What are the advantages of using an imageless button?

However you decide to do it, make sure you first render the page with the default:

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

... And then use jQuery to swap the input element with your custom button that has an onClick event. This will ensure that people without JavaScript enabled will still be able to use your site.

Usability should come first!

You could use this jquery plugin I've developed. The buttons work pratically anywhere and since it's a plugin they're easy to set up and configure.

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

Updating this post for 2011:

Google launched a new design across its services in July 2011. The new Google buttons have been recreated here: http://pixify.com/blog/use-google-plus-to-improve-your-ui/

The new buttons look like this: 여기에 이미지 설명 입력

You could try using the Firebug plugin for Firefox to view the CSS on the button.

The biggest problem you are going to have will be making it work across browsers.

I think you should strongly consider whether you really need it ... Google gets a lot of bang for the buck by making something like this because of the vast number of buttons and languages that they need; I suspect that most sites and applications would be just as well-off using an image.

An open-source component is a good idea, though: spread the wealth and effort widely.

The majority of the work here probably won't be the design - those posts are already an excellent How-To on the gradient effects.

The problem is getting this working in all browsers, or more specifically the quirky piles of rubbish that are IE6 and IE7.

I think you're on the right track with a standard button that gets re-written with jQuery - that way you'll still be accessible for screen readers and can degrade nicely in really old browsers.

For the HTML I think your best bet is to visit Gmail with each browser and see what HTML is produced - I'd expect it to be completely different for IE6, IE7, (also depending on whether they need quirks-mode) and everything else.

These were released as part of the closure library: see the button demo

The Web Developer Toolbar has a view style information under the css menu that will tell you what css is applied to an item. There is also the Edit CSS feature in that menu that will let you change the CSS on the fly to see how it affects the page.

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

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

참고 URL : https://stackoverflow.com/questions/520640/googles-imageless-buttons

'IT story' 카테고리의 다른 글

Android : Activity.runOnUiThread와 View.post의 차이점은 무엇입니까? (0)	2020.09.05
Eclipse에서 pep8.py를 통합하는 방법은 무엇입니까? (0)	2020.09.05
JSON Stringify는 UTC로 인해 날짜 시간을 변경합니다. (0)	2020.09.05
base128이 사용되지 않는 이유는 무엇입니까? (0)	2020.09.04
문자열에서 선행 및 후행 0을 제거하는 방법은 무엇입니까? (0)	2020.09.04

현재글Google의 Imageless 버튼

hot-time

Google의 Imageless 버튼

Google의 Imageless 버튼

단계별 지침

'IT story' 카테고리의 다른 글

'IT story'의 다른글

티스토리툴바

Google의 Imageless 버튼

Google의 Imageless 버튼

단계별 지침

'IT story' 카테고리의 다른 글

'IT story'의 다른글

관련글

티스토리툴바