Google 검색 상자의 CSS 비법은 무엇입니까?


3

Google에서 Ui를 만드는 데 사용하는 CSS 방법을 연구 중입니다. 홈페이지의 CSS 코드에 검색 창에 대한 참조가 없다는 것을 알았습니다. 테두리, 배경 이미지 또는 국경을 양식화하기 위해 일반적으로 사용되는 규칙이 아닌 단순한 입력 태그처럼 보입니다. 그럼에도 불구하고 색조와 일종의 그라데이션을 표시 할 수있을뿐만 아니라 약간 둥글며 커서 포커스에도 반응합니다.

그래서 추측은 제 것만 큼 좋습니다. Firebug를 사용하여 체크 아웃하고이 수수께끼의 바닥에 도달하도록 도와주세요.

http://www.google.com/

편집 : 그냥 명확하게, 나는 미적 판단을 만들려고 노력하고 있지 않다. Google 홈페이지의 미니멀리즘은 환상적이지만, 검색 상자 주변의 경계선을 모양 짓는 데 사용 된 기법을 찾는 데 관심이 있습니다 (CSS 사용없이).

  0

홈페이지의 단순성으로 인해 excite.com (약 2000)에서 Google로 바뀌 었습니다. 14.4 모뎀 시대로 거슬러 올라가서는 기다리지 않아도되는 검색 페이지를 갖게되었습니다. 아무것도,하지만 아무것도,하지만 검색합니다. 22 feb. 092009-02-22 10:01:08

10

Mac을 사용하고 있습니까? 모든 기본 UI 요소가 둥글고 빛을 내며 색상이 바뀌지는 않습니까?

Google 툴바와 같은 추가 기능이 있습니까? 사용자가 검색 할 수 없어도 페이지의 UI를 수정할 수 있습니까?

편집 :이 질문에서 사용 된 기술은 실제로 CSS와 관련이 없으며 브라우저와 관련이 있습니다. Google 홈 페이지의 텍스트 입력에는 적용된 CSS 스타일이 없으므로 브라우저에 표시되는 모양을 결정하기 위해 브라우저에 남아 있습니다. 여기 필드는 구글 크롬에 초점을 맞출 때의 모습입니다 :

제거 죽은 ImageShack 링크

  0

아니요, 저는 Windows Vista에 있습니다. Google 툴바도 없습니다. 나는 다른 브라우저에서 그것을 조사해 보았는데, 구글 크롬을 제외하고는 초점이 경계선을 오렌지색으로 유지하는 것을 제외하고는 거의 동일하게 보였다. 22 feb. 092009-02-22 10:01:46

  0

아! 안타깝게도 CSS 마술은 없습니다. Chrome에서 텍스트 입력과 비슷합니다. 22 feb. 092009-02-22 10:02:45

  0

오, 이런. 당연하지. 브라우저의 기본 스타일을 사용합니다. 분명히 방화범에 나타나지 않습니다. 아마 chrome.css에서 찾을 수있을거야. 하아. 감사! 22 feb. 092009-02-22 10:09:34


2

비밀이 아닙니다. 일반적인 텍스트 상자입니다 ... Google의 홈페이지는 항상 미니멀리스트로 유명합니다.

  0

답장을 보내 주셔서 감사합니다. 그러나 저는 테두리 효과를 만드는 데 사용 된 기술을 배우려고합니다. 22 feb. 092009-02-22 09:59:16

  0

나는 당신이 무엇을 보는지 모르겠다. 그러나 평범한 바닐라 텍스트 상자를보고있다. 22 feb. 092009-02-22 10:00:14

+1

어쨌든 그것이 우리에게 당신에게 말하려고하는 것입니다. 특별한 것은 없습니다. 당신이보고있는 특별한 것은 OS, 브라우저, 플러그인의 결과 또는 당신의 상상력 중 하나입니다. 22 feb. 092009-02-22 10:08:02


0

그것은 당신이이 브라우저에있는 텍스트 상자에 초점을 외부 광선 효과를 적용, 모든 크롬에 관한 것입니다.


2
자신의 홈 페이지에 대한 확인

하지 않지만 Gmail에서 동일한 작업을 수행하고, 관련 CSS가있다 :

.mFwySd:focus 
{ 
border:2px solid #73A6FF !important; 
margin:0 !important; 
outline-color:-moz-use-text-color !important; 
outline-style:none !important; 
outline-width:0 !important; 
} 

.mFwySd { 
background-color:#FFFFFF; 
border-color:#666666 #CCCCCC#CCCCCC; 
border-style:solid; 
border-width:1px; 
color:#000000; 
} 
  0

다음은이 CSS를 IE와 함께 사용하기위한 유용한 링크입니다. http://cf-bill.blogspot.com/2005/05/styling-all-input-typetext-webpage.html 26 feb. 092009-02-26 18:52:34


0

가 검색 상자를 stylizing하는 것은 보이지 않는다. 그러나 원한다면 기본 HTML 태그 input을 사용할 수 있습니다. CSS 파일에서 참조해야합니다.

input { 
    padding:???; 
    margin:???; 
    background:url(http://www.???.???/images/???.???) #FFF no-repeat 0 0; 
    color:#??????; 
    text-align:????; 
    font:normal ?em/?em arial; 
} 

이것은 검색 필드 상자를 덮는 것입니다. 버튼을 덮어야하는 경우 버튼 입력 필드에 클래스를 추가하기 만하면됩니다.

나는 항상 지금이 당신에게 당신의 모든 input 필드 전체 웹 사이트를 완벽하게 제어 할 수 있도록한다 .btn

input.btn { 
    padding:???; 
    margin:???; 
    background:url(http://www.???.???/images/???.???) #FFF no-repeat 0 0; 
    color:#??????; 
    text-align:????; 
    font:normal ?em/?em arial; 
} 

를 사용합니다.


0

파이어 폭스와 같은 일부 브라우저에서는 css3 u를 읽을 수 있으므로 코너 반경을 사용할 수 있습니다. 지금 사용하고 있습니다! 아직 w3c에서는 유효하지 않습니다.