Home > CSS > Cara Membuat Desain Ribbon Dengan CSS

Cara Membuat Desain Ribbon Dengan CSS

July 23rd, 2012

Cara Membuat Desain Ribbon Dengan CSS – Mengganti image dengan CSS membuat web menjadi lebih ringan, begitu juga jika ingin mempercantik blog dengan style ribbon. Dulu saya jika ingin mengganti background menu, sering menggunakan image dari pada CSS, alasannya sepele, lebih gampang dan hasilnya loading web menjadi berat.

Hari ini saya mencoba berbagi tutorial bagaimana cara membuat desain ribbon dengan CSS, tetapi sebelumnya kita harus tahu bagian bagian dari ribbon tersebut. Perhatikan gambar dibawah ini :

Cara Membuat Desain Ribbon Dengan Css

Berdasarkan skema ribbon diatas bisa saya uraikan demikian :
A : Front
B : Back Left
C : Back Right
D : Edges
1 : Front Width
2 : Ribbon height
3 : Back left width
4 : Back right width
5 : Left overlap width
6 : Right overlap width
7 : Left overlap distance
8 : Right overlap distance
9 : Top left overlap height (lihat no 11)
10 : Top right overlap height ( lihat no 12)
11 : Bottom left overlap height
12 : Bottom right overlap height

 

Cara Membuat Desain Ribbon Dengan CSS

Membuat ribbon dengan Css berarti perlu code HTML kan? Dibawah ini adalah kode HTML dasar untuk ditempatkan pada elemen yang akan ditambahkan atau overlapped.

<div class="ribbon-wrapper">
<div class="ribbon-front">
<!--TEKS TULIS DISINI -->
</div>
<div class="ribbon-edge-topleft"></div>
<div class="ribbon-edge-topright"></div>
<div class="ribbon-edge-bottomleft"></div>
<div class="ribbon-edge-bottomright"></div>
<div class="ribbon-back-left"></div>
<div class="ribbon-back-right"></div>
</div>

Setelah mengetahui kode HTML yang diperlukan dan bagian-bagian dari ribbon sekarang terserah Anda ingin membuat ribbon seperti apa, misalnya ingin membuat ribbon seperti ini :

Cara Membuat Desain Ribbon Dengan CSS

Cara Membuat Desain Ribbon Dengan CSS

CATATAN :
Jika Anda ingin demo hasil desain ribbon menggunakan CSS secara offline, copy paste kode HTML dan CSS pada notepad secara terpisah.
Misal :
1. kodehtml.html (untuk menyimpan kode html)
2. kodecss.css ( untuk kode css)

Copy code ini:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
</body>
</html>

3. Sisipkan kode HTML dibawah <body>
4. Dan untuk menampilkan ribbon, panggil file CSS dengan perintah atau kode berikut dan sisipkan dibawah </head>  :

<link href="NAMA FILE CSS" rel="stylesheet" type="text/css" />
Related Posts Plugin for WordPress, Blogger...

CSS ,


  1. No comments yet.
  1. No trackbacks yet.