Cara membuat notifikasi di html

Hari ini kita akan menggunakan desain Menu Lencana Notifikasi Menu Orman Clark dan membuatnya menggunakan HTML dan CSS. Kita akan melihat beberapa cara untuk menperoleh efeknya, termasuk penggunaan atribut data HTML5 yang mungkin tidak Anda kenal. Mari kita selami!

Table of Contents Show

Langkah 1: Markup Dasar HTML5
Langkah 2: Markup Menu
Langkah 3: Beberapa Dasar CSS
Langkah 4: Style Menu Dasar
Langkah 5: Daftar item
Langkah 6: Tag Anchor
Langkah 7: Markup Notifikasi Gelembung
Langkah 8: Styling Notifikasi Gelembung
Langkah 9: Warna Gelembung
Langkah 10: Style Hover
Langkah 11: Mengubah Markup Menu HTML
Langkah 12: Menghapus Beberapa CSS
Langkah 13: Menambahkan Beberapa CSS
Langkah 14: Warna untuk Atribut

Langkah 1: Markup Dasar HTML5

Mari kita mulai dengan membuat beberapa markup dasar. Kita akan menggunakan doctype HTML5 selama tutorial. Kita akan membuat menu itu sendiri dengan terlebih dahulu menambahkan div utama diikuti dengan daftar item yang akan menjadi setiap link menu. Kita juga menyertakan skrip HTML5 shiv (atau shim) di kepala dokumen kita. Ini dipanggil untuk bermain dengan versi Internet Explorer yang lebih lama, yang memungkinkan mereka mengenali dan membuat elemen HTML5.

<!DOCTYPE html>
<html>
  <head>

		<!--Meta tags-->
		<meta charset="utf-8">

		<!--Title-->
		<title>Menu Notification Badges</title>
		
		<!--Stylesheets-->
		<link rel="stylesheet" href="styles.css">

		<!--HTML5 Shiv-->
		<!--[if lt IE 9]>
			<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->

</head>
<body>







</body>
</html>

Untuk membuat struktur menu kita, kita akan menggunakan daftar un-ordered dengan 4 item daftar dan tag anchor di dalamnya. Anda mungkin juga ingin mengumpulkan daftar di dalam tag <nav> untuk penerapan.

Untuk demonstrasi ini, kita akan membuat div sekitar menu dengan class wrapper. Ini hanya akan digunakan untuk memindahkan menu ke tengah halaman.

Markup Anda akan terlihat seperti ini;

<!DOCTYPE html>
<html>
	<head>

		<!--Meta tags-->
		<meta charset="utf-8">

		<!--Title-->
		<title>Menu Notification Badges</title>
		
		<!--Stylesheets-->
		<link rel="stylesheet" href="styles.css">

		<!--HTML5 Shiv-->
		<!--[if lt IE 9]>
			<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->

</head>
<body>



<div class="wrapper">
	<ul class="menu">
		<li><a href="#">Profile</a></li>
		<li><a href="#">Setting</a></li>
		<li><a href="#">Notifications</a></li>
		<li><a href="#">Logout</a></li>
	</ul>	
</div>



</body>
</html>

Langkah 3: Beberapa Dasar CSS

Sebelum kita mulai styling menu, kita akan menambahkan beberapa reset dan beberapa halaman styling. Pertama-tama kita akan menambahkan reset untuk menghapus margin, padding dll dari stylesheet default browser. Selanjutnya kita akan menerapkan warna latar belakang ke body dan ukuran font 16px. Ukuran font tetap ini memastikan ukuran dasar demo kita, namun Anda mungkin memilih mengaturnya menjadi 100% sehingga memungkinkan pengguna menentukan ukuran font browser mereka. Kami akan menerapkan lebar 70% ke wrapper dan memusatkannya dengan margin-top 200px.

html, body, div, span, applet, object, iframe, h2, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; backound: transparent; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } :focus { outline: 0; } ins { text-decoration: none; } del { text-decoration: line-through; } table { border-collapse: collapse; border-spacing: 0; } a { text-decoration: none; }

