Archive

Archive for the ‘CSS’ Category

TUTORIAL CSS : Pengenalan Dasar CSS

July 31st, 2012

Pengenalan Dasar CSS – Apa itu CSS? pasti banyak yang sudah tahu apa kepanjangan dari CSS. CSS atau Cascading Style Sheets, CSS tidak bisa berdiri sendiri, maksutnya saya CSS akan berfungsi jika digabung dengan HTML. Ibaratnya begini, HTML adalah kerangka web sedangkan CSS yang akan mengatur tata letak, warna, gaya sebuah web dan mendefinisikan elemen yang akan ditampilakan oleh HTML. OK! sampai disini saya anggap Anda paham dan sepaham dengan saya . Seperti judulnya, perjumpaan kita dia akhir minggu bulan ini, kita akan belajar tentanf Tutorial CSS : Pengenalan Dasar CSS.
Read more…

CSS , , ,

Kode CSS Ribbon2

July 23rd, 2012

Cara Membuat Desain Ribbon Dengan CSS

Kode CSS Ribbon – CSS dibawah adalah kode untuk ribbon dengan hasil seperti diatas. Untuk melihat kode HTML dasar untuk ditempatkan pada elemen yang akan ditambahkan atau overlapped, disini.

Read more…

CSS , ,

Kode CSS Ribbon1

July 23rd, 2012

Cara Membuat Desain Ribbon Dengan CSS

Dibawah ini adalah contoh CSS membuat ribbon dengan hasil seperti gambar diatas. Untuk menjalankan kode CSS ini, lihat HTML dasar disini

Read more…

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" />

CSS ,