죄송.
"이미지 사용 없이 거의 흡사한 모습을 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만으로 도라에몽을 그린겁니까? 멋지군요..
게시판 목록
디자인
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 566 | 14년 전 | 5331 | ||
| 565 |
gtm100
|
14년 전 | 1056 | |
| 564 | 14년 전 | 1784 | ||
| 563 | 14년 전 | 988 | ||
| 562 |
원시인교주
|
14년 전 | 2145 | |
| 561 | 14년 전 | 908 | ||
| 560 |
 cirrus |
14년 전 | 1328 | |
| 559 |
누리솔루션
|
14년 전 | 3105 | |
| 558 |
 날라리개발자 |
14년 전 | 1882 | |
| 557 | 14년 전 | 960 | ||
| 556 |
 weblife |
14년 전 | 3127 | |
| 555 |
weblife |
14년 전 | 3443 | |
| 554 |
weblife |
14년 전 | 3234 | |
| 553 |
weblife |
14년 전 | 2933 | |
| 552 |
weblife |
14년 전 | 5194 | |
| 551 |
weblife |
14년 전 | 5644 | |
| 550 |
weblife |
14년 전 | 3420 | |
| 549 |
weblife |
14년 전 | 5959 | |
| 548 |
weblife |
14년 전 | 5708 | |
| 547 |
weblife |
14년 전 | 3713 | |
| 546 |
내꿈은대통령
|
14년 전 | 673 | |
| 545 |
windday
|
14년 전 | 1045 | |
| 544 |
원시인교주
|
14년 전 | 1608 | |
| 543 | 14년 전 | 1194 | ||
| 542 | 14년 전 | 848 | ||
| 541 |
악마의유혹
|
14년 전 | 1501 | |
| 540 | 14년 전 | 899 | ||
| 539 |
 나스디자인 |
14년 전 | 3530 | |
| 538 |
mecandoit
|
14년 전 | 1571 | |
| 537 |
날라리개발자 |
14년 전 | 2365 | |
| 536 |
날라리개발자 |
14년 전 | 1439 | |
| 535 |
 혜민이아빠 |
14년 전 | 2500 | |
| 534 | 14년 전 | 1120 | ||
| 533 |
아름다운세상
|
14년 전 | 1675 | |
| 532 |
혜민이아빠 |
14년 전 | 2117 | |
| 531 |
 KoreaCpt |
14년 전 | 1241 | |
| 530 |
반찬투정금지
|
14년 전 | 2170 | |
| 529 |
 grapedw |
14년 전 | 3242 | |
| 528 | 14년 전 | 2389 | ||
| 527 |
내꿈은대통령
|
14년 전 | 1523 | |
| 526 | 14년 전 | 3969 | ||
| 525 |
KoreaCpt |
14년 전 | 1177 | |
| 524 | 14년 전 | 2104 | ||
| 523 | 14년 전 | 8016 | ||
| 522 |
 하루하루하루 |
14년 전 | 2309 | |
| 521 |
TzM위드컴
|
14년 전 | 2765 | |
| 520 |
하루하루하루 |
14년 전 | 1772 | |
| 519 | 14년 전 | 1550 | ||
| 518 |
하루하루하루 |
14년 전 | 2172 | |
| 517 | 14년 전 | 4063 | ||
| 516 |
Orangedesign
|
14년 전 | 1829 | |
| 515 | 14년 전 | 3305 | ||
| 514 | 14년 전 | 4632 | ||
| 513 | 14년 전 | 1410 | ||
| 512 | 14년 전 | 4043 | ||
| 511 | 14년 전 | 4251 | ||
| 510 | 14년 전 | 1858 | ||
| 509 | 14년 전 | 1988 | ||
| 508 | 14년 전 | 1169 | ||
| 507 | 14년 전 | 3055 | ||
| 506 | 14년 전 | 1725 | ||
| 505 |
하루하루하루 |
14년 전 | 3004 | |
| 504 | 14년 전 | 2529 | ||
| 503 | 14년 전 | 2737 | ||
| 502 | 14년 전 | 2719 | ||
| 501 | 14년 전 | 3878 | ||
| 500 | 14년 전 | 1873 | ||
| 499 | 14년 전 | 2198 | ||
| 498 | 14년 전 | 1834 | ||
| 497 | 14년 전 | 1867 | ||
| 496 | 14년 전 | 1710 | ||
| 495 | 14년 전 | 4826 | ||
| 494 | 14년 전 | 1879 | ||
| 493 | 14년 전 | 2727 | ||
| 492 | 14년 전 | 1115 | ||
| 491 |
 Gum둥이 |
14년 전 | 2781 | |
| 490 |
 iwebstory |
14년 전 | 1284 | |
| 489 | 14년 전 | 1749 | ||
| 488 | 14년 전 | 1529 | ||
| 487 | 14년 전 | 1636 | ||
| 486 |
내여자친구는구미호
|
14년 전 | 3407 | |
| 485 | 14년 전 | 1885 | ||
| 484 | 14년 전 | 2457 | ||
| 483 |
감각의제국
|
14년 전 | 1347 | |
| 482 |
 chanbi |
14년 전 | 1402 | |
| 481 |
내여자친구는구미호
|
14년 전 | 3463 | |
| 480 | 14년 전 | 1696 | ||
| 479 | 14년 전 | 3024 | ||
| 478 |
chanbi |
14년 전 | 1601 | |
| 477 |
SIR정회원
|
14년 전 | 1448 | |
| 476 | 14년 전 | 2109 | ||
| 475 | 14년 전 | 2221 | ||
| 474 | 14년 전 | 1244 | ||
| 473 |
chanbi |
14년 전 | 912 | |
| 472 | 14년 전 | 1424 | ||
| 471 |
chanbi |
14년 전 | 1154 | |
| 470 | 14년 전 | 1441 | ||
| 469 |
minini
|
14년 전 | 1333 | |
| 468 | 14년 전 | 1167 | ||
| 467 | 14년 전 | 1178 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기