이전
목록
다음
명

CSS3 와 프로그래머,그리고 웹디자인

명랑폐인
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 · 2011-03-20 (일) 18:09:02 · 2786 · 6

프로그래머가 웹사이트 제작시 짜증나는 경우가 웹디자인 부분
그중에서도 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개

라라엘
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 2011-03-20 (일) 18:11:15
그라디언트가 top -> bottom left -> right 로 지정이 되는게 좋더라구요.

가장자리 둥글게랑


이 두가지만 아주 가끔 사용합니다.
명명랑폐인
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 2011-03-20 (일) 18:34:01
디자인은 아이폰 문자함을 흉내낸것 같더라구요. 제가 만든게 아님^^
저거 css 수정해야 하는데, 도움좀 주세요.(css 잘모르는1인)
라라엘
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 2011-03-20 (일) 20:34:58
네 샘플코드 주시고 원하는 내용 말씀하시면 수정해 드릴께요
명명랑폐인
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 2011-03-20 (일) 20:55:34
http://webtalk.kr/test/test2.php
http://webtalk.kr/test/test2_2.php
원하는건 li 단위로 좌우배치가 나오는 형태입니다.
한줄은 (test2.php 처럼, 그 다음줄은 test2_2.php 처럼)
색상은 회색계열 하나 더 추가.

모바일 웹앱에서 쪽지가 왔을때 사용할려고 합니다.
(아이폰의 메세지함 UI와 동일한 형태를 만들생각)
명명랑폐인
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 2011-03-21 (월) 17:52:51
헐...님아 고수...
우왕~~~굳
댓글을 작성하시려면 로그인이 필요합니다.

프로그램

8,188건
태그 필터 (최대 3개) 전체 개발자 소스 기타 mysql 팁자료실 javascript php linux flash 정규표현식 jquery node.js mobile 웹서버 os 프로그램 강좌 썸네일 이미지관련 도로명주소 그누보드5 기획자 견적서 계약서 기획서 마케팅 제안서 seo 통계 서식 통계자료 퍼블리셔 html css 반응형 웹접근성 퍼블리싱 표준화 반응형웹 홈페이지기초 부트스트랩 angularjs 포럼 스크린리더 센스리더 개발자톡 개발자팁 퍼블리셔톡 퍼블리셔팁 기획자톡 기획자팁 프로그램강좌 퍼블리싱강좌
+
제목 글쓴이 날짜 조회
11-04-10 조회 3,580
11-04-08 조회 3,338
11-04-06 조회 3,093
11-04-05 조회 2,600
11-04-05 조회 3,105
11-04-04 조회 3,013
11-04-03 조회 2,732
11-04-02 조회 2,392
11-04-02 조회 4,118
11-04-02 조회 3,499
11-04-02 조회 2,855
11-04-01 조회 3,563
11-04-01 조회 2,351
11-04-01 조회 2,497
11-04-01 조회 3,094
11-04-01 조회 3,396
11-03-31 조회 2,850
11-03-30 조회 2,479
11-03-27 조회 2,701
11-03-27 조회 2,578
11-03-27 조회 3,472
11-03-27 조회 3,664
11-03-26 조회 3,496
11-03-25 조회 2,569
11-03-25 조회 3,123
11-03-25 조회 3,175
11-03-25 조회 3,261
11-03-24 조회 5,136
11-03-23 조회 2,565
11-03-23 조회 3,583
11-03-23 조회 2,434
11-03-22 조회 2,539
11-03-22 조회 2,346
11-03-21 조회 2,814
11-03-20 조회 3,276
11-03-20 조회 2,787
11-03-19 조회 2,640
11-03-18 조회 2,280
11-03-18 조회 3,311
11-03-18 조회 2,816
11-03-18 조회 2,515
11-03-17 조회 3,829
11-03-17 조회 2,883
11-03-17 조회 2,793
11-03-17 조회 2,323
11-03-17 조회 3,210
11-03-15 조회 4,157
11-03-15 조회 2,546
11-03-14 조회 1,993
11-03-14 조회 3,593
11-03-14 조회 3,383
11-03-14 조회 2,180
11-03-13 조회 2,758
11-03-13 조회 3,104
11-03-12 조회 2,761
11-03-12 조회 2,139
11-03-12 조회 2,122
11-03-11 조회 2,538
11-03-11 조회 2,838
11-03-11 조회 2,644
11-03-10 조회 2,354
11-03-10 조회 2,723
11-03-10 조회 2,568
11-03-10 조회 2,886
11-03-10 조회 2,360
11-03-10 조회 2,596
11-03-09 조회 2,369
11-03-09 조회 2,781
11-03-09 조회 2,128
11-03-09 조회 3,591
11-03-09 조회 2,814
11-03-09 조회 4,449
11-03-08 조회 2,843
11-03-08 조회 2,488
11-03-08 조회 2,562
11-03-08 조회 2,518
11-03-08 조회 2,003
11-03-08 조회 2,365
11-03-07 조회 2,367
11-03-07 조회 3,766
11-03-05 조회 2,455
11-03-05 조회 4,940
11-03-04 조회 2,235
11-03-04 조회 2,075
11-03-04 조회 2,186
11-03-04 조회 3,201
11-03-04 조회 2,873
11-03-04 조회 2,588
11-03-04 조회 2,619
11-03-04 조회 2,578
11-03-04 조회 2,679
11-03-04 조회 2,277
11-03-03 조회 1,878
11-03-03 조회 2,397
11-03-03 조회 3,611
11-03-03 조회 2,935
11-03-03 조회 3,298
11-03-03 조회 2,286
11-03-03 조회 2,753
11-03-03 조회 2,995
글쓰기