색 스타일(color style) - 그라데이션(gradient) [Jquery, CSS]

공부/Jquery,CSS  2016.03.23 01:55

안녕하세요. 명월입니다.
이번 포스트에서는 CSS의 색 스타일에 대해 공부하겠습니다.
CSS의 색 스타일이라고 해서 단순하게 color:blue이거나 RGB(0,0,0,0), #FFFFFF의 형태를 공부하는 게 아니고 그라데이션을 공부하려고 합니다.


제 블로그에도 현재 왼쪽 메뉴 상단을 보면 그라데이션이 설정되어있네요. 저같이 디자인과 거리가 아주 먼 사람에게는 이런 그라데이션은 단비 같은 효과라고 하겠습니다. 실제로 예전에 만든 사이트는 그라데이션으로 도배를 한 적도 있어요.. 지저분할 거 같았는데 뜻밖에 이쁘더라고요...저만...ㅎㅎㅎ


색 지정을 하는 스타일에는 background-color, color, border-color 등등 몇 개가 존재합니다.. 그중에서 가장 많이 쓰는 background-color로 예제를 만들어서 자세하게 공부하겠습니다



먼저 가장 위에 있는 linear-gradient는 첫 파라미타가 180도, 실버,보라색으로 설정하면 위에서 실버색으로 해서 아래로 보라색이 됩니다.
두 번째는 to top right는 아래 왼쪽에서 위 오른쪽으로 처음은 빨강, 가운데는 흰색, 마지막은 파란색으로 그라데이션이 되겠습니다.
세 번째는 선 형식의 그라데이션이 아닌 원 형식의 그라데이션입니다. 중심이 노락색에서 녹색으로 퍼져나가는 형태입니다.
네 번째는 좌우 50px 위아래 50px인 원을 left 80px top 30px로 바탕은 아쿠아 중심은 maroon, 원의 가장자리는 올리브색으로 만들어집니다.
다섯 번째는 네이비 20%, 틸색 80%으로 그려지는 그라데이션입니다.
여섯 번째는 사선을 나타내고 일곱 여덞 번째도 원을 나타내고 있습니다.



첫 번째 두 번째는 저도 자주 쓰는 그라데이션입니다. 세 번째부터는 저도 처음 보는 그라데이션이네요.. 일곱 번째와 여덞 번째는 일반 사이트에서 쓰기에는 무리가 있어보이는 형태이네요.


댓글 2개가 달렸습니다.
댓글쓰기
  1. SONYLOVE
    2016.03.23 14:11 신고 |  수정/삭제  댓글쓰기

    두번째는 저도 좋아보이네요. 자주 써먹어야 할듯 ㅎㅎ

    • 明月 v명월v
      2016.03.23 16:18 신고 |  수정/삭제

      SONYLOVE님 안녕하세요...
      SONYLOVE님 덕분에 스킨 만드는게 일단락 된듯..
      아직 버그는 많지만 SONYLOVE님 블로그 자주 방문해서 여러가지 공부하고 있습니다.