CSS로 쉽게 그라데이션 단추를 만들 수 있는 사이트
Ultimate CSS Gradient Generator
인터넷의 발전으로 과거 그림이나 플래시로 가능한 것들이 이젠는 HTML과 CSS로도 충분히 구현된다. Ultimate CSS Gradient Generator라는 사이트를 이용하면 포토샵으로 만든 것 같은 그라데이션 단추를 만들 수 있다. 크롬, 불여우등에서는 잘 동작하지만 IE에서는 조금 다르게 표시되는 것이 좀 아쉽다. 그러나 IE의 점유율이 계속 줄고 있고 IE 최신판은 나름대로 표준을 준수하려고 노력하고 있기 때문에 사용에는 큰 문제가 없을 것이라고 생각한다.
초기의 인터넷
내가 처음 인터넷을 사용하기 시작한 것은 '1993년' 쯤인 것 같다. 당시 인터넷은 일반인에게는 보급되지 않았고 PC 통신(Personal Computer)을 통해 하나망
크롬의 앵그리 버드
크롬 OS의 등장으로 크롬에서 사용할 수 있는 웹 어플도 상당히 많히 등장했다. 그런데 크롬용 웹 어플은 대부분 HTML 5로 만들어 진다. 따라서 크롬용 웹 어플은 크롬 외에 HTML 5를 지원하는 브라우저에서 모두 사용할 수 있다.
쉽게 만드는 그라데이션 단추
이야기가 잠시 옆으로 샌것 같다. 최근 블로그 디자인을 약간 바꿨다. 과거 중제목으로 사용하던 스타일을 다음 그림처럼 검은색 막대로 바꿨다. 또 테이블도 CSS를 이용해서 조금 더 깔끔하게 표시하도록 바꿨다. 그림이나 다른 항목을 배치하기 위해 사용하는 DIV 상자도 주변에 그림자가 생기도록 바꿨다. CSS에 익숙한 사람들이 디자인을 이렇게 바꾸는 것은 그리 어렵지 않을 것이라고 생각한다.
변경된 블로그 디자인
얼마 전 구글+에 올린 그림이다. 지금 디자인과 약간 차이가 있지만 크게 다르지는 않다. 중제목은 그라데이션 막대로 바꿨고 'CAPTION'와 'TH' 태그에 배경색을지정했다. 마지막으로 외곽 태그를 둥글게 만들고 그림자 효과를 주었다.
일단 블로그의 제목 막대를 보면 양 옆을 둥글게 되어있다. 그러나 더 중요한 부분은 그라데이션(Gradiention)이다. 눈치가 빠른 사람이라면 단순히 색깔만 입힌 것이 아니라 그라데이션까지 적용된 것을 알 수 있다. 모두 CSS를 사용한 것으로 CSS를 자주 사용하는 사람이라면 그리 어렵지 않게 만들 수 있다. 그러나 나처럼 가끔 CSS를 사용하는 사람에게 이런 작업은 의외로 복잡하며 번거롭다. 바로 이런 사람들에게 적당한 사이트가 있다.
Ultimate CSS Gradient Generator
바로 Ultimate CSS Gradient Generator라는 사이트이다. A powerful Photoshop-like CSS gradient editor from ColorZilla.라는 설명처럼 정말 포토샵으로 만든 단추와 같은 그라데이션 막대를 만들 수 있다. 불여우, 크롬, 사파리, Ineternet Explorer에서 동작하는 코드를 제공하고 있기 때문에 이런 막대를 만들 때 상당히 유용하다. 또 그라데이션의 방향, 투명도등 세부적인 것들까지 설정할 수 있다.
쉽게 만드는 그라데이션 막대
따라서 블로그에서 사용하고 있는 제목 막대와 같은 그라데이션 막대를 쉽게 만들려는 사람은 Ultimate CSS Gradient Generator 사이트를 이용하면 된다. 또 막대를 둥글게 만드는 것과 DIV 태그와 같은 블록 태그 주변에 그림자를 주는 것은 다음과 같은 CSS 속성을 사용하면 된다. 사용하는 방법은 어렵지 않기 때문에 따로 설명하지 않겠다. CSS와 HTML에 대한 기본적인 지식만 있으면 사용할 수 있기 때문이다.
/* 외각 둥글게 만들기 */ border-radius: 30px; -moz-border-radius: 30px; -webkit-border-radius: 30px; /* 그림자 속성 */ box-shadow: 5px 5px 7px #eee; -moz-box-shadow: 5px 5px 7px #eee; -webkit-box-shadow: 5px 5px 7px #eee; - '귀하는 차단...'라는 메시지는 왜 뜰까? 블로그를 운영하다 보면 종종 받는 질문 중 하나가 왜 차... 새창
- 설치형 블로그의 트래픽 도둑질, 어떻게 막을까? 설치형 블로그의 잇점은 상당히 많다. 가장 큰 장점은 ... 새창
- 크롬의 '바이러스 감염' 메시지, 꼭 확인하세요! 크롬을 사용하다 특정 사이트를 방문하면 바이러스 감... 새창
- 블로그 운영을 위한 기부금을 받습니다! 블로그를 운영한지 벌써 6년입니다. 사용자 수는 처음 운영... 새창
- 블로그를 아이폰 웹 어플로 만들 수 있을까? 크롬 확장을 보면 확장 외에 Web Apps이라는 것이 있다. ... 새창