앗? 몰랐는데 지운아빠님이 이런 요청을 하셨었네요?

디자이너톡

Maximus

프로필 보기 이 회원 글보기 이 회원의 댓글보기

· 13년 전 · 조회 958 958 · 댓글 3 3

죄송.

http://sir.co.kr/bbs/board.php?bo_table=pg_html&wr_id=13279

"이미지 사용 없이 거의 흡사한 모습을 css3 로만으로 만드실 수 있습니다." 라고 말씀드렸더니 이런 부탁을 하셨던 것 같은데, 이런거야 뭐 쉽죠.

일단 직사각형을 하나 만드신후, 그 안에 삼각형을 하나 만들어 넣으시고, 색상 조정하시고, radial gradient value 를 넣으시면 됩니다. 간단합니다.

이렇게.

색상이나 gradient 를 100% 동일하게 만들려면 작업하신 뽀샵을 여셔서 뽀샵파일에 적용했던 동일한 색상과 동일한 gradient value 를 css 에 먹여주시면 됩니다.

제가 만든 이미지가 아니니 제가 그 value 들을 눈으로 맞춰가면서 match 시켜주는 거는 시간이 오래걸리고, 지운아빠님이 직접 하시면 5분이상 안걸릴텐데요?

그럼 수고하시구요, 이미지 사용은 가급적으로 하지 않는게 좋습니다. ^^

아래는 css3 패턴을 공부/참조할 수 있는 css3 패턴 갤러리 입니다.

http://lea.verou.me/css3patterns/

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 3개

지운아빠

프로필 보기 이 회원 글보기 이 회원의 댓글보기

13년 전

지운아빠님이 직접 하시면 5분이상 안걸릴텐데요?

이건 오해십니다. ㅎㅎㅎ 예제 하나만 짜주시면 감사하겠습니다. 굽신굽신

Maximus

프로필 보기 이 회원 글보기 이 회원의 댓글보기

13년 전

에이.. 프로분께서 저같은 위크엔드 워리어 (주말짜집퍼) 한테 왜 이러십니까? ^^ 그냥 사각형 div 안에 삼각형 두개를 넣으시던가 아니면 윗쪽은 비우고 삼각형 하나만 넣으시던가 하시면 되는건데...

지운아빠님 말고 다른분들을 위해서:

사각형은 자동으로 만들어지는거고 (width+height) 삼각형은 모르시는 분들이 좀 계실 것 같네요. 근데 삼각형도 아주 간단합니다. 예제라고 할만한 것도 아닙니다.

#triangle {
width: 0;
height: 0;
border-left: 100px solid pink;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
}

이렇게만 하믄 삼각형이 만들어 집니다. 이걸 약간만 응용하면 카카오톡에 보면 보이는 텍스트 풍선, 같은 것 도 만들수 있겠죠?

그리고 radial gradient 는 사람이 그걸 다 외워서 코딩하기는 현실적으로 힘들구요, css tool 들이 몇개 있는데, 저는 radial gradient 는 이런 툴 사용으로 해결합니다.

http://www.visualcsstools.com/

css 도 좀 하다보면 생각보다 꽤 재미있습니다. (중독증 조심)

http://css3.zxq.net/doraemon/doraemon_css3.html (이건 도라에몽)

포커슷

프로필 보기 이 회원 글보기 이 회원의 댓글보기

13년 전

헐.. css만으로 도라에몽을 그린겁니까? 멋지군요..

게시판 목록

디자인

글쓰기

