Google 검색 창의 CSS 비밀은 무엇입니까?

StackOverflow https://stackoverflow.com/questions/574671

  •  05-09-2019
  •  | 
  •  

문제

Google이 UI를 만들기 위해 사용하는 CSS 방법을 연구하고 있습니다. 홈페이지의 CSS 코드에는 검색 창에 대한 참조가 포함되어 있지 않다는 것을 깨달았습니다. 테두리, 배경 이미지 또는 일반적으로 테두리를 스타일링하는 데 사용되는 컨벤션이없는 알몸의 입력 태그처럼 보입니다. 그러나 그것은 색조와 일종의 그라디언트를 표시 할 수있을뿐만 아니라 약간 둥글고 커서 초점에도 반응합니다.

그래서, 당신의 추측은 내 것만 큼 좋습니다. Firebug를 사용하여 확인 하고이 수수께끼의 바닥에 도달하도록 도와주세요.

http://www.google.com/

편집 : 분명히, 나는 미적 판단을하려고하지 않습니다. Google 홈페이지의 미니멀리즘은 환상적이라고 생각하지만 CSS를 사용하지 않고 검색 상자 주변의 국경을 양식화하는 데 사용한 기술을 찾는 데 정말로 관심이 있습니다.

도움이 되었습니까?

해결책

Mac을 사용하고 있습니까? 모든 기본 UI 요소가 둥글고 빛을 발하고 색상이 변경되지 않습니까?

Google 도구 모음과 같은 애드온이 있습니까?

편집 :이 질문에 대한 기술은 실제로 CSS와 관련이 없으며 브라우저와 관련이 없습니다. Google 홈페이지의 텍스트 입력에는 CSS 스타일이 적용되지 않으므로 브라우저에 맡겨져 모양을 결정합니다. 필드가 Chrome에 초점을 맞출 때의 모습은 다음과 같습니다.

Dead Imageshack 링크를 제거했습니다

다른 팁

비밀이 없습니다. 일반 텍스트 상자입니다 ... Google의 홈페이지는 항상 미니멀리스트였습니다.

홈페이지에 대해서는 잘 모르겠지만 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;
}

Chrome에 관한 모든 것이며,이 브라우저를 사용하여 텍스트 상자에 집중할 때 외부 글로우 효과를 적용합니다.

Firefox와 같은 일부 브라우저가 CSS3를 읽을 수 있으므로 이제 코너 반경을 가질 수 있습니다. 아직 W3C는 유효하지 않지만.

검색 상자를 스타일링하는 것처럼 보이지 않습니다. 하지만 그들이 원한다면 기본 HTML 태그 만 사용할 수 있습니다. input. CSS 파일에 참조하면됩니다.

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

이것은 검색 필드 상자를 덮습니다. 버튼을 덮어야하는 경우 버튼 입력 필드에 클래스를 추가하십시오.

나는 항상 사용합니다 .btn

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

이제 이것은 당신에게 어떤 것에 대한 완전한 통제를 제공해야합니다 input 전체 웹 사이트의 필드.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top