336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.
그라디언트를 어느정도 마음대로 만들 수 있는 사이트는 아래에 있는 사이트입니다.
http://www.colorzilla.com/gradient-editor/
저기서 색상을 선택해서 마음대로 만들면
CSS란에 자동으로 만들어집니다.
복사하는 방법은
CSS안의 박스를 대면 COPY가 뜨는데 그걸 누르면 클립보드에 복사되어서 ctrl + v를 사용할 수 있습니다.
Color format 을 rgba나 다른 것으로 변경 가능합니다.
저 소스만 가지고 붙여넣기하면 적용이 안되고 style태그를 만들고 적절한 div를 설정하여서 사용하면됩니다.
아래 예제 소스입니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html> <html> <head> <style> /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fefcea+0,f1da36+100;Gold+3D */ div{ width:300px; height:300px; background: rgb(254,252,234); /* Old browsers */ background: -moz-linear-gradient(top, rgba(254,252,234,1) 0%, rgba(241,218,54,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(254,252,234,1) 0%,rgba(241,218,54,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(254,252,234,1) 0%,rgba(241,218,54,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefcea', endColorstr='#f1da36',GradientType=0 ); /* IE6-9 */ } </style> </head> <body> <div></div> </body> </html> | cs |
결과는 저렇게 노란색으로 그라데이션 효과가 나옵니다.
'CSS' 카테고리의 다른 글
| (CSS) z-index가 없는 경우의 쌓임 (0) | 2016.05.16 |
|---|---|
| (CSS) animation 트랜지션 사용방법 (0) | 2016.04.29 |
| (CSS) 배경위에 텍스트가 떠있는 느낌을 표현 가능 : background-attachment:fixed (0) | 2016.04.29 |
| (CSS) 반응형 웹 글자 크기 조절 방법 (0) | 2016.04.29 |
| (CSS) float:left 속성값 썼는데 이상하게 나오면? - 가상태그 float 설정을 해제 하는 방법 (0) | 2016.04.29 |