번호	제목	글쓴이	날짜	조회
166	[PSD] 엠백 서브페이지 입니다. [3] #디자인시안 #기타	지민이생각 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	2811
165	[PSD] 엠백 서브페이지 입니다. [3] #디자인시안 #기타	지민이생각 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	2407
164	[PSD] 오픈마켓 시안입니다. [2] #디자인시안 #기타	지민이생각 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	4605
163	[PSD] 모델나라 첫번째 시안입니다. [5] #디자인시안 #기타	지민이생각 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	3518
162	[PSD] 엠백 디자인 시안입니다. [6] #디자인시안 #기타	지민이생각 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	3088
161	[PSD] 모델나라 두번째 시안입니다. 첫번째는 용량이 커서;; [11] #디자인시안 #기타	지민이생각 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	3769
160	[PSD] 버튼시안입니다 [2] #디자인시안 #기타	지민이생각 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	3312
159	[PSD] 탑짱 서브 게시판 시안입니다. [4] #디자인시안 #기타	지민이생각 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	3268
158	[PSD] 탑짱 서브 메뉴 시안입니다. [5] #디자인시안 #기타	지민이생각 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	3444
157	윤폰트 대박~ [16] #폰트문의	카깡 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	3047
156	요 폰트 혹시 아시면 알켜주세요...ㅠ.ㅠ [3] #폰트문의	공부합세 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	1370
155	무료 폰트 [9] #폰트문의	terrorboys 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	1981
154	[PSD] 로그인 PSD파일입니다. 퍼플버젼 허접S~ 후덜덜 [19] #디자인시안 #외부로그인	꽃미남웹코디님 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	3744
153	[PSD] 로그인 PSD파일입니다. 그린계열 허접하네용-0-;; [12] #디자인시안 #로그인	웹코디 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	2543
152	폰트 저작권 관련해서 연락이 왔는데요. [10] #폰트문의	podo 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	2783
151	폰트 불법 사용한다는 공문 !! [19] #폰트문의	개가죽 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	2578
150	디자인폰트 추천 바랍니다. [7] #폰트문의	라미엔느 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	1657
149	폰트 좀 알려주세요~ [2] #폰트문의	난달처럼 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	1156
148	폰트 불법 사용 단속중이라고 합니다. [1] #폰트문의	해피정 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	2863
147	cs5 일러에서 아시아 폰트만 깨지는데 이유 알고있는분요?? [10] #폰트문의	애나양 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	2492
146	폰트검열에 대한 질문좀 드릴께요~!!! [3] #폰트문의	dakk 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	1568
145	혹시 이폰트 아시는분 폰트좀 알려주세요~ [1] #폰트문의	이츠유 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	1257
144	흠..사이트의 폰트들이 이상해진건가요 아님 이게 정상인건가요 [7] #폰트문의	헤이안 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	1339
143	[PSD File] 홈페이지 디자인 시안 [20] #디자인시안 #기타	지민이생각 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	7719
142	xml flash 한글폰트는 어떤 걸 선택하시나요 ? [4] #폰트문의	행님 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	2144
141	폰트이름이 궁금합니다. [7] #폰트문의	호이 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	2211
140	네이버, 다음 등등 무료폰트 사용하지 마세요.. [13] #폰트문의	여행아 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	4079
139	폰트 추천즘. [12] #폰트문의	terrorboys 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	1483
138	폰트좀 알려주세요 [11] #폰트문의	terrorboys 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	1947
137	코딩 폰트 바꿨습니다. [16] #폰트문의	관리자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	2447
136	배경그림의 영문 New Start! 폰트좀 알려주세요^^; 진짜 맘에 드는데~ 알려주시면 안될까요? [4] #폰트문의	지드 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	1565
135	이 폰트는 뭔가요? [6] #폰트문의	낮잠 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	1355
134	웹에서 폰트선택해 바로 이미지로 만들어주는 사이트 [10] #폰트문의	닥터귀염 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	1932
133	회원분들 글씨만 보면 무슨폰트지 아세요? [5] #폰트문의	스머프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	1309
132	이 이미지 폰트 아시는분 계신가요? [1] #폰트문의	우리아기 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	1342
131	폰트 고수님좀 이폰트뭔지좀 알려주세요(__) [2] #폰트문의	이니그마 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	1561
130	혹시 이폰트 아시나 해서 ;; #폰트문의	조효돌 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	1244
129	영문폰트 많이 있는 사이트 아세요? [4] #폰트문의	구찌맘마 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	1445
128	.. [4] #폰트문의	김장군 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	1281
127	고수님들 폰트이름좀,, #폰트문의	이니그마 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	1207
126	죄송한데 요폰트 아시는분... [2] #폰트문의	휴지통 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	1410
125	폰트좀 봐주세요 이미지처럼 깨끗하게 나오는 폰트는?? [6] #폰트문의	이니그마 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	3845
124	None 으로 폰트 도메인 주소 쓸때 뭘로 쓰세여? 작은 폰트 뭐 없을까요? [2] #폰트문의	구찌맘마 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	1315
123	이스트소프트 로고 폰트 아시는 분?? [1] #폰트문의	관악09학번 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	1801
122	아이들 숫자 공부하기 좋은 무료 폰트 아시는 분 [1] #폰트문의	연후하은아빠 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	1842
121	이폰트 아시는분 도움좀 ㅠㅠ [4] #폰트문의	조선괴뢰 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	1271
120	css에서 폰트줄때 한, 영 다르게 주려면 어떻게 하나요? [1] #폰트문의	넷스타 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	1350
119	윈도우 7에서 호환불가능 폰트..?? [13] #폰트문의	한국복지넷 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	3611
118	이 폰트이름과 폰트크기가 어떻게 되나요? [3] #폰트문의	부르타스 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	1630
117	혹시 이 폰트 이름 아시는 분~ [3] #폰트문의	뽀뺑이 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	1307
116	2폰트명 아시는분 계세요? (숫자) [2] #폰트문의	미스터블루 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	1845
115	.. [4] #폰트문의	김장군 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	1536
114	윤폰트 세트는 어디서 구할수 있을까요? [5] #폰트문의	내컴퓨터 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	1839
113	폰트명좀 부탁드립니다.. #폰트문의	누리지기 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	1255
112	이렇게 작은 폰트는 대체.. 뭔지.. [10] #폰트문의	참치캔 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	2259
111	이 폰트명 아시는분 알려주세요 [7] #폰트문의	우리아기 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	1478
110	메인시안 [21] #디자인시안 #기타	내컴퓨터 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	7273
109	폰트가 생명인디.. [1] #폰트문의	블루리치 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	1196
108	폰트명 좀 알려주세요^^;; [2] #폰트문의	조효돌 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	1237
107	이폰트하고 비슷한 무료폰트좀 알려주십시오 [2] #폰트문의	포인트 프로필 보기 이 회원 글보기 이 회원의 댓글보기	16년 전	1589
106	이폰트 이름좀 알려주세요~~ [3] #폰트문의	공부합세 프로필 보기 이 회원 글보기 이 회원의 댓글보기	16년 전	1307
105	폰트 인식 관련 질문입니다. 그림삽입 [1] #폰트문의	공부합세 프로필 보기 이 회원 글보기 이 회원의 댓글보기	16년 전	1369
104	이폰트 이름좀 알려주세요.. [13] #폰트문의	무책임 프로필 보기 이 회원 글보기 이 회원의 댓글보기	16년 전	1206
103	멋진 폰트 다운로드 사이트가 있네요 ^_^;; [4] #폰트문의	미래나무 프로필 보기 이 회원 글보기 이 회원의 댓글보기	16년 전	1603
102	폰트 이름좀 알려주세요..!! [4] #폰트문의	신종플루 프로필 보기 이 회원 글보기 이 회원의 댓글보기	16년 전	1155
101	메인시안 올립니다. [34] #디자인시안 #기타	요엘이 프로필 보기 이 회원 글보기 이 회원의 댓글보기	16년 전	8403
100	이거 무슨 폰트일까요? (--)(__) [4] #폰트문의	말랭 프로필 보기 이 회원 글보기 이 회원의 댓글보기	16년 전	1106
99	농협에서 공짜폰트를 뿌리고 있습니다. [2] #폰트문의	옵션 프로필 보기 이 회원 글보기 이 회원의 댓글보기	16년 전	2705
98	윈도우-폰트 의 글꼴을 모두 삭제하면 [4] #폰트문의	doremi 프로필 보기 이 회원 글보기 이 회원의 댓글보기	16년 전	2147
97	한글날 기념 공개폰트정리 [7] #폰트문의	neue 프로필 보기 이 회원 글보기 이 회원의 댓글보기	16년 전	1672
96	네이버 폰트라는 것을 설치하고 나니 [6] #폰트문의	무위 프로필 보기 이 회원 글보기 이 회원의 댓글보기	16년 전	1620
95	요 폰트 이름이 뭘까요? [9] #폰트문의	프로슈머 프로필 보기 이 회원 글보기 이 회원의 댓글보기	16년 전	1294
94	font 태그에서 영문폰트, 한글폰트 따로 지정할수있나요? [1] #폰트문의	마일ro 프로필 보기 이 회원 글보기 이 회원의 댓글보기	16년 전	2044
93	폰트 추천 해주세요~ ㅎㅎ [11] #폰트문의	글쟁이 프로필 보기 이 회원 글보기 이 회원의 댓글보기	16년 전	1444
92	계속 삽질 하는 웹폰트 -_- 머하나만 물어볼게요~ [4] #폰트문의	글쟁이 프로필 보기 이 회원 글보기 이 회원의 댓글보기	16년 전	1269
91	무슨 영문폰트인지 알려 주세요 [2] #폰트문의	불혹말년 프로필 보기 이 회원 글보기 이 회원의 댓글보기	16년 전	1203
90	폰트명좀 알려주셔요!! [2] #폰트문의	아이스웨덴™ 프로필 보기 이 회원 글보기 이 회원의 댓글보기	16년 전	1072
89	아래 폰트를 아시는분 알려주삼 [3] #폰트문의	도투꿀꿀이 프로필 보기 이 회원 글보기 이 회원의 댓글보기	16년 전	1125
88	이 폰트 아시는 분? [4] #폰트문의	chanbiz 프로필 보기 이 회원 글보기 이 회원의 댓글보기	16년 전	1144
87	바다폰트 무료다운 이벤트 하네요.^^. [2] #폰트문의	닥터귀염 프로필 보기 이 회원 글보기 이 회원의 댓글보기	16년 전	2120
86	이 폰트 무슨폰트인지 아시는분~ [4] #폰트문의	끼룩끼룩 프로필 보기 이 회원 글보기 이 회원의 댓글보기	16년 전	1224
85	이 폰트 이름이 뭔가요? [2] #폰트문의	여니 프로필 보기 이 회원 글보기 이 회원의 댓글보기	16년 전	1082
84	이폰트 이름이 먼지 궁금해서 올려요 .. [3] #폰트문의	조효돌 프로필 보기 이 회원 글보기 이 회원의 댓글보기	16년 전	1050
83	교정용 게시판(시안확인용) [19] #디자인시안 #게시판	파코 프로필 보기 이 회원 글보기 이 회원의 댓글보기	16년 전	5267
82	sir 유져들이 가장 즐겨쓰는 폰트는?? [13] #폰트문의	수달군 프로필 보기 이 회원 글보기 이 회원의 댓글보기	16년 전	1558
81	요 폰트 이름좀 알켜주세요~ [2] #폰트문의	공부합세 프로필 보기 이 회원 글보기 이 회원의 댓글보기	16년 전	1110
80	폰트 질문 드립니다(외곽선 글꼴을 찾고 있습니다) #폰트문의	doremi 프로필 보기 이 회원 글보기 이 회원의 댓글보기	16년 전	1468
79	포토샵에서 시안수정하다가 폰트풀림??? [3] #폰트문의	미스코리아 프로필 보기 이 회원 글보기 이 회원의 댓글보기	16년 전	1259
78	자주 사용 되어지는 폰트. [4] #폰트문의	PARKS 프로필 보기 이 회원 글보기 이 회원의 댓글보기	16년 전	3721
77	이 폰트는 어떤 건가요? [3] #폰트문의	한규 프로필 보기 이 회원 글보기 이 회원의 댓글보기	16년 전	1064
76	이거 무슨 폰트죠??? [2] #폰트문의	카트메이커 프로필 보기 이 회원 글보기 이 회원의 댓글보기	16년 전	1052
75	폰트박사님께 질문드려요~ [4] #폰트문의	PotatoChips 프로필 보기 이 회원 글보기 이 회원의 댓글보기	16년 전	1095
74	영문폰트 알고 싶슴당.. [5] #폰트문의	심심혀 프로필 보기 이 회원 글보기 이 회원의 댓글보기	16년 전	1156
73	이 폰트가 뭔지 아시는 회원님 계시나요? ^^ [7] #폰트문의	심심혀 프로필 보기 이 회원 글보기 이 회원의 댓글보기	16년 전	1033
72	무슨 폰트인지 알려 주세요 #폰트문의	불혹말년 프로필 보기 이 회원 글보기 이 회원의 댓글보기	16년 전	1051
71	혹시 이폰트명 아시는분 계시나요?? [2] #폰트문의	벚꽃향기 프로필 보기 이 회원 글보기 이 회원의 댓글보기	16년 전	1076
70	이거폰트명이 먼가요? [15] #폰트문의	유창화 프로필 보기 이 회원 글보기 이 회원의 댓글보기	16년 전	1144
69	이폰트가 무슨 폰트인지요? [1] #폰트문의	비타민 프로필 보기 이 회원 글보기 이 회원의 댓글보기	16년 전	1051
68	이 폰트 아시는분 ? -_- [9] #폰트문의	묵혼 프로필 보기 이 회원 글보기 이 회원의 댓글보기	16년 전	1165
67	이 폰트 뭔지 좀 알려주세요 [1] #폰트문의	쵸파 프로필 보기 이 회원 글보기 이 회원의 댓글보기	16년 전	1109