Rev. 2.73

Web Designer Wall의 Nick La씨는 div, span, p, a, button, input 등 다양한 HTML 요소에 적용이 가능한 예쁜 그라디언트 버튼을 CSS3를 이용하여 만드는 방법에 대하여 포스팅했습니다. 이미지나 자바스크립트를 사용하지 않았으며, font-sizepadding속성의 값을 조절하여 쉽게 변경할 수 있습니다.

browser-preview.gif
CSS3를 사용하기 때문에 CSS3를 지원하지 않는 브라우저인 인터넷 익스플로러에서는 모양이 다르게 나타납니다.

button-states.gif
또한 버튼의 마우스 오버, 활성화 효과도 구현되어 있습니다. 그리고 그라디언트 외에도 박스 그림자, 문자 그림자, 둥근 모서리 효과도 함께 적용되어 있습니다.

.button {
  display: inline-block;
  outline: none;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  font: 14px/100% Arial, Helvetica, sans-serif;
  padding: .5em 2em .55em;
  text-shadow: 0 1px 1px rgba(0,0,0,.3);
  -webkit-border-radius: .5em;
  -moz-border-radius: .5em;
  border-radius: .5em;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
  text-decoration: none;
}
.button:active {
  position: relative;
  top: 1px;
}

.orange {
  color: #fef4e9;
  border: solid 1px #da7c0c;
  background: #f78d1d;
  background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
  background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
.orange:hover {
  background: #f47c20;
  background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
  background: -moz-linear-gradient(top,  #f88e11,  #f06015);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
}
.orange:active {
  color: #fcd3a5;
  background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
  background: -moz-linear-gradient(top,  #f47a20,  #faa51a);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}

일반적으로 위와 같은 스타일이 적용되어 있으며 적용된 결과는 다음과 같습니다. CSS3를 지원하지 않는 IE의 경우 filter속성으로 그라디언트 효과를 만들어 내고 있습니다.

Rectangle or Rounded Can be Medium or Small

Span
Div

P Tag

H3

Gray Rounded Medium Small

Span
Div

P Tag

H3

White Rounded Medium Small

Span
Div

P Tag

H3

Orange Rounded Medium Small

Span
Div

P Tag

H3

Red Rounded Medium Small

Span
Div

P Tag

H3

Blue Rounded Medium Small

Span
Div

P Tag

H3

Rosy Rounded Medium Small

Span
Div

P Tag

H3

Green Rounded Medium Small

Span
Div

P Tag

H3

Pink Rounded Medium Small

Span
Div

P Tag

H3

CSS3 Gradient Buttons by Web Designer Wall

Comments

css3please.jpg

CSS3의 인기는 정말 대단합니다. 표준으로 자리잡기도 전에 벌써부터 크로스-브라우저를 운운하며 여러가지 사용 방법을 소개하는 내용들이 넘쳐나고 있습니다. Paul Irish씨와 Jonathan Neal씨는 CSS3에 추가된 다양한 속성들을 모든 브라우저에서 사용할 수 있는 방법을 제시하는 CSS3, Please!를 오픈했습니다. 둥근 보더, 박스 그림자, 그라디언트, RGBA, transform, font-face를 각 브라우저별로 대응하는 방법을 다루고 있습니다. 정식으로 도입하기에는 시기상조라는 생각이 듭니다만....

Comments

css3-click-chart.png

라운디드 코너, 그림자, 그라디언트, 등의 다채롭고 흥미로운 그래픽 효과를 부여할 수 있는 CSS3는 마법과도 같습니다. Impressive Webs의 Louis Lazaris씨는 CSS3를 이용하여 가능한 예시를 일목요연하게 조회하고 쉽게 응용할 수 있도록 CSS3 Click Chart를 만들었습니다. box-sizing, border-radius, shadows, RGBA colors, multiple columns, HSLA colors, gradients, multiple backgrounds 총 8개 파트로 구성되어 있으며 "?"버튼을 클릭하여 예제에 사용된 코드와 설명을 조회할 수 있습니다. 지속해서 업데이트해 나갈 예정이라고 하네요. 그라디언트 속성도 상당히 임팩트 있는걸요?

#gradient {
  background: -webkit-gradient(linear, left top, left bottom, from(#4a6378), to(#ccc), color-stop(0.5, #fff), color-stop(0.5, #6d94b4));
  background: -moz-linear-gradient(right, #340000, #B78330 70%, #FEFDA1);
}

Comments