Tạo giấy ghi chú bằng CSS cho Blogger/Blogspot

Create A Pure CSS Notepaper for Blogger/Blogspot

Hôm nay Iris Tips sẽ hướng dẫn cho các bạn tạo giấy ghi chú bằng CSS cho blog. Các bạn theo dõi nhé

Tạo giấy ghi chú bằng CSS cho Blogger/Blogspot

Bước 1: Vào Mẫu >> Chỉnh sửa HTML, thêm đoạn code sau trước thẻ ]]></b:skin>

 .notepad {
    background: #f6f6f6;
    box-shadow: 0 1px 4px hsla(0,0%,0%,.25);
    margin: 50px auto;
    position: relative;
    width: 492px;
    background-image: radial-gradient(#e6e6e6 21%, transparent 21%),
                      radial-gradient(#e6e6e6 10%, transparent 12%), 
                      linear-gradient(top, hsla(0,0%,0%,0) 0%, hsla(0,0%,0%,0) 95%,
                                                   hsla(180,25%,50%,.1) 95%, hsla(180,25%,50%,.1) 100%);
    background-position: 6px 6px, 6px 5px, 50% 18px;
    background-repeat: repeat-y, repeat-y, repeat;
    background-size: 48px 48px, 48px 48px, 24px 24px;
    padding: 48px 24px 24px 84px;
}

.notepad:after {
    border-left: 1px solid hsla(0,75%,50%,.2);
    border-right: 1px solid hsla(0,75%,50%,.2);
    bottom: 0;
    content: '';
    left: 58px;
    position: absolute;
    top: 0;
    width: 2px;
}

.notepad:before {
    bottom: 8px;
    border-radius: 4px;
    box-shadow: 0 10px 10px hsla(0,0%,0%,.25);
    content: '';
    height: 100px;
    max-width: 300px;
    position: absolute;
    right: 5px;
    width: 300px;
    z-index: -10;
    transform: rotate(2deg);
}

p {
    color: #333;
    font: 16px/24px serif;
    margin-bottom: 24px;
}

p:first-child:first-line {
    font-variant: small-caps;
}

p:first-child:first-letter {
    color: #444;
    float: left;
    font: bold 48px/48px UnifrakturCook, Baskerville, 'Goudy Old Style', Palatino, 'Book Antiqua', serif;
    padding-right: 12px;
}

ul {
    color: #333;
    font: italic 16px/24px serif;
    line-height: 24px;
    column-count: 2;
} 

Bước 2: Khi viết bài bạn soạn thảo theo cú pháp sau

 <article class="notepad">
NỘI DUNG
</article> 

• DEMO

Chúc bạn thành công!

Created by Arlina/Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm