죄송.
"이미지 사용 없이 거의 흡사한 모습을 css3 로만으로 만드실 수 있습니다." 라고 말씀드렸더니 이런 부탁을 하셨던 것 같은데, 이런거야 뭐 쉽죠.
색상이나 gradient 를 100% 동일하게 만들려면 작업하신 뽀샵을 여셔서 뽀샵파일에 적용했던 동일한 색상과 동일한 gradient value 를 css 에 먹여주시면 됩니다.
"이미지 사용 없이 거의 흡사한 모습을 css3 로만으로 만드실 수 있습니다." 라고 말씀드렸더니 이런 부탁을 하셨던 것 같은데, 이런거야 뭐 쉽죠.
일단 직사각형을 하나 만드신후, 그 안에 삼각형을 하나 만들어 넣으시고, 색상 조정하시고, radial gradient value 를 넣으시면 됩니다. 간단합니다.
이렇게.
색상이나 gradient 를 100% 동일하게 만들려면 작업하신 뽀샵을 여셔서 뽀샵파일에 적용했던 동일한 색상과 동일한 gradient value 를 css 에 먹여주시면 됩니다.
제가 만든 이미지가 아니니 제가 그 value 들을 눈으로 맞춰가면서 match 시켜주는 거는 시간이 오래걸리고, 지운아빠님이 직접 하시면 5분이상 안걸릴텐데요?
그럼 수고하시구요, 이미지 사용은 가급적으로 하지 않는게 좋습니다. ^^
아래는 css3 패턴을 공부/참조할 수 있는 css3 패턴 갤러리 입니다.
댓글 3개
에이.. 프로분께서 저같은 위크엔드 워리어 (주말짜집퍼) 한테 왜 이러십니까? ^^ 그냥 사각형 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 (이건 도라에몽)
게시글 목록
| 번호 | 제목 |
|---|---|
| 4672 | |
| 4670 | |
| 11126 | |
| 4659 | |
| 4654 | |
| 4646 | |
| 7050 | |
| 11150 | |
| 4637 | |
| 4623 | |
| 4617 | |
| 7047 | |
| 4605 | |
| 11250 | |
| 11110 | |
| 4594 | |
| 4580 | |
| 4571 | |
| 11102 | |
| 4562 | |
| 4547 | |
| 4535 | |
| 11249 | |
| 4519 | |
| 4506 | |
| 4493 | |
| 4484 | |
| 4473 | |
| 11141 |
디자인
여행사 시안작업입니다.
8
|
| 4465 | |
| 4450 | |
| 4432 | |
| 11099 | |
| 7044 | |
| 4416 | |
| 4412 | |
| 4399 | |
| 4395 | |
| 4387 | |
| 7043 | |
| 11097 | |
| 11091 | |
| 4382 | |
| 4377 | |
| 4368 | |
| 4364 | |
| 4362 | |
| 4360 | |
| 4355 | |
| 4353 | |
| 4349 | |
| 11047 | |
| 11023 | |
| 7039 | |
| 4341 | |
| 4325 | |
| 4320 | |
| 4318 | |
| 4314 | |
| 4308 | |
| 4301 | |
| 4297 | |
| 11021 | |
| 11020 | |
| 11015 | |
| 4295 | |
| 4288 | |
| 4278 | |
| 4272 | |
| 11010 | |
| 4270 | |
| 4266 | |
| 11006 | |
| 10888 | |
| 10886 | |
| 10882 | |
| 10879 | |
| 10876 | |
| 10874 | |
| 4255 | |
| 11248 | |
| 4254 | |
| 10871 | |
| 10869 | |
| 10867 | |
| 10865 | |
| 10863 | |
| 10861 | |
| 10859 | |
| 10787 | |
| 10717 | |
| 10686 | |
| 4247 | |
| 4231 | |
| 4228 | |
| 4218 | |
| 10681 | |
| 10660 | |
| 10657 | |
| 4213 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기