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

적용 후

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>

CSS로 잔물결효과

CSS

.dot{width:12px;height:12px;background-color:#f33;border-radius:100%;display:inline-block}
.dot .ping{border:1px solid #f33;width:12px;height:12px;opacity:1;background-color:rgba(238,46,36,0.2);border-radius:100%;-webkit-animation-duration:1.25s;animation-durastion:1.25s;-webkit-animation-name:sonar;animation-name:sonar;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:linear;animation-timing-function:linear;display:block;margin:-1px 0 0 -1px}
@-webkit-keyframes sonar{0%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}
100%{-webkit-transform:scale(3);transform:scale(3);opacity:0}}
@keyframes sonar{0%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}
100%{-webkit-transform:scale(3);transform:scale(3);opacity:0}}

HTML

<span class="dot"><span class="ping"></span></span>

적용된모습

CSS 마우스 올리면 이미지가 움직이는(Animation) 효과

[CSS/Animation] CSS로 구현한 GIF 애니메이션 효과 (zoom-in)
마우스 오버일때 커지고 작아지는(scale) 효과로 이미지가 움직이는 효과를 낼수 있습니다.
이미지가 약간 커지면서 조금 왼쪽으로 기울어짐

CSS

<style type='text/css'>
.block-image{float:left;width:247px;height:158px;margin-right:20px}
.block-image .thumb{width:100%;height:158px;position:relative;display:block;z-index:2;border-radius:2px;overflow:hidden}
.block-image a{width:100%;height:158px;display:block;transition:all .3s ease-out!important;-webkit-transition:all .3s ease-out!important;-moz-transition:all .3s ease-out!important;-o-transition:all .3s ease-out!important}
.block-image a:hover{-webkit-transform:scale(1.1) rotate(-1.5deg)!important;-moz-transform:scale(1.1) rotate(-1.5deg)!important;transform:scale(1.1) rotate(-1.5deg)!important;transition:all .3s ease-out!important;-webkit-transition:all .3s ease-out!important;-moz-transition:all .3s ease-out!important;-o-transition:all .3s ease-out!important}
</style>

HTML

<div class="block-image"><div class='thumb'>
</div></div>

DIV안에 이미지를 넣으시면 나타납니다.

<div class="block-image">
<a href="https://2.bp.blogspot.com/-fFAvM9GTJ9U/VnaO_ny5OhI/AAAAAAAAAOg/7X9_xua3Fz0/s1600/blogger_log.png" imageanchor="1"><img border="0" src="https://2.bp.blogspot.com/-fFAvM9GTJ9U/VnaO_ny5OhI/AAAAAAAAAOg/7X9_xua3Fz0/s1600/blogger_log.png" /></a>
</div>

아래는 적용된 효과입니다.

CSS만으로 꾸며진 움직이는 그림

재미있는 CSS효과가 있어 소개합니다. 보통은 포토샵으로 디자인을 하지만 포토샵을 잘 다루시지 못하시는 분은 CSS를 통해서 디자인을 하셔도 무방합니다. 오히려 예쁜 버튼을 만드실 수 있습니다. CSS의 기본적은 소스를 공개합니다.

재미있는 CSS효과가 있어 소개합니다. CSS만으로 만들어진 움직이는 그림입니다.

CSS

<style scoped="" type="text/css">
.ad-emots-wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-justify-content:space-around;-ms-flex-pack:distribute;justify-content:space-around;margin-bottom:40px;}
.ad-emot{border-radius:50%;position:relative;width:100px;height:100px;background-color:#FFEB96;}
.ad-emot1:after,.ad-emot1:before{position:absolute;content:"";height:10px;width:10px;background-color:#414141;border-radius:50%;top:48px;-webkit-animation:ad-emot1-muka-bergerak 5s ease-in-out infinite,ad-emot1-berkedip 2s ease-in-out infinite;animation:ad-emot1-muka-bergerak 5s ease-in-out infinite,ad-emot1-berkedip 2s ease-in-out infinite;-webkit-animation-direction:alternate;animation-direction:alternate;}
.ad-emot1:after{left:30px;}
.ad-emot1:before{left:85px;}
.ad-emot1 .mulut{position:absolute;height:3px;width:35px;background-color:#414141;border-radius:5px;top:68px;left:45px;-webkit-animation:ad-emot1-muka-bergerak 5s ease-in-out infinite;animation:ad-emot1-muka-bergerak 5s ease-in-out infinite;-webkit-animation-direction:alternate;animation-direction:alternate;}@-webkit-keyframes ad-emot1-berkedip{0%{height:10px;}97%{height:10px;}100%{height:0;}}@keyframes ad-emot1-berkedip{0%{height:10px;}97%{height:10px;}100%{height:0;}}@-webkit-keyframes ad-emot1-muka-bergerak{0%{-webkit-transform:translateX(0);transform:translateX(0);}30%{-webkit-transform:translateX(0);transform:translateX(0);}35%{-webkit-transform:translateX(-20px);transform:translateX(-20px);}65%{-webkit-transform:translateX(-20px);transform:translateX(-20px);}70%{-webkit-transform:translateX(-10px);transform:translateX(-10px);}85%{-webkit-transform:translateX(-10px);transform:translateX(-10px);}90%{-webkit-transform:translateX(0);transform:translateX(0);}100%{-webkit-transform:translateX(0);transform:translateX(0);}}@keyframes ad-emot1-muka-bergerak{0%{-webkit-transform:translateX(0);transform:translateX(0);}30%{-webkit-transform:translateX(0);transform:translateX(0);}35%{-webkit-transform:translateX(-20px);transform:translateX(-20px);}65%{-webkit-transform:translateX(-20px);transform:translateX(-20px);}70%{-webkit-transform:translateX(-10px);transform:translateX(-10px);}85%{-webkit-transform:translateX(-10px);transform:translateX(-10px);}90%{-webkit-transform:translateX(0);transform:translateX(0);}100%{-webkit-transform:translateX(0);transform:translateX(0);}}
</style>

HTML

<div class="ad-emots-wrapper">
<div class="ad-emot ad-emot1">
<div class="mulut">
</div>
</div>
</div>