하란

본문

CSS 코드를 통해 다양한 민주 노조 사수 효과를 경험해 봅니다< 옛날에 이미지로 했던 것이 이렇게 코드 몇 줄 입력하면 브라우저가 알아서 그려주는 이편한 세상이 되었네요. 지난 HTML/CSS/VIM 수업 마지막에 이런 걸 보시라고 수강생 분들께 알려 드렸더니, 본녀도 만들어 보고 싶어서 각 예제를 가져와서 만듬. 기본적으로 여기서 참고함: 30 Useful and Cutting Edge CSS3 Text Effect and Web Typography Tutorials

세상이 좋아져서 포토샵이 해 주던 걸 코드로 다 구현이 된다. 좋아진지 쩜 됐으되.. 그래도 놀랍지 아니한가 다 텍스트로만...!!

1. inset 효과

(여기 뭐 자기네가 올린 것도 제대로 안 써놔서 다 고쳤네 아유 귀찮아..- -_-)

[code] .inset-text { color: #566f85; background-color: #bad3ed; text-shadow: 1px 1px 0px #dae8f6; } [/code]

2. 3D 효과

[code] .threeD { text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15); } [/code]

3. 레터프레스

[code] .letterpress { color: #222; text-shadow: 0px 2px 3px #555; } [/code]

4. 엠보싱 효과

(하하 이 사이트 다른 예제들도 재밌따)

[code] .embossed { text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000; color: #9c8468; opacity: 0.3; } [/code]

5. 테두리

(이건 아마 크롬/사파리 계열에서만)

[code] .stroke { -webkit-text-stroke: 1px black; } [/code]

6. 입체 (?) Anaglyphic

[code] .anaglyphic { display: inline; position: relative; color: rgba(0,0,255,0.5); } .anaglyphic:after { content: "민주 노조 사수 예에~"; position: absolute; left: -5px; top: 14px; color: rgba(255,0,0,0.5); } [/code]

7. 블러

[code] .blur { color: #fff; text-shadow: 0px 0px 6px #fff, 0px 0px 3px #fff; transition: all 0.5s ease; } .blur:hover { text-shadow: none; } [/code]

민주노조도 좋지만 이제 더는 못 해 먹겠따 그만... -_-;;;; 민주 노조 사수 꼭 하자 두 번 하자 ㅋㅋ