Cara Membuat Note Lebih Menarik Untuk Website Anda

Salam hangat teman-teman, semoga sehat selalu ya. Pada kesempatan kali ini saya akan mencoba berbagi tips bagaimana Cara Membuat Note Lebih Menarik Untuk Website Anda.

Terkadang teman-teman ingin membuat sebuah note untuk pemberitahuan pada website perusahaan teman-teman atau website portofolio teman. Dan note yang sekarang kita akan coba buat juga dapat mempercantik tampilan landing page teman-teman.

Ok, langsung saja saya kasih tau Cara Membuat Note Lebih Menarik Untuk Website Anda.

– Pertama ketikan codingan di bawah ini:

<!DOCTYPE html>
<html>
<head>
	<title>Note</title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<link href="https://fonts.googleapis.com/css?family=Roboto|Trirong" rel="stylesheet"
</head>
<body>
	<div class="note">
		<p id="tri">Lorem Ipsum adalah contoh teks atau dummy dalam industri 
		percetakan dan penataan huruf atau typesetting. Lorem Ipsum 
		telah menjadi standar contoh teks sejak tahun 1500an, saat 
		seorang tukang cetak yang tidak dikenal mengambil sebuah kumpulan 
		teks dan mengacaknya untuk menjadi sebuah buku contoh huruf.</p>
		<br>
		<hr>
		<br>
		<p id="roboto">Ia tidak hanya bertahan selama 5 abad, tapi juga 
		telah beralih ke penataan huruf elektronik, tanpa ada 
		perubahan apapun. Ia mulai dipopulerkan pada tahun 1960 
		dengan diluncurkannya lembaran-lembaran Letraset yang 
		menggunakan kalimat-kalimat dari Lorem Ipsum, dan seiring 
		munculnya perangkat lunak Desktop Publishing seperti 
		Aldus PageMaker juga memiliki versi Lorem Ipsum.</p>
	</div>
</body>
</html>

Ket:

Tag <hr> berfungsi memberikan garis horizontal sebagai pembatas.

Tag <br> berfungsi memberi jarak pada paragraph.

– Kedua ketikan codingan css di berikut ini dan perhatikanÂ fungsi dari style yang saya berikan:

* {padding: 0; margin:0;}
body {
	margin: auto;
}
/** Untuk membuat background note **/
.note {
    position: relative;
    width: 480px;
    padding: 1em 1.5em;
    margin: 2em auto;
    color: #fff;
    background: #1abc9c;
    overflow: hidden;}
 /** Untuk membuat lipatan pada ujung kanan note**/
.note::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    border-width: 0 16px 16px 0;
    border-style: solid;
    border-color: #fff #fff #2FAA92 #155448;
	background: #0F7561;
    display: block;
    width: 0;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
    -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
    box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
}
/** Memberi line height pada text dan align **/
.note #tri{
	line-height: 1.4em;
	text-align: justify;
    font-family: 'Trirong', sans-serif;
}
.note #roboto {
    line-height: 1.4em;
    text-align: justify;
    font-family: 'Roboto', serif;
}

Ok, sekarang kita lihat hasilnya yah teman-teman:

Nah efek yang kita berikan pada note::before tadi akan melipat bagian ujung kanan note.

Sekian tips dari saya kali ini tentang Cara Membuat Note Lebih Menarik Untuk Website Anda. Selamat mencoba dan tetap jaga kesehatan selalu yah teman-teman.

Cara Membuat Note Lebih Menarik Untuk Website Anda

Kategori