body { background:#ededed; font-size:16px; }



.wrapper {
	width: 70%;
	margin: 200px auto;
}

Untuk memulai styling menu, pertama-tama kita akan fokus pada basisnya. Targetkan daftar unordered terlebih dahulu, yang telah diberi class 'menu'. Kita akan memberikan tampilan inline-block, yang memungkinkan kita untuk menentukan lebar / tinggi itu tergantung pada isinya seperti elemen blok.

Selanjutnya kita akan menerapkan radien latar belakang dengan semua prefix browser. Lalu tambahkan beberapa border radius, tapi hey apa itu ems?! Kita menggunakan ems (bukan piksel) untuk ukuran border radius relatif terhadap ukuran font. Simak demonya; Anda akan melihat radius tumbuh proporsional bersamaan dengan teks yang lebih besar.

Untuk mengetahui ukuran yang kita butuhkan, kita akan mengambil 16px (ukuran font body kita) dan membaginya dengan 3 (ukuran border radius yang diinginkan dalam px). Jadi 16px/3px = 0.188 tapi kita akan mengatasinya sampai 0,2.

Selanjutnya kita akan menerapkan border abu-abu sederhana, lalu sebuah box shadow dengan drop dan inset shadow. Jangan lupa dengan prefix browser juga!

.menu {
	display: inline-block;

	background-image: -webkit-linear-gradient(top, rgb(249, 249, 249), rgb(240, 240, 240));
	background-image: -moz-linear-gradient(top, rgb(249, 249, 249), rgb(240, 240, 240));
	background-image: -o-linear-gradient(top, rgb(249, 249, 249), rgb(240, 240, 240));
	background-image: -ms-linear-gradient(top, rgb(249, 249, 249), rgb(240, 240, 240));
	background-image: linear-gradient(top, rgb(249, 249, 249), rgb(240, 240, 240));
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#f9f9f9', EndColorStr='#f0f0f0');

	-webkit-border-radius:0.2em;
	-moz-border-radius:0.2em;
	border-radius:0.2em;

	border:1px solid #cecece;

	-webkit-box-shadow:
		inset 0px 1px 0px #fff,
		0px 1px 2px rgba(0,0,0,.06);
	-moz-box-shadow:
		inset 0px 1px 0px #fff,
		0px 1px 2px rgba(0,0,0,.06);
	box-shadow:
		inset 0px 1px 0px #fff,
		0px 1px 2px rgba(0,0,0,.06);
}

Langkah 5: Daftar item

Pindah, mari memperbaiki menu dengan styling daftar item. Pertama, kita akan mengapungkan daftar item ke kiri sehingga semuanya ada dalam satu baris dan bukan di daftar. Kita kemudian akan memposisikan mereka secara relatif, ini akan dibutuhkan nanti saat kita membuat lencana. Selanjutnya kita akan menambahkan sebuah border di sebelah kiri dan sebuah border di sebelah kanan.

Sekarang kita perlu menargetkan item daftar pertama dan daftar item terakhir, jadi kita akan melakukan ini dengan menggunakan pseudo selector; :first-child dan :last-child ( bear browser mendukung saat menggunakan ini. Untuk yang pertama kita akan menghapus border kiri dan kita akan menghapus border kanan dari daftar item terakhir.

.menu li {
	float:left;
	position:relative;

	border-right:1px solid #d8d8d8;
	border-left:1px solid #ffffff;
}
.menu li:first-child { border-left:none; }
.menu li:last-child  { border-right:none;}

Langkah 6: Tag Anchor

Hal berikutnya yang perlu kita lakukan adalah styling anchor tag. Pertama, kita akan memberi mereka font-family Helvetica Neue dengan beberapa font-stack fall back untuk orang yang tidak memiliki font Helvetica . Selanjutnya kita akan memberi mereka ukuran font 0.75em (13px/16px =0.75). Lalu kita akan menerapkan font weight bold, diikuti dengan warna #666666 dan menerapkan text shadow.

Sekarang kita akan menerapkan beberapa padding ke kiri dan kanan 1em (13px/13px = 1) dan beberapa line-height untuk memusatkan teks secara vertikal. Kita telah mendasarkan line-height pada 30px, ditafsirkan menjadi em.

.menu li a {
	font-family:'Helvetica Neue', Helvetica, sans-serif;
	font-size:0.75em;
	font-weight:bold;
	color:#666666;
	text-shadow:0px 1px 0px #ffffff;

	display: block;
	padding:0 1em;
	line-height:2.5em;
}

Menu kita sekarang mulai terlihat cukup bagus!

Langkah 7: Markup Notifikasi Gelembung

Saatnya menambahkan notifikasi gelembung kecil yang keren. Pertama, Anda harus mengganti markup HTML menu Anda dengan berikut. Kita akan membuat gelembung menggunakan tag span, lalu untuk setiap warna kita akan menerapkan class yang sesuai. Saya telah menambahkan warna pink, kuning dan biru.

<div class="wrapper">
	<ul class="menu">
		<li><a href="#">Profile<span class="pink">2</span></a></li>
		<li><a href="#">Setting<span class="yellow">3</span></a></li>
		<li><a href="#">Notifications<span class="blue">6</span></a></li>
		<li><a href="#">Logout</a></li>
	</ul>
</div>

Langkah 8: Styling Notifikasi Gelembung

Untuk membuat notifikasi gelembung, kta akan mengutamakan style tag span dengan segala hal kecuali warna dan warna border. Dengan cara ini kita bisa mengubah warna dengan mudah hanya dengan mengubah nama class.

Pertama kita akan membuat beberapa lebar dan tinggi, ambil ah 18px/12px = 1.5em. Maka kita perlu memposisikan mereka secara mutlak (0.5em dari kanan dan -2em dari atas). Selanjutnya, line height akan diterapkan ke tengah nomor vertikal dan text-align center digunakan untuk memusatkan secara horizontal.

Font-family akan diaplikasikan dengan Helvetica Neue, sekali lagi dengan fallback untuk pengguna tanpa Helvetica. Kita akan membuatnya tebal, aplikasikan warna putih lalu tambahkan text-shadow. Selanjutnya kita akan menambahkan beberapa box-shadow (kita akan menambahkan dua, satu drop shadow dan satu inset shadow). Ingatlah saat membuat ini untuk menggunakan browser prefix. Sekarang kita akan menambahkan border-radius 4em (kira-kira 50px).

Untuk tahap selanjutnya dalam prosesnya, kita akan memanfaatkan beberapa teknik CSS3 dan membuat efek hover bekerja. Pertama-tama kita akan menyembunyikan gelembung menggunakan opacity 0. Selanjutnya, untuk menciptakan animasi kecil yang keren, kita akan menggunakan beberapa transisi. Kita akan menargetkan bagian atas dan opacity dan memberitahukannya untuk ease-in dalam jangka waktu 0,3 detik (3 milidetik). Ini akan membutuhkan penerapan browser prefix termasuk -o- dan -ms-.

span {
	position:absolute;
	top:-2em;
	right: 0.5em;

	width: 1.5em;
	height: 1.5em;

	line-height:1.5em;
	text-align:center;

	ont-family:'Helvetica Neue', Helvetica, sans-serif;
	font-weight:bold;
	color:#fff;
	text-shadow:0px 1px 0px rgba(0,0,0,.15);

	-webkit-box-shadow:
		inset 0px 1px 0px rgba(255,255,255,35),
		0px 1px 1px rgba(0,0,0,.2);
	-moz-box-shadow:
		inset 0px 1px 0px rgba(255,255,255,.35),
		0px 1px 1px rgba(0,0,0,.2);
	box-shadow:
		inset 0px 1px 0px rgba(255,255,255,.35),
		0px 1px 1px rgba(0,0,0,.2);

	-webkit-border-radius:4em;
	-moz-border-radius:4em;
	border-radius:4em;

	opacity:0;
filter: alpha(opacity=0);

	-webkit-transition: .3s top ease-in, .3s opacity ease-in;
	-moz-transition: .3s top ease-in, .3s opacity ease-in;
	-o-transition: .3s top ease-in, .3s opacity ease-in;
	-ms-transition: .3s top ease-in, .3s opacity ease-in;
	transition: .3s top ease-in, .3s opacity ease-in;
}

Langkah 9: Warna Gelembung

Waktu untuk menyentuh akhir estetika pada gelembung; Menambahkan beberapa CSS untuk style warna. Ingat class yang kita tambahkan ke tag span? Ini akan membuat segalanya cukup sederhana, kita akan menargetkan setiap warna, menerapkan gradien dan warna border.

.pink {
	background-image: -webkit-linear-gradient(top, rgb(247, 130, 151), rgb(244, 102, 119));
	background-image: -moz-linear-gradient(top, rgb(247, 130, 151), rgb(244, 102, 119));
	background-image: -o-linear-gradient(top, rgb(247, 130, 151), rgb(244, 102, 119));
	background-image: -ms-linear-gradient(top, rgb(247, 130, 151), rgb(244, 102, 119));
	background-image: linear-gradient(top, rgb(247, 130, 151), rgb(244, 102, 119));
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#f78297', EndColorStr='#f46677');

	border:1px solid #ce4f5e;
}
.yellow {
	background-image: -webkit-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 72));
	background-image: -moz-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 72));
	background-image: -o-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 72));
	background-image: -ms-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 72));
	background-image: linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 72));
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#feda71', EndColorStr='#feba48');

	border:1px solid #dea94f;
}
.blue {
	background-image: -webkit-linear-gradient(top, rgb(172, 228, 248), rgb(108, 205, 243));
	background-image: -moz-linear-gradient(top, rgb(172, 228, 248), rgb(108, 205, 243));
	background-image: -o-linear-gradient(top, rgb(172, 228, 248), rgb(108, 205, 243));
	background-image: -ms-linear-gradient(top, rgb(172, 228, 248), rgb(108, 205, 243));
	background-image: linear-gradient(top, rgb(172, 228, 248), rgb(108, 205, 243));
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#ace4f8', EndColorStr='#6ccdf3');

	border:1px solid #79b5cb;
}

Langkah 10: Style Hover

Tentu saja, gelembung kita tata dengan indah, tapi sama sekali tak terlihat. Kita perlu menambahkan beberapa CSS untuk memungkinkan gelembung ditampilkan pada hover. Pertama, tambahkan beberapa warna pada tag anchor saat mereka melayang di atas, hanya abu-abu gelap sederhana. Selanjutnya kita akan menargetkan span saat item daftar induknya melayang di atas. Kami akan menambahkan opacity 1 untuk membuatnya terlihat dan mengubah nilai posisi teratas agar terlihat seolah-olah tergelincir ke bawah.

.menu li:hover a {
	color: #343434;
}

.menu li:hover a span {
	top:-1em;
	opacity:1;
filter: alpha(opacity=100);
}

Jadi Bagaimana Tentang Atribut Data HTML5?

Senang Anda bertanya ..

Untuk membuat menu dengan atribut data HTML5 pertama-tama kita perlu mengubah Markup HTML kita. Kita akan menggunakan beberapa atribut khusus untuk membuat gelembung. HTML5 memperkenalkan atribut data baru dimana nama atribut bisa menjadi apa saja asalkan setidaknya 1 karakter dan dimulai dengan 'data-'.

Untuk tutorial ini kita akan menggunakan 'data-bubble'. Ini akan memungkinkan kita menyimpan dan mengakses nilai notifikasi kita tanpa menambahkan struktur markup yang tidak perlu ke dokumen kita. Perhatikan bahwa kita juga telah memindahkan class warna kita ke tag anchor.

<div id="wrapper">
	<ul class="menu">
		<li><a href="#" class="pink" data-bubble="2">Profile</a></li>
		<li><a href="#" class="yellow" data-bubble="3">Setting</a></li>
		<li><a href="#" class="blue" data-bubble="6">Notifications</a></li>
		<li><a href="#">Logout</a></li>
	</ul>
</div>

Langkah 12: Menghapus Beberapa CSS

Karena kita tidak akan lagi bekerja dengan elemen span, Anda harus kembali ke CSS Anda dan menghapus aturan berikut;

span {
	position:absolute;
	top:-2em;
	right: 0.5em;

	width: 1.5em;
	height: 1.5em;

	line-height:1.5em;
	text-align:center;

	font-family:"Helvetica Neue";
	font-weight:bold;
	color:#fff;
	text-shadow:0px 1px 0px rgba(0,0,0,.15);

	-webkit-box-shadow:
		inset 0px 1px 0px rgba(255,255,255,35),
		0px 1px 1px rgba(0,0,0,.2);
	-moz-box-shadow:
		inset 0px 1px 0px rgba(255,255,255,.35),
		0px 1px 1px rgba(0,0,0,.2);
	box-shadow:
		inset 0px 1px 0px rgba(255,255,255,.35),
		0px 1px 1px rgba(0,0,0,.2);

	-webkit-border-radius:4em;
	-moz-border-radius:4em;
	border-radius:4em;

	opacity:0;
filter: alpha(opacity=0);

	-webkit-transition: .3s top ease-in, .3s opacity ease-in;
	-moz-transition: .3s top ease-in, .3s opacity ease-in;
	-o-transition: .3s top ease-in, .3s opacity ease-in;
	-ms-transition: .3s top ease-in, .3s opacity ease-in;
	transition: .3s top ease-in, .3s opacity ease-in;
}

.pink {
	background-image: -webkit-linear-gradient(top, rgb(247, 130, 151), rgb(244, 102, 119));
	background-image: -moz-linear-gradient(top, rgb(247, 130, 151), rgb(244, 102, 119));
	background-image: -o-linear-gradient(top, rgb(247, 130, 151), rgb(244, 102, 119));
	background-image: -ms-linear-gradient(top, rgb(247, 130, 151), rgb(244, 102, 119));
	background-image: linear-gradient(top, rgb(247, 130, 151), rgb(244, 102, 119));
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#f78297', EndColorStr='#f46677');

	border:1px solid #ce4f5e;
}
.yellow {
	background-image: -webkit-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 72));
	background-image: -moz-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 72));
	background-image: -o-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 72));
	background-image: -ms-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 72));
	background-image: linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 72));
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#feda71', EndColorStr='#feba48');

	border:1px solid #dea94f;
}
.blue {
	background-image: -webkit-linear-gradient(top, rgb(172, 228, 248), rgb(108, 205, 243));
	background-image: -moz-linear-gradient(top, rgb(172, 228, 248), rgb(108, 205, 243));
	background-image: -o-linear-gradient(top, rgb(172, 228, 248), rgb(108, 205, 243));
	background-image: -ms-linear-gradient(top, rgb(172, 228, 248), rgb(108, 205, 243));
	background-image: linear-gradient(top, rgb(172, 228, 248), rgb(108, 205, 243));
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#ace4f8', EndColorStr='#6ccdf3');

	border:1px solid #79b5cb;
}

.menu li:hover a span {
	top:-1em;
	opacity:1;
filter: alpha(opacity=100);
}

Langkah 13: Menambahkan Beberapa CSS

Sekarang mari targetkan atribut data kita, kita perlu menambahkan beberapa aturan ke CSS kita.

Ini akan terlihat sangat mirip dengan apa yang kita gunakan untuk elemen span kita. Kali ini, kita akan menargetkan elemen pseudo :after dari tag anchor dengan atribut "data-bubble". Untuk melakukannya kita menggunakan CSS Atribut Selector.

Seperti yang kita gunakan sebuah pseudo :after (dan dengan demikian menghasilkan konten), kita perlu mendefinisikan beberapa isi di dalamnya dengan konten: ''. Sekali lagi, kita akan menggunakan atribut khusus yang kita buat di HTML dan memasukkannya.

Sekali lagi, untuk mengelola visibilitas gelembung kita, kita akan memberikan opacity 1 ketika link melayang di atas. Sayangnya, karena keterbatasan dengan atribut selector kita tidak bisa menganimasikannya dengan CSS itu sendiri.

.menu li a[data-bubble]:after {
	content:attr(data-bubble);
	position:absolute;
	top:-1.25em;
	right: 0.5em;

	width: 1.5em;
	height: 1.5em;

	line-height:1.5em;
	text-align:center;

	font-family:"Helvetica Neue";
	font-weight:bold;
	color:#fff;
	text-shadow:0px 1px 0px rgba(0,0,0,.15);

	-webkit-box-shadow:
		inset 0px 1px 0px rgba(255,255,255,35),
		0px 1px 1px rgba(0,0,0,.2);
	-moz-box-shadow:
		inset 0px 1px 0px rgba(255,255,255,.35),
		0px 1px 1px rgba(0,0,0,.2);
	box-shadow:
		inset 0px 1px 0px rgba(255,255,255,.35),
		0px 1px 1px rgba(0,0,0,.2);

	-webkit-border-radius:4em;
	-moz-border-radius:4em;
	border-radius:4em;

	opacity:0;
filter: alpha(opacity=0);
}
.menu li:hover a[data-bubble]:after {
	opacity:1;
filter: alpha(opacity=100);
}

Langkah 14: Warna untuk Atribut

Terakhir, kita perlu menata konten yang dihasilkan di dalam berbagai class sehingga kita dapat mengubah warnanya dengan mudah (persis seperti yang kita lakukan dengan elemen span).

a.pink[data-bubble]:after {
	background-image: -webkit-linear-gradient(top, rgb(247, 130, 151), rgb(244, 102, 119));
	background-image: -moz-linear-gradient(top, rgb(247, 130, 151), rgb(244, 102, 119));
	background-image: -o-linear-gradient(top, rgb(247, 130, 151), rgb(244, 102, 119));
	background-image: -ms-linear-gradient(top, rgb(247, 130, 151), rgb(244, 102, 119));
	background-image: linear-gradient(top, rgb(247, 130, 151), rgb(244, 102, 119));
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#f78297', EndColorStr='#f46677');

	border:1px solid #ce4f5e;
}
a.yellow[data-bubble]:after {
	background-image: -webkit-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 72));
	background-image: -moz-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 72));
	background-image: -o-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 72));
	background-image: -ms-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 72));
	background-image: linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 72));
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#feda71', EndColorStr='#feba48');

	border:1px solid #dea94f;
}
a.blue[data-bubble]:after {
	background-image: -webkit-linear-gradient(top, rgb(172, 228, 248), rgb(108, 205, 243));
	background-image: -moz-linear-gradient(top, rgb(172, 228, 248), rgb(108, 205, 243));
	background-image: -o-linear-gradient(top, rgb(172, 228, 248), rgb(108, 205, 243));
	background-image: -ms-linear-gradient(top, rgb(172, 228, 248), rgb(108, 205, 243));
	background-image: linear-gradient(top, rgb(172, 228, 248), rgb(108, 205, 243));
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#ace4f8', EndColorStr='#6ccdf3');

	border:1px solid #79b5cb;
}

Kesimpulan

Kita telah berhasil membuat menu dengan beberapa notifikasi gelembung yang rapi dan menganimasikannya! Kita bahkan melangkah lebih jauh dan memanfaatkan teknik baru dalam HTML5.

Saya harap anda menikmati tutorial ini, terima kasih sudah membaca!