Membuat Tampilan Note Keren Di Blog Dengan CSS

Menandai tulisan yang penting pada sebuah artikel merupakan hal yang perlu dilakukan oleh penulis agar point-point penting yang ingin disampaikan ke pembaca dapat tersampaikan dengan baik.

Ada beberapa cara untuk memberikan tanda pada kata atau kalimat yang penting diantaranya menebalkan tulisan, mengubah warna tulisan, memberikan efek stabilo, mengubah tulisan menjadi tulisan kapital dan sebuah cara yang akan kita bahas pada postingan kali ini yakni dengan membuat tampilan tulisan menjadi seperti Note.

Cara Membuat Tampilan Note dengan CSS

Untuk membuat tampilan note dengan CSS cukuplah mudah, silahkan sobat ikuti tutorialnya di bawah ini.

1. Copas kode CSS berikut

.notes{ 
    position: relative; 
    width: 100%; 
    padding: 1.2em 1.4em; 
    margin: 1em auto;
    color: #3a3429;
    background: #f3dfba;
    overflow: hidden;
    line-height: 1.6em;
}

2. Contoh penggunaannya di halaman postingan

<div class="notes">ISI NOTE</div>

Tampilannya notenya kurang lebih seperti gambar di bawah ini.

Disini saya juga sudah menyediakan opsi untuk tampilan note lainnya, jika tampilan note di atas kurang menarik bagi sobat.

Pilihan Tampilan Note

1. Note Style 1

Tampilan note ini hampir sama dengan tampilan note di atas hanya saja menggunakan efek lipatan kertas pada pojok kanan atas.

.notes{
     position: relative;
     width: 100%;
     padding: 1.2em 1.4em;
     margin: 1em auto;
     color: #3a3429;
     background: #f3dfba;
     overflow: hidden;
     line-height: 1.6em;
}

.notes:before {
     content: "";
     position: absolute;
     top: 0;
     right: 0;
     border-width: 0 16px 16px 0;
     border-style: solid;
     border-color: #fefefe #fefefe #cdba95 #cdba95;
     background: #cdba95;
     box-shadow: 0 1px 1px rgb(0 0 0 / 30%), -1px 1px 1px rgb(0 0 0 / 20%);
     display: block;
     width: 0;
}

.notes:hover:before{
     display:none
}

2. Note Style 2

Tampilan note ke 2 menambahkan icon dan juga menambahkan border di sebelah kiri note

.notes{font-size: 14px;line-height: 30px;position: relative;background-color: #29323C;
color:white;margin: 35px 0 15px 15px;padding: 20px 28px 15px 35px;position: relative;
border-left: 6px solid #0A3A73;border-radius:0 0 3px 3px;} .notes:before{content: '';
background:orange url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14,17H17L19,13V7H13V13H16M6,17H9L11,13V7H5V13H8L6,17Z' fill='%23fff'/%3E%3C/svg%3E") center / 30px no-repeat;
width: 3rem;height: 3rem;position: absolute;border-radius: 100px;box-shadow: inset 0 0 0 99999px rgb(255 255 255 / 25%);
transition: background-color .2s ease;left: -28px;top: -18px}

3. Note Style 3

Tampilan note ke 3 memiliki tampilan yang lebih kalem dengan menggunakan background dengan warna yang tidak terlalu kontras.

.notes{position:relative; padding:20px 30px 20px 50px; background-color:#e1f5fe;
color:#01579b; font-size:.85rem; line-height:1.62em;border-radius:2px} 
.notes:before{content:'';position:absolute;left:18px;top:23px; width:20px;height:20px; 
background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2301579b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'><path d='M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z'/><line x1='4' y1='22' x2='4' y2='15'/></svg>") center / 20px no-repeat}

4. Note Style 4

Tampilan note yang terakhir ini cukup sederhana, mengusung tema putih dengan aksen warna biru di sisi bagian kiri note.

.notes{
    padding: 16px 24px;
    border-radius: 4px;
    display: block;
    font-size: 18px;
    line-height: 30px;
    color: rgba(37,38,94,.7);
    margin-bottom: 16px;
    background: #f8faff;
    border: 1px solid #d3dce6;
    border-left: 4px solid #0556f3;
    border-radius: 4px;
}

Tampilan note untuk kali ini hanya ada 4 saja dan akan saya update jika ada tampilan note lainnya. Untuk melihat hasil dari semua style notes di atas silahkan lihat sobat langsung ke halaman demonya.

Lihat Demo

Demikian artikel tentang Membuat Tampilan Note Keren di Blog dengan CSS semoga bermanfaat. Dan jika ada yang tidak dimengerti dari tutorial di atas silahkan tanyakan pada kolom komentar.