CSS3 와 프로그래머,그리고 웹디자인
프로그래머가 웹사이트 제작시 짜증나는 경우가 웹디자인 부분
그중에서도 UI를 구성하는 레이아웃 이미지, 버튼 이미지등일텐데요.
간단하게 보이면서도 디자이너가 해주지 않으면, 못하는 영역중 하나입니다.
포토샵을 좀 만져보면 어렵지는 않은것이나, 포토샵 프로그램을 실행하여, 텍스트나 이미지 색성을 변경한후
다시 파일로 자르고, 그걸 ftp로 올리는 일련의 과정은, 귀찮은 작업이죠.
특히나, 저처럼 게으른 프로그래머들에겐,
웹앱을 관심을 가지고 있어, HTML5, CSS3 관련 자료들을 둘러보고 있는데,
위에 얘기했던, 부분들이 CSS3 코드만으로 처리가 가능하군요.
레이아웃이미지(둥근 모서리 테이블등)나 버튼들은, 그냥 CSS로 다 처리됩니다.
(특이한 모양 버튼들도, 이미지 + CSS3로 다 가능)
참고 URL
http://codecanyon.net/category/css
css 나 간단한 코드 라이브러리, 디자인관련 부분들을 판매하는 사이트입니다.
(css3 는 IE계열은 지원이 안됩니다. IE9에선 지원한다는 얘기는 들었지만, 되는지는 확인못해봄)
http://codecanyon.net/theme_previews/110073-flexible-css3-buttons-set?index=1
http://codecanyon.net/theme_previews/137335-100-css3-pagination-styles?index=1
http://codecanyon.net/theme_previews/134187-css3-shadow-pack?index=7
아래 사진은 개발중인 프로그램의 UI로 사용하기 만든것입니다. 물론 CSS3를 사용하였고
이미지는 하나도 들어가지 않았습니다.
HTML5 (With CSS3)가 모든 브라우져에서 지원되는 날은 멀어보입니다만,
모바일웹에서는 일찍 찾아올것 같습니다.(이미 아이폰과, 안드로이드폰은 CSS3를 지원하고 있습니다.)
결론:
일요일에 사무실 나와서 일은 안하고, css3 자료만 찾아보고 있음 -_-
댓글 6개
가장자리 둥글게랑
이 두가지만 아주 가끔 사용합니다.
저거 css 수정해야 하는데, 도움좀 주세요.(css 잘모르는1인)
http://webtalk.kr/test/test2_2.php
원하는건 li 단위로 좌우배치가 나오는 형태입니다.
한줄은 (test2.php 처럼, 그 다음줄은 test2_2.php 처럼)
색상은 회색계열 하나 더 추가.
모바일 웹앱에서 쪽지가 왔을때 사용할려고 합니다.
(아이폰의 메세지함 UI와 동일한 형태를 만들생각)
우왕~~~굳