죄송.
"이미지 사용 없이 거의 흡사한 모습을 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만으로 도라에몽을 그린겁니까? 멋지군요..
게시판 목록
디자인
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 66 | 16년 전 | 1067 | ||
| 65 | 16년 전 | 8346 | ||
| 64 |
 sztime |
16년 전 | 3309 | |
| 63 | 16년 전 | 760 | ||
| 62 | 16년 전 | 1242 | ||
| 61 | 16년 전 | 1252 | ||
| 60 |
 빨간망토의비밀 |
16년 전 | 984 | |
| 59 |
빨간망토의비밀 |
16년 전 | 1041 | |
| 58 |
terrorboys
|
16년 전 | 1177 | |
| 57 |
 웹씨커뮤니티 |
16년 전 | 1205 | |
| 56 | 16년 전 | 1076 | ||
| 55 | 16년 전 | 2182 | ||
| 54 |
바람처럼s
|
16년 전 | 1720 | |
| 53 | 16년 전 | 932 | ||
| 52 | 16년 전 | 980 | ||
| 51 | 16년 전 | 1225 | ||
| 50 | 16년 전 | 1107 | ||
| 49 | 16년 전 | 943 | ||
| 48 | 16년 전 | 1251 | ||
| 47 |
 연후하은아빠 |
16년 전 | 1269 | |
| 46 | 17년 전 | 1190 | ||
| 45 |
바람처럼s
|
17년 전 | 1388 | |
| 44 | 17년 전 | 1116 | ||
| 43 | 17년 전 | 980 | ||
| 42 | 17년 전 | 1727 | ||
| 41 | 17년 전 | 1268 | ||
| 40 | 17년 전 | 3356 | ||
| 39 | 17년 전 | 1507 | ||
| 38 | 17년 전 | 1928 | ||
| 37 | 17년 전 | 1673 | ||
| 36 | 15년 전 | 2265 | ||
| 35 | 15년 전 | 3864 | ||
| 34 | 16년 전 | 1533 | ||
| 33 | 17년 전 | 1062 | ||
| 32 | 17년 전 | 1233 | ||
| 31 |
james
|
17년 전 | 2136 | |
| 30 |
 무식해서귀여운남자 |
17년 전 | 1361 | |
| 29 | 17년 전 | 1545 | ||
| 28 |
 미스코리아 |
17년 전 | 4478 | |
| 27 | 17년 전 | 2080 | ||
| 26 |
미스코리아 |
17년 전 | 2206 | |
| 25 | 17년 전 | 1715 | ||
| 24 |
 미스터블루 |
17년 전 | 1790 | |
| 23 | 17년 전 | 1988 | ||
| 22 | 17년 전 | 2125 | ||
| 21 | 17년 전 | 3336 | ||
| 20 | 17년 전 | 2321 | ||
| 19 |
choijinhee
|
17년 전 | 1628 | |
| 18 | 17년 전 | 1740 | ||
| 17 |
끝없는도전
|
17년 전 | 1431 | |
| 16 | 17년 전 | 1559 | ||
| 15 | 17년 전 | 1487 | ||
| 14 | 17년 전 | 1618 | ||
| 13 |
 DIGHOLIC |
17년 전 | 1685 | |
| 12 |
 TOYOU |
17년 전 | 1835 | |
| 11 | 17년 전 | 1845 | ||
| 10 | 17년 전 | 3683 | ||
| 9 | 17년 전 | 1801 | ||
| 8 | 17년 전 | 1820 | ||
| 7 | 17년 전 | 2196 | ||
| 6 | 17년 전 | 2176 | ||
| 5 | 17년 전 | 1758 | ||
| 4 |
사랑과우정
|
17년 전 | 3826 | |
| 3 | 17년 전 | 2429 | ||
| 2 | 17년 전 | 1907 | ||
| 1 | 20년 전 | 3112 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기