일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 |
- #뉴스
- 게시판
- #image
- 웹솔루션
- #해피CGI
- #동영상
- 해피CGI
- #cgimall
- #쇼핑몰
- #솔루션
- CSS
- javascript
- #홈페이지
- 쇼핑몰
- jquery
- php
- #홈페이지제작
- #happycgi
- #jQuery
- #CSS
- happycgi
- #이미지
- 사이트제작
- #웹솔루션
- #업종별
- 해피씨지아이
- CGIMALL
- 홈페이지
- 홈페이지제작
- 솔루션
- Today
- Total
목록#shadow (6)
웹솔루션개발 22년 노하우! 해피CGI의 모든것
텍스트 그림자에 대해서 간단한 설정으로 각도, 거리, 흐릿함, 색상, 투명도를 조절하여 css를 생성해주는 사이트입니다. 마우스조작만으로 원하는 그림자를 설정할 수 있고 간단하게 소스를 복사할 수 있어서 매우 편리하네요. ^^
ext-shadow css를 이용하여 텍스트에 그림자 효과를 줄수 있습니다. text-shadow: x축값, y축값, 번짐정도, 색상값; 예시) text-shadow: 2px 2px 5px red; text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF; 위 예시와 같이 그림자를 출력할 수 있으며, 두개 이상의 그림자도 생성 가능합니다. 두개 이상의 값을 적용하면 아래와 같이 겹쳐보이는 글자를 만들어볼 수 있습니다. * 첨부된 사이트를 참고하시면 자세한 소스를 확인하실 수 있습니다. text-shadow: 5px 5px 0px #eb452b, 10px 10px 0px #efa032, 15px 15px 0px #46b59b, 20px 20px 0px #017e7f, 25px ..
Css3의 속성중인 box-shadow를 이용하여 종이가 겹쳐 있는 모양을 만들수 있습니다. HTML Css .pape { background: #fff; box-shadow: /* The top layer shadow */ 0 1px 1px rgba(0,0,0,0.15), /* The second layer */ 0 10px 0 -5px #eee, /* The second layer shadow */ 0 10px 1px -4px rgba(0,0,0,0.15), /* The third layer */ 0 20px 0 -10px #eee, /* The third layer shadow */ 0 20px 1px -9px rgba(0,0,0,0.15); /* Padding for demo purposes */..
Trendy CSS Text Shadows 는 css의 text-shadow효과를 이용한 다양한 샘플들을 정리해 놓은 사이트합니다. 간단한 그림자 효과부터 각양각색의 그림자 효과를 확인하실 수 있습니다. 또한 css코드를 확인하고 복사 할 수 있어 샘플과 동일한 효과를 쉽게 적용해보실 수 있습니다. 사이트에 있는 각 샘플 우측상단 view css를 클릭하면 사용된 css를 확인하실 수 있습니다. 샘플과 동일한 font를 사용하시고 싶으실 경우, css아래에 있는 google fonts를 클릭하시면 이미지에 사용된 폰트 페이지로 이동합니다. 복사한 css를 하나의 class에 붙여넣고 적용하고 싶은 부분에 class를 주면 샘플과 동일한 text-shadow효과를 쉽게 주실 수 있습니다.
디자인작업시, 그림자 효과를 내고 싶을때 기존에는 shadow느낌의 gif나 JPG를 반복패턴으로 영역 내에 배경이미지로 넣었습니다. 하지만 CSS로 간편하게 삽입이 가능합니다. #example2 { box-shadow: 5px 10px #888888; } 위와같이 box-shadow 기능을 이용하면 쉽게 가능합니다. 참고로 그림자를 넣게되면, 별도의 영역을 차지 하지 않으면서 그림자효과를 낼 수 있어, 가로와 세로너비에 신경쓰지 않아도 되 편리합니다. 속성을 보면, 그림자의 우측, 하단의 사이즈와 컬러를 지정한다는것을 알 수 있습니다. 활용예시 :
CSS3에는 요소(박스형태)에 그림자를 부여하는 box-shadow와 글자에 그림자를 부여하는 text-shadow가 있습니다. 글자에 그림자를 부여하는 경우는 한글 폰트의 희박성으로 효과가 미미하나 박스형태의 그림자 부여는 얼마든지 사용할 수 있습니다. CSS 결과 위와 같은 방법으로 텍스트를 디자인할 수 있습니다. 그외에도 방향과 값에 따라서 다양한 디자인 효과를 연출해낼 수 있습니다. CSS 결과 그 외 더욱 다양한 효과를 보고싶다면 아래의 링크로 활용해보시기 바랍니다. 더욱 다양한 효과 활용하기