Showing posts with label CSS. Show all posts

Membuat tulisan berpangkat

Ada kalanya saya akan membuat sebuah notifikasi disebuah web yang tentunya posisi angka harus diletakkan di pojok atas.

Nah bagaimana menuliskan angka atau huruf berpangkat. Atau posisinya di kanan atas dengan menggunakan sintak html.

Berikut caranya menggunakan sintak <sup>.
Contohnya :

<html>
  <title>Test Pangkat</title>
  <style type="text/css">
 .pangkat{
      color:#fff;
             font-weight:bold;
             border-radius:100em;
             border:2px solid #D8D8D8;
             background:#E82C0C;
             padding:3px;
 }
  </style>
<body>
  <div> Notifikasi <sup id="pangkat">13</sup></div>
</body>
</html>

Hasilnya akan seperti ini

Oke Semoga bermanfaat...

[Read more]

Learn HTML, Bag 4 CSS

Bagian 4 dalam learn HTML akan membahas tentang CSS (Cascading Style Sheet).

CSS merupakan kode yang dimasukan kedalam html yang digunakan untuk mempercantik tampilan.

contoh CSS :

<!DOCTYPE html>
<html>

<head>



<body>
  This is a heading
  This is a paragraph.

Hasilnya seperti ini (Background akan berubah warna lightgrey saat anda membuka ini):

This is a heading

This is a paragraph.

[Read more]

Membuat Lingkaran atau bentuk dengan CSS

Bentuk-bentuk seperti lingkaran, kotak, segitiga dan bentuk lainya dapat membantu kita para programmer dalam mendesain web, aplikasi atau sistem yang dibuat.

Dalam hal ini penulis akan coba memperlihatkan bagaimana cara membuat bentuk lingkaran dan kotak dengan menggunakan CSS (Cascading Style Sheets).

1. Lingkaran
Code CSS sederhananya akan seperti ini :

Hasilnya akan seperti ini :

2. Kotak
Code CSS sederhananya akan seperti ini :

Hasilnya akan seperti ini :

Oke semoga bermanfaat...

[Read more]