친효 포스트잇 적용하기
2021. 12. 8. 20:13
반응형
친효 스킨에서 보면 포스트잇 모듈이 있다. 아래와 같은 이미지로 한번 스킨에 적용시켜보고 사용해보겠다.
포스트잇 모듈
css 세팅
스킨 편집 CSS로 넘어가서 아래의 코드를 추가
/*
친효애드온 : 포스트잇 모듈 (마크1) 시작
https://rgy0409.tistory.com
e-mail : rgy0409@gmail.com
*/
div.rgyPostIt {
position: relative;
display: inline-block;
padding: 20px 45px 20px 15px;
margin: 5px 0;
border: 1px solid #f8f861;
border-left: 30px solid #f8f861;
border-bottom-right-radius: 60px 10px;
font-family: 'Nanum Pen Script';
font-size: 27px;
color: #555;
word-break: break-all;
background: #ffff88; /* Old browsers */
background: -moz-linear-gradient(-45deg, #ffff88 81%, #ffff88 82%, #ffff88 82%, #ffffc6 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(81%, #ffff88), color-stop(82%, #ffff88), color-stop(82%, #ffff88), color-stop(100%, #ffffc6)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, #ffff88 81%, #ffff88 82%, #ffff88 82%, #ffffc6 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #ffff88 81%, #ffff88 82%, #ffff88 82%, #ffffc6 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, #ffff88 81%, #ffff88 82%, #ffff88 82%, #ffffc6 100%); /* IE10+ */
background: linear-gradient(135deg, #ffff88 81%, #ffff88 82%, #ffff88 82%, #ffffc6 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff88', endColorstr='#ffffc6', GradientType=1); /* IE6-9 fallback on horizontal gradient */
transition: all 0.2s;
-webkit-transition: all 0.2s;
}
div.rgyPostIt::after {
content: " ";
position: absolute;
z-index: -1;
right: 0;
bottom: 35px;
width: 150px;
height: 30px;
background-color: rgba(0, 0, 0, 0);
box-shadow: 2px 35px 5px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: 2px 35px 5px rgba(0, 0, 0, 0.4);
transform: matrix(-1, -0.1, 0, 1, 0, 0);
-webkit-transform: matrix(-1, -0.1, 0, 1, 0, 0);
-moz-transform: matrix(-1, -0.1, 0, 1, 0, 0);
-ms-transform: matrix(-1, -0.1, 0, 1, 0, 0);
-o-transform: matrix(-1, -0.1, 0, 1, 0, 0);
transition: all 0.2s;
-webkit-transition: all 0.2s;
}
div.rgyPostIt:hover {
border-bottom-right-radius: 75px 30px;
}
div.rgyPostIt:hover::after {
box-shadow: 2px 37px 7px rgba(0, 0, 0, 0.37);
-webkit-box-shadow: 2px 37px 7px rgba(0, 0, 0, 0.37);
}
div.rgyPostIt > p {
padding: 5px 0 !important;
}
div.rgyPostIt > p::before {
content:"\f198";
margin-right: 7px;
font-family: "FontAwesome";
font-weight: normal;
font-size: 20px;
vertical-align: middle;
}
div.rgyPostIt > p > a {
color: #555;
}
/* 포스트잇 모듈 (마크1) 끝 */
친효애드온-포스트잇 모듈 (마크1).txt
0.00MB
HTML 세팅
<head>...</head> 사이에 아래의 코드 추가
<link href="https://fonts.googleapis.com/css?family=Nanum+Pen+Script&display=swap" rel="stylesheet">
사용 방법
글쓰기 HTML 모드에서 다음 한줄 추가 후 감싸줄 부분에 적고자하는 메시지 입력
<div class="rgyPostIt">감싸줄부분</div>
친절한 효자손 포스트잇
※ 이 글이 도움이 되었다면 "🤍공감" 버튼을 클릭해주세요. 클릭 한번이 글 쓰는데 큰 힘이 됩니다.
