[강조글] 박스형 & 상단표시

적용 후

Google 블로그
독특하고 멋진 블로그를 만들어 보세요.
내 관심사를 내 스타일대로 게시하세요.
공유하고 싶은 지식이나 경험, 최신 소식이 있으신가요?
독특하고 멋진 블로그를 무료로 손쉽게 만들 수 있습니다.

<style>
blockquote{font-size:100%;background-color:#ffeaa7;border-left:none;padding:40px 25px 30px;margin:20px 0 10px;position:relative;clear:both;border-radius:12px}
.post-body blockquote:before{content:'\f10e';position:absolute;top:0;left:42px;margin:auto;margin-top:-15px;font-size:16px;font-family:FontAwesome;color:#ff6b6b;display:block;width:40px;height:40px;background:#fff;line-height:36px;border-radius:99em;text-align:center;border:3px solid #ffeaa7}
</style>

[강조글] 왼쪽바 & 쌍따옴표

적용 후


Google 블로그

<style>
blockquote {font-style: italic;color: #888;border-left: 5px solid #27ae60;margin-left: 0;padding: 10px 15px;}
blockquote:before {content: '\f10d';display: inline-block;font-family: FontAwesome;font-style: normal;font-weight: 400;line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;margin-right: 10px;color: #888;}
blockquote:after {content: '\f10e'; display: inline-block; font-family: FontAwesome; font-style: normal; font-weight: 400; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; margin-left: 10px; color: #888;}
</style>

[강조글] Animation Note

강조글 - 오른쪽 상단 모서리 변화

Google 블로그 독특하고 멋진 블로그를 만들어 보세요.

<style>
blockquote{background:#f8cf82;color:#000;font-size:15px;position:relative;padding:1.2em 1.5em;margin:1em auto;overflow:hidden;text-align:left;word-spacing:0}
blockquote:before{content:"";position:absolute;top:0;right:0;border-width:0 16px 16px 0;border-style:solid;border-color:#fff #fff #d8b471 #d8b471;background:#d8b471;display:block;width:0}
blockquote:hover:before{display:none}
</style>