티스토리 서식으로 사용할수 있는 css 박스 서식

티스토리 본문에서 서식으로 사용하면 좋을것 같아서 이렇게 만들어 보았습니다.

티스토리 본문에서 사용하면 아주 좋은것 같은 스타일을 찾다가,,,,,,,찾다가 그나마 괜찮은 녀석이 있어 적용해보았습니다.

아래 스타일들은 ie에서 보아도 그리 흉하게 깨지지 않는다는 점입니다.


어떤 형식인지 한번 이미지로 참고하시기 바랍니다.





티스토리 본문에서 사용할려고 <div class="article"> 를 일부러 사용하였고 h3 의 활용하려고 클래스를 주었습니다.

html 코드는 이렇습니다.


<div class="article">
	<h3 class="box1">box1</h3>
	<h3 class="box2">box2</h3>
	<h3 class="box3">box3</h3>
</div>


수정하려면 h3 나 box1 같은 클래스는 필요없겠지요....

여하튼 이런식으로 작성되었구요.

3가지 스타일을 선택했습니다.


첫번째 스타일을 원본글 -> http://www.cssrex.com/tips-tricks/how-to-create-3d-text-using-css3/

두번째, 세번째 스타일을 원본글 -> http://line25.com/tutorials/create-a-letterpress-effect-with-css-text-shadow




첫번째 스타일.

첫번째 스타일은 css 로만 구성되어 있으며 이미지가 없습니다.




두번째 스타일.

두번째 스타일에는 이미지가 필요합니다. 공통으로 사용하려고 base64 를 활용했습니다.

코드의 일부분입니다.




세번째 스타일.

두번째와 비슷하고 컬러값만 틀립니다.



IE7,8 은 똑같습니다. IE9는 정상적으로 보이구요.


파일을 올려드리겠습니다.


index.html

style.css


이 스타일은 adsense 스킨에 포함하려고 만든것입니다.



개    개