홈페이지>웹 디자인 튜토리얼>웹 표준화

CSS3 및 RGBa를 사용하여 멋진 버튼 만들기

저자：Eve Cole 업데이트 시간：2009-06-23 17:08:41

글쎄, 이 제목을 보면 먼저 IE 브라우저를 무시할 수 있습니다.

나는 미니멀리스트 성향이 있다는 것을 인정하고 최소한의 코드와 그림으로 더 많은 일을 할 수 있기를 원합니다.

CSS3는 몇 가지 새로운 기능만 추가하지만 이러한 속성은 많은 유용한 작업을 수행하고 작업을 크게 단순화할 수 있습니다. 오늘 만든 버튼은 RGBa 색상을 사용하면서 CSS3의 둥근 모서리, 상자 그림자, 텍스트 그림자 효과를 최대한 활용했습니다.

먼저 데모를 살펴보겠습니다.

CSS 쿨 버튼 데모

이 아름다운 버튼을 네 단계로 만들 수 있습니다:

1. 버튼의 기본 설정

먼저 버튼의 기본 스타일을 설정해야 합니다. 물론 입력, 버튼 태그 등을 사용할 수도 있습니다. 이 세 가지 태그 중 a 태그만 지원하므로 여기서는 a 태그를 사용합니다. :hover 의사 클래스.

인용된 내용은 다음과 같습니다.

.btn {
디스플레이: inline-block;/*ytzong 덕분에*/
/*디스플레이:블록;
부동:왼쪽;
여백:5px */
패딩: 4px 10px;
글꼴:굵게 13px/180% 타호마, 산세리프;
색상: #fff;
텍스트 장식: 없음;
오버플로:숨김;
}

ytzong Children's Shoes의 제안에 감사드립니다. 코드의 부동 및 여백 줄을 저장할 수 있는 display:inline-block으로 변경했습니다. ——[email protected]

2. 반투명 png 그라데이션 사진

이것이 여기서 사용하는 유일한 이미지입니다. 이 투명한 PNG 이미지는 색상 그라데이션을 얻는 데 사용됩니다. 이 이미지를 단색 투명도 그라데이션이라고 부를 수 있습니다. CSS에서는 이와 같은 배경 데모 + png 이미지를 사용하여 다양한 색상 그라데이션 효과를 얻을 수 있습니다. 물론 이는 CSS3의 기능은 아닙니다. IE6 이하의 브라우저를 제외하면 모든 브라우저에서 이 효과를 얻을 수 있습니다. 여기를 클릭하시면 png 파일을 보실 수 있습니다.

인용된 내용은 다음과 같습니다.

.btn {
...
배경: #222 url(sprites.png) 반복-x;
/**배경**/
}

3. 둥근 모서리

둥근 모서리(border-radius)는 현재 브라우저에서 지원하는 최고의 CSS3 기능 중 하나입니다. IE 브라우저 외에도 모든 A 수준 브라우저에서 지원하지만 대부분은 비공개 속성을 통해 구현됩니다. .

인용된 내용은 다음과 같습니다.

.btn {
...
배경: #222 url(sprites.png) 반복-x;
/**배경 이미지**/
-moz-국경-반경: 5px;
-웹킷-국경-반경: 5px;
테두리 반경: 5px;
/**둥근 모서리**/
}

4.그림자 및 RGBa

Box-shadow 및 text-shadow는 CSS3에 추가된 두 가지 중요한 새 속성으로 블록 수준 요소 그림자와 텍스트 그림자를 쉽게 구현할 수 있습니다. 하지만 그림자 색상이 반투명하면 더 좋지 않을까요? 이렇게 하면 요소가 배경과 더 잘 어우러질 것입니다. FF는 버전 3.5(현재 Firefox 3.5beta4에서 지원됨)까지 text-shadow 속성만 지원한다는 점은 주목할 가치가 있습니다.

인용된 내용은 다음과 같습니다.

 .btn {
 ...
 배경: #222 url(sprites.png) 반복-x;
 /**배경 이미지**/
 -moz-국경-반경: 5px;
 -웹킷-국경-반경: 5px;
 테두리 반경: 5px;
 /**둥근 모서리**/
 -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
 -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
 /**버튼 그림자**/
 텍스트 그림자: 0 -1px 1px rgba(0, 0, 0, 0.25);
 /**텍스트 그림자**/
 }

자, 이제 버튼이 완전히 완성되었습니다. 그것은 우리의 목표를 달성했습니다.

이 버튼은 검정색이므로 다른 색상의 버튼을 구현하기가 더 쉽습니다.

인용된 내용은 다음과 같습니다.

...
.green.btn, .green.btn:방문 {배경색: #91bd09;}
.green:hover {배경색: #749a02;}
.blue, .blue:방문 {배경색: #2daebf;}
.blue:hover {배경색: #007d9a;}
.red, .red:방문 {배경색: #e33100;}
.red:hover {배경색상: #872300;}
...

이러한 스타일은 .btn 뒤에 배치되어야 합니다. 이러한 방식으로 이러한 녹색, 파란색, 빨간색 등의 버튼의 배경색은 .btn의 배경색을 재정의할 수 있습니다. 그런 다음 사용

마지막으로 IE 브라우저에 대해 유감스럽게 생각합니다. IE7 및 IE8 브라우저에서는 이 버튼이 직각, 그라데이션 색상, 그림자 없음 및 투명 색상을 표시하지 않지만 IE6에서는 연한 파란색 배경을 표시하기 때문입니다. png 투명도를 지원하지 않습니다. IE6에서 버튼처럼 보이도록 하려면 js 다음에 IE 필터를 사용하세요.

관련 기사