Cara Membuat Notifikasi Keren Menggunakan CSS3

Hallo, balik lagi ditutorial pemrograman Dumet School, kali ini saya akan menjelaskan tentang Bagaimana Cara Membuat Notifikasi Keren Menggunakan CSS3, teman teman disini sudah pernah mendengar apa itu sticky note atau notifikasi, catatan tertentu pengingat pada windows biasanya sudah disediakan tapi disini saya tidak menjelaskan sticky note pada windows yah hehe, disini saya akan menjelaskan bagaimana membuatnya menjadi lebih menarik menggunakan CSS3, penasaran?

langsung saja yu kita mulai ngoding, pastikan teman teman sudah didepan komputer atau laptops yah, oke coba teman teman tambahkan script berikut dan simpan dengan nama bebas/terserah teman teman.

<div class="container">
        <div class="sticy bg">
        	<i> Jangan Lupa Di Tanggal 31 January 2018 kita ada Reunian Sekolah</i>
            <p>&copy; DUMET School 2018</p>
        </div>
	</div>

Dan jangan lupa untuk menambahkan css juga yah bisa salinkan scriptnya berikut :

.container {
                width : 280px;
                margin: auto;
                margin-top: 10%;
            }
        	 
            .sticy {
                color: #333;
                padding: 35px;
                box-shadow: -8px -2px 10px 2px rgba(0,0,0,0.3);
                font-family: Satisfy;
            }
            
            .bg {
                background: #E0FFFF;
                -webkit-transform: rotate(-3deg);
                -moz-transform: rotate(-3deg);
                -o-transform: rotate(-3deg);
                -ms-transform: rotate(-3deg);
                transform: rotate(-2deg);
            }
            
            .sticy .judul{
                font-size: 1.5em;
                margin-bottom: 5px;
            }
            	
            .sticy p{
                text-align: right;
                color: #ADFF2F
            }

Jika sudah disave dan coba jalankan, jika berhasil makanya seperti berikut :

Cukup mudah bukan?, sekian tutorial tentang Bagaimana Cara Membuat Notifikasi Keren Menggunakan CSS3. Sampai bertemu diartikel selanjutnya dan sampai jumpa.

#KeepLearn

#IsmetMA