죄송.
"이미지 사용 없이 거의 흡사한 모습을 css3 로만으로 만드실 수 있습니다." 라고 말씀드렸더니 이런 부탁을 하셨던 것 같은데, 이런거야 뭐 쉽죠.
색상이나 gradient 를 100% 동일하게 만들려면 작업하신 뽀샵을 여셔서 뽀샵파일에 적용했던 동일한 색상과 동일한 gradient value 를 css 에 먹여주시면 됩니다.
"이미지 사용 없이 거의 흡사한 모습을 css3 로만으로 만드실 수 있습니다." 라고 말씀드렸더니 이런 부탁을 하셨던 것 같은데, 이런거야 뭐 쉽죠.
일단 직사각형을 하나 만드신후, 그 안에 삼각형을 하나 만들어 넣으시고, 색상 조정하시고, radial gradient value 를 넣으시면 됩니다. 간단합니다.
이렇게.
색상이나 gradient 를 100% 동일하게 만들려면 작업하신 뽀샵을 여셔서 뽀샵파일에 적용했던 동일한 색상과 동일한 gradient value 를 css 에 먹여주시면 됩니다.
제가 만든 이미지가 아니니 제가 그 value 들을 눈으로 맞춰가면서 match 시켜주는 거는 시간이 오래걸리고, 지운아빠님이 직접 하시면 5분이상 안걸릴텐데요?
그럼 수고하시구요, 이미지 사용은 가급적으로 하지 않는게 좋습니다. ^^
아래는 css3 패턴을 공부/참조할 수 있는 css3 패턴 갤러리 입니다.
댓글 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 (이건 도라에몽)
지운아빠님 말고 다른분들을 위해서:
사각형은 자동으로 만들어지는거고 (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만으로 도라에몽을 그린겁니까? 멋지군요..
게시판 목록
디자인
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 1166 |
 엘남매아빠 |
13년 전 | 606 | |
| 1165 | 13년 전 | 892 | ||
| 1164 | 13년 전 | 1551 | ||
| 1163 | 13년 전 | 794 | ||
| 1162 |
멀티트리플
|
13년 전 | 732 | |
| 1161 | 13년 전 | 887 | ||
| 1160 | 13년 전 | 636 | ||
| 1159 |
 인디안나라 |
13년 전 | 799 | |
| 1158 |
john123
|
13년 전 | 661 | |
| 1157 | 13년 전 | 684 | ||
| 1156 | 13년 전 | 687 | ||
| 1155 | 13년 전 | 760 | ||
| 1154 |
엘남매아빠 |
13년 전 | 1315 | |
| 1153 |
 iwebstory |
13년 전 | 885 | |
| 1152 | 13년 전 | 959 | ||
| 1151 | 13년 전 | 633 | ||
| 1150 | 13년 전 | 1070 | ||
| 1149 | 13년 전 | 1221 | ||
| 1148 |
그누배우미
|
13년 전 | 731 | |
| 1147 | 13년 전 | 2847 | ||
| 1146 |
 Maximus |
13년 전 | 961 | |
| 1145 |
dbstnwo11
|
13년 전 | 793 | |
| 1144 | 13년 전 | 667 | ||
| 1143 |
distress
|
13년 전 | 764 | |
| 1142 | 13년 전 | 965 | ||
| 1141 |
distress
|
13년 전 | 771 | |
| 1140 |
distress
|
13년 전 | 980 | |
| 1139 | 13년 전 | 528 | ||
| 1138 | 13년 전 | 4552 | ||
| 1137 | 13년 전 | 2506 | ||
| 1136 |
 울랄라커뮤니케이션스 |
13년 전 | 3892 | |
| 1135 |
울랄라커뮤니케이션스 |
13년 전 | 1955 | |
| 1134 |
 weblife |
13년 전 | 735 | |
| 1133 | 13년 전 | 923 | ||
| 1132 |
엘남매아빠 |
13년 전 | 4364 | |
| 1131 | 13년 전 | 1268 | ||
| 1130 |
울랄라커뮤니케이션스 |
13년 전 | 1306 | |
| 1129 |
울랄라커뮤니케이션스 |
13년 전 | 1006 | |
| 1128 |
아름다운세상
|
13년 전 | 4627 | |
| 1127 |
iwebstory |
13년 전 | 667 | |
| 1126 | 13년 전 | 655 | ||
| 1125 | 13년 전 | 7428 | ||
| 1124 | 13년 전 | 4596 | ||
| 1123 | 13년 전 | 4201 | ||
| 1122 |
 행복을주는사람 |
13년 전 | 2730 | |
| 1121 |
행복을주는사람 |
13년 전 | 3693 | |
| 1120 | 13년 전 | 2705 | ||
| 1119 | 13년 전 | 666 | ||
| 1118 |
엘남매아빠 |
13년 전 | 821 | |
| 1117 |
JBstyle
|
13년 전 | 2496 | |
| 1116 |
JBstyle
|
13년 전 | 1802 | |
| 1115 | 13년 전 | 1255 | ||
| 1114 |
elancer
|
13년 전 | 2644 | |
| 1113 |
아름다운세상
|
13년 전 | 1808 | |
| 1112 | 13년 전 | 2113 | ||
| 1111 |
아름다운세상
|
13년 전 | 1758 | |
| 1110 | 13년 전 | 526 | ||
| 1109 |
gender
|
13년 전 | 736 | |
| 1108 | 13년 전 | 659 | ||
| 1107 | 13년 전 | 417 | ||
| 1106 |
왈가닥루시
|
13년 전 | 547 | |
| 1105 | 13년 전 | 1790 | ||
| 1104 |
울랄라커뮤니케이션스 |
13년 전 | 1319 | |
| 1103 |
광운대학교미디어프로듀서팀
|
13년 전 | 1603 | |
| 1102 | 13년 전 | 684 | ||
| 1101 | 13년 전 | 2207 | ||
| 1100 | 13년 전 | 1638 | ||
| 1099 |
행복을주는사람 |
13년 전 | 4672 | |
| 1098 | 13년 전 | 1291 | ||
| 1097 |
 junny |
13년 전 | 1061 | |
| 1096 |
weblife |
13년 전 | 1654 | |
| 1095 | 13년 전 | 826 | ||
| 1094 | 13년 전 | 1663 | ||
| 1093 |
gender
|
13년 전 | 636 | |
| 1092 | 13년 전 | 1331 | ||
| 1091 | 13년 전 | 879 | ||
| 1090 | 13년 전 | 1067 | ||
| 1089 | 13년 전 | 1041 | ||
| 1088 | 13년 전 | 1517 | ||
| 1087 |
weblife |
13년 전 | 3075 | |
| 1086 |
elancer
|
13년 전 | 1875 | |
| 1085 | 13년 전 | 3666 | ||
| 1084 |
BackToHeaven
|
13년 전 | 2625 | |
| 1083 | 13년 전 | 856 | ||
| 1082 |
원시인교주
|
13년 전 | 1849 | |
| 1081 |
원시인교주
|
13년 전 | 2339 | |
| 1080 |
원시인교주
|
13년 전 | 2103 | |
| 1079 | 13년 전 | 3761 | ||
| 1078 | 13년 전 | 1149 | ||
| 1077 | 13년 전 | 1043 | ||
| 1076 | 13년 전 | 1665 | ||
| 1075 | 13년 전 | 668 | ||
| 1074 | 13년 전 | 623 | ||
| 1073 | 13년 전 | 1007 | ||
| 1072 |
phpman
|
13년 전 | 718 | |
| 1071 | 13년 전 | 3315 | ||
| 1070 |
JBstyle
|
13년 전 | 2120 | |
| 1069 |
JBstyle
|
13년 전 | 3164 | |
| 1068 | 13년 전 | 4860 | ||
| 1067 |
울랄라커뮤니케이션스 |
13년 전 | 1885 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기