CSS3 Transisi

Setelah yang lalu kita belajar tentang Transformasi 2D, kemudian agar lebih menarik kita tambahkan dengan efek transisi. Dengan CSS3 transisi, kita dapat menambahkan efek gerak pada elemen 2D dari satu gaya kegaya yang lain, tanpa menggunakan animasi Flash ataupun javascripts.

Tapi sayang belum seluruh browser mendukung adanya fitur CSS3 Transisi ini. Berikut beberapa browser yang mendukung fitur ini :

• Internet Explorer tidak lagi mendukung properti transisi.
• Firefox 4 membutuhkan awalan-moz-.
• Chrome dan Safari membutuhkan awalan-WebKit-.
• Opera membutuhkan awalan-o-.

Ada dua hal yang harus kita perhatikan agar CSS3 Transisi dapat bekerja dengan baik, yaitu kita harus menentukan properti css dan menentukan durasi efek. Jika nilai durasi tidak ditentukan, maka efek transisi tidak akan berpengaruh atau tidak bekerja, karena nilainya masih default yaitu "0".

Dan cara kerjanya kita menggunakan fitur mouse-over, yaitu transisi bekerja dengan kata lain elemen berubah atau bergerak ketika pointer mouse terletak pada elemen yang kita buat. Dan ketika pointer mouse keluar dari atas elemen, maka bentuk elemen kembali seperti semula.

Elemen yang menggunakan CSS3 Transisi

Berikut kode CSS3 dari contoh diatas :

<style type="text/css">
div.transisi
{
width:100px;
height:100px;
background-color:#C1C7FF;
border:3px solid #aaa;
padding:10px;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}

div.transisi:hover
{
width:300px;
}
</style>

<div class="transisi">Elemen yang menggunakan CSS3 Transisi</div>

Kita bisa menambahkan efek transisi menjadi lebih dari satu gaya, misalnya efek transisi kesamping sekaligus kebawah.

<style type="text/css">
div.transisi2
{
width:100px;
height:100px;
background-color:#C1C7FF;
border:3px solid #aaa;
padding:10px;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}

div.transisi2:hover
{
width:300px;
height:300px;
}
</style>

<div class="transisi2">Efek transisi melebar kesamping  sekaligus kebawah</div>

Berikut hasilnya :

Efek transisi melebar kesamping sekaligus kebawah

<style type="text/css">
div.transisi3
{
width:100px;
height:100px;
background-color:#C1C7FF;
border:3px solid #aaa;
padding:10px;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}

div.transisi3:hover
{
width:300px;
height:40px;
}
</style>

<div class="transisi3">Efek transisi melebar kesamping  sekaligus tinggi menyempit</div>

berikut hasilnya :

Efek transisi melebar kesamping sekaligus tinggi menyempit

 Berikut contoh lain :

<style type="text/css">
div.transisi4
{
width:100px;
height:100px;
background-color:#C1C7FF;
border:3px solid #aaa;
padding:10px;
transition:width 2s, height 2s;
-moz-transition:width 2s, height 2s,
-moz-transform 2s; /* Firefox 4 */
-webkit-transition:width 2s, height 2s,
-webkit-transform 2s; /* Safari and Chrome */
-o-transition:width 2s, height 2s,
-o-transform 2s; /* Opera */
}

div.transisi4:hover
{
width:150px;
height:150px;
transform:rotate(720deg);
-moz-transform:rotate(720deg); /* Firefox 4 */
-webkit-transform:rotate(720deg); /* Safari and Chrome */
-o-transform:rotate(720deg); /* Opera */
}
</style>

<div class="transisi4">Efek transisi membesar dan  berputar</div>

Berikut hasilnya :

Efek transisi membesar dan berputar

Selamat mencoba dan Semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda gunakan tombol berlangganan artikel yang ada disebelah kanan halaman ini, atau melalui tombol dibawah ini.

Baca artikel lain :

Transformasi 2D

Transformasi adalah sebuah efek yang memungkinkan perubahan suatu unsur atau elemen seperti bentuk, ukuran dan posisi. Dengan CSS3 transformasi, kita dapat mengubah, skala, putaran, kebalikan, dan elemen peregangan. Sehingga transformasi menimbulkan efek 2D atau 3D.

Dan pada saat ini efek transformasi sudah dukung oleh beberapa browser seperti Internet Explorer 9, Firefox, Chrome, Safari, Opera. Tapi dari beberapa browser yang mendukung efek transformasi ini, memiliki cara yang berbeda pada penulisan kodenya. Berikut perbedaan yang perlu diperhatikan :

• Internet Explorer 9 memerlukan awalan-ms-.
• Firefox membutuhkan awalan-moz-.
• Chrome dan Safari membutuhkan awalan-WebKit-.
• Opera membutuhkan awalan-o-.

Sehingga bila kita menginginkan semua browser yang saya sebutkan diatas menampilkan efek transformasi yang kita buat, sebaiknya kita buat seluruh kode yang dibutuhkan setiap browser diatas.

Ok, berikut saya berikan beberapa contoh metode transformasi 2D :

Translate
Dengan metode Translate, elemen bergerak dari posisi semula keposisi lain, tergantung pada parameter yang diberikan untuk posisi kiri (sumbu X) dan bagian atas (sumbu Y) :

<style type="text/css">
div.Translate
{
width:100px;
height:75px;
background-color:#C1C7FF;
border:3px solid #aaa;
padding:10px;
}

div.Translate#geser
{
transform:translate(50px,10px);
-ms-transform:translate(50px,10px); /* IE 9 */
-moz-transform:translate(50px,10px); /* Firefox */
-webkit-transform:translate(50px,10px); /* Safari and Chrome */
-o-transform:translate(50px,10px); /* Opera */
}
</style>

<div class="Translate">ini pada posisi awal</div>
<div class="Translate" id="geser">ini posisi kekanan 50px dan kebawah 10px</div>

Berikut hasilnya :

ini pada posisi awal

ini posisi kekanan 50px dan kebawah 10px

Rotate
Dengan metode rotate, elemen berputar searah jarum jam pada derajat tertentu. Nilai negatif , elemen berputar menjadi berlawanan arah jarum jam.

<style type="text/css">
div.rotate
{
width:100px;
height:75px;
background-color:#C1C7FF;
border:3px solid #aaa;
padding:10px;
}
div.rotate#memutar
{
margin:20px;
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
-o-transform: rotate(30deg); /* Opera */
-moz-transform: rotate(30deg); /* Firefox */
}
</style>

<div class="rotate">ini pada posisi awal</div>
<div class="rotate" id="memutar">ini posisi 30 derajat/div>

Berikut hasilnya :

ini pada posisi awal

ini posisi 30 derajat/div>

Scale
Transformasi ini berfungsi mengubah ukuran sebuah elemen baik diperkecil atau diperbesar. Dalam hal ini ukuran atau ketebalan border juga ikut berubah.

<style type="text/css">
div.scale
{
width:100px;
height:75px;
background-color:#C1C7FF;
border:3px solid #aaa;
padding:10px;
}

div.scale#kecil
{
margin:10px;
transform:scale(0.8,0.8);
-ms-transform:scale(0.8,0.8); /* IE 9 */
-moz-transform:scale(0.8,0.8); /* Firefox */
-webkit-transform:scale(0.8,0.8); /* Safari and Chrome */
-o-transform:scale(0.8,0.8); /* Opera */
}

div.scale#besar
{
margin:60px;
transform:scale(2,2);
-ms-transform:scale(2,2); /* IE 9 */
-moz-transform:scale(2,2); /* Firefox */
-webkit-transform:scale(2,2); /* Safari and Chrome */
-o-transform:scale(2,2); /* Opera */
}
</style>

<div class="scale">ini bentuk awal</div>
<div class="scale" id="kecil">ini diperkecil</div>
<div class="scale" id="besar">ini diperbesar</div>

Berikut hasilnya :

ini bentuk awal

ini diperkecil

ini diperbesar

Skew
Dengan metode condong, elemen berubah dalam sudut tertentu, tergantung pada parameter yang diberikan, untuk horizontal (sumbu X) dan vertikal (sumbu Y) :

<style type="text/css">
div.posisi-awal
{
width:100px;
height:120px;
background-color:#C1C7FF;
border:3px solid #aaa;
padding:10px;
}
div.posisi-awal#miring
{
margin:39px;
transform:skew(20deg,10deg);
-ms-transform:skew(20deg,10deg); /* IE 9 */
-moz-transform:skew(20deg,10deg); /* Firefox */
-webkit-transform:skew(20deg,10deg); /* Safari and Chrome */
-o-transform:skew(20deg,10deg); /* Opera */
}
</style>

<div class="posisi-awal">ini pada posisi awal</div>
<div class="posisi-awal" id="miring">ini posisi miring kesamping 20 derajat, kebawah 10 derajat</div>

Berikut hasilnya :

ini pada posisi awal

ini posisi miring kesamping 20 derajat, kebawah 10 derajat

Selamat mencoba dan Semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda gunakan tombol berlangganan artikel yang ada disebelah kanan halaman ini, atau melalui tombol dibawah ini.

Baca artikel lain :

CSS

CSS atau Cascading Style Sheet adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda. Dengan kata lain Css adalah merupakan salah satu bahasa pemrograman web untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam.

Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML. CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya.

Kini CSS sendiri sudah berkembang hingga CSS level 3, dan beberapa fitur dari CSS level 3 adalah berkaitan dengan perbatasan dan latar belakang.  Ini mencakup dan memperluas fungsionalitas dari CSS level 2 [CSS21], Yang dibangun pada CSS level 1 [CSS1]. Sedang Ekstensi utama dibandingkan dengan tingkat 2 adalah perbatasan yang terdiri dari gambar, kotak dengan beberapa latar belakang, kotak dengan sudut bulat dan kotak dengan bayangan.
Banyak fungsi dan fitur baru yang menarik dari CSS3. Beberapa browser berbasis WebKit, seperti Safari dan Chrome, dan Opera sudah mendukung Transisi CSS3 pada Mentransformasi CSS3. CSS3 ini memberikan kecepatan yang lebih cepat terlihat untuk halaman web dengan konten dinamis, dan bergulir lebih halus. Fungsi dan fitur dari CSS3, kini sudah banyak digunakan untuk membuat dan membangun beberapa bagian dari halaman web.

Berikut ini beberapa contoh penggunaan CSS, yang bisa kita gunakan untuk mengatur tampilan sebuah web :
- CSS Backgrounds
- CSS Teks
- CSS Font
- CSS Link
- CSS Daftar / list
- CSS Box Model
- CSS Border
- CSS Border Radius
- CSS Margin
- CSS Padding
- CSS Dimensi

Dan banyak lagi penerapan penggunaan CSS. Anda bisa lihat dan baca artikel yang berhubungan dengan penggunaan CSS, pada tutorial blog, yang ada pada tab menu disebelah samping kanan blog ini.

OK....Selamat membaca dan semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda gunakan tombol berlangganan artikel yang ada disebelah kanan halaman ini, atau melalui tombol dibawah ini.

Baca artikel lain :

Cara Membuat Rounded Corner

Memang asyik bila kita sudah berhadapan dengan kode css, sebab dengan kode-kode css kita bisa buat efek apa saja seperti :  efek rounded corner, text shadow, transform rotate, selector, dan lain-lain. Dan semua itu masih banyak yang belum kita coba. Tapi tak mengapa, masih banyak waktu kita untuk menjelajahi kode css dan efek-efeknya.

OK...!!! Kali ini kita akan mencoba untuk membuat sebuah  kotak dengan sudut tumpul atau sering juga di sebut dengan  rounded corner. Rounded Corner adalah sebuah efek melengkungkan sebuah garis (border) pada sebuah elemen di web, tentunya hal ini untuk memudahkan kita dalam mendesain web ataupun blog.

Apalagi Rounded Corner ini diberi efek background warna gradasi, pasti akan tambah indah desain web atau blog kita. Tapi untuk efek gradasi akan saya jelaskan pada postingan berikutnya.

Perhatikan sudut-sudut dari garis dibawah ini :
 

DISINI

TEKS ANDA

DISINI

TEKS ANDA

DISINI

TEKS ANDA

Keterangan :

Warna bisa diubah sesuai selera

(-moz-border) dan (webkit-border) bisa anda rubah, semakin kecil nilai "px"nya akan semakin meruncing sudutnya,dan sebaliknya, semakin besar nilai "px"nya akan semakin tumpul sudutnya.

Berikut kode css dari bentuk di atas adalah : 

<div style="border:#1589FF 3px solid; -moz-border-radius:10px; -webkit-border-radius:10px;">

    DISINI TEKS ANDA</div>

Catatan :

Gunakan browser versi terbaru yang support CSS3 dan jangan gunakan Internet Explorer, misalnya browser Mozilla Firefox, agar trik ini bisa tampil.

Jadi deh.....
Ok...., Silahkan anda bisa coba mengganti nilai ukurannya sesuka anda, agar terlihat perbedaan hasilnya.

Selamat mencoba dan Semoga bermanfaat.... Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini. Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.

Baca artikel lain :

CSS Dimensi

Fitur CSS Dimensi berfungsi untuk mengontrol tinggi dan lebar suatu elemen seperti gambar dan paragraf teks. Baik Mengatur tinggi dari suatu elemen dengan menggunakan persen, Mengatur lebar suatu elemen menggunakan nilai piksel, Mengatur tinggi dan lebar maksimum atau minimum suatu elemen.

Berikut contoh penggunaan Fitur CSS Dimensi pada gambar :

<style type="text/css">
img.normal {height:auto;}
img.kecil {height:10%;width:10%;}
img.besar {height:150px;width:150px;}
</style>

<img class="normal" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTzon8yFY2C7Xe6WV_YMQhvJjTCqfAmLN2eG14rKxjpgjuGSbnHh97Z7xmAAkLg5UT26q0cnckGSKguZ5RH-OwQp41SHd3oXgW17n2sySfmP8YAMAj6KdHf0yNpeXB_0GwHsMYGBGl0M5F/s100/css.jpg" />

<img class="kecil" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTzon8yFY2C7Xe6WV_YMQhvJjTCqfAmLN2eG14rKxjpgjuGSbnHh97Z7xmAAkLg5UT26q0cnckGSKguZ5RH-OwQp41SHd3oXgW17n2sySfmP8YAMAj6KdHf0yNpeXB_0GwHsMYGBGl0M5F/s100/css.jpg" />

<img class="besar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTzon8yFY2C7Xe6WV_YMQhvJjTCqfAmLN2eG14rKxjpgjuGSbnHh97Z7xmAAkLg5UT26q0cnckGSKguZ5RH-OwQp41SHd3oXgW17n2sySfmP8YAMAj6KdHf0yNpeXB_0GwHsMYGBGl0M5F/s100/css.jpg"/>

Berikut hasilnya :

Catatan : Untuk satuan nilai bisa menggunakan Pixel ataupun % , dan Ulr image silahkan anda ganti dengan milik anda.

Berikut contoh penggunaan Fitur CSS Dimensi pada Teks :

1. Lebar Maksimum

<style type="text/css">
div.Teks
{

max-width:150px;

}
</style>

<div class="Teks">Pada contoh ini teks menggunakan pengaturan lebar maksimum 150px, sehingga ruang yang digunakan teks ini tidak lebih dari 150px</div>

 Berikut hasilnya :

Pada contoh ini teks menggunakan pengaturan lebar maksimum 150px, sehingga ruang yang digunakan teks ini tidak lebih dari 150px

2. Tinggi Maksimum

<style type="text/css">
div.Teks-B
{
max-height:50px;
}
</style>

<div class="Teks">Pada contoh ini teks menggunakan pengaturan tinggi maksimum 50px, sehingga ruang yang digunakan teks ini tidak lebih dari 50px</div>

Berikut hasilnya :

Pada contoh ini teks menggunakan pengaturan tinggi maksimum 50px, sehingga ruang yang digunakan teks ini tidak lebih dari 50px.

Selamat mencoba dan Semoga bermanfaat.... Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini. Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.

Baca artikel lain :

CSS Padding

Properti CSS padding berfungsi untuk mengatur jarak antara  elemen dengan isi elemen, misalnya mengatur posisi teks yang ada didalam border, tabel dll. Seperti halnya css margin, dalam penerapannya Properti CSS padding, kita dapat menententukan nilainya dalam satu properti atau satu baris kode css sehingga lebih ringkas. Tetapi Properti CSS padding juga dapat ditulis secara masing - masing antara bagian kanan, kiri, atas, dan bawah.

Lebih jelasnya,silahkan anda perhatikan penulisan berikut :

Contoh-A

<style type="text/css">
div.contoh-A {padding: 25px 50px 75px 100px;}
</style>

<div class="contoh-A">TEKS DISINI</div>

Penulisan diatas sama penulisannya dengan :

<style type="text/css">
div.contoh-A
{
padding-top:25px;
padding-right:50px;
padding-bottom:75px;
padding-left:100px;
}
</style>

<div class="contoh-A">TEKS DISINI</div>

Anda lihat posisi teks dibawah ini :

Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML. CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya.

Contoh-B

<style type="text/css">
div.contoh-B
{
padding: 25px 50px 75px;
}
</style>
<div class="contoh-B">TEKS DISINI</div>

Penulisan diatas sama penulisannya dengan :

<style type="text/css">
div.contoh-B
{
padding-top:25px;
padding-right:50px;
padding-left-:50px;
padding-bottom:75px;
}
</style>
<div class="contoh-B">TEKS DISINI</div>

Anda lihat posisi teks dibawah ini :

Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML. CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya.

Contoh-C

<style type="text/css">
div.contoh-C
{
padding: 50px 25px;
}
</style>
<div class="contoh-C">TEKS DISINI</div>

Penulisan diatas sama penulisannya dengan :

<style type="text/css">
div.contoh-C
{
margin-right:25px;
margin-left-:25px;
margin-top:50px;
margin-bottom:50px;}
</style>
<div class="contoh-C">TEKS DISINI</div>

Anda lihat posisi teks dibawah ini :

Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML. CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya.

Contoh-D

<style type="text/css">
div.contoh-D
{
padding: 50px;
}
</style>
<div class="contoh-D">TEKS DISINI</div>

Penulisan diatas sama penulisannya dengan :

<style type="text/css">
div.contoh-D
{
padding-top:50px;
padding-right:50px;
padding-bottom:50px;
padding-left:50px;
}
</style>
<div class="contoh-D">TEKS DISINI</div>

Anda lihat posisi teks dibawah ini :

Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML. CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya.

Catatan : Untuk satuan nilai kita bisa menggunakan satuan " cm, px, em, atau %"

Ok...., Silahkan anda bisa coba mengganti nilai ukurannya sesuka anda, agar terlihat perbedaan hasilnya.

Selamat mencoba dan Semoga bermanfaat.... Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini. Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.

Baca artikel lain :

CSS Margin

Properti CSS margin berfungsi untuk mengatur jarak atau membuat ruang kosong, baik bagian kanan, kiri, atas, dan bawah disekitar elemen seperti box, teks, gambar dll. Dalam penerapannya Properti CSS margin, kita dapat menententukan nilainya dalam satu properti atau satu baris kode css sehingga lebih ringkas. Tetapi Properti CSS margin juga dapat ditulis secara masing - masing antara bagian kanan, kiri, atas, dan bawah.

Lebih jelasnya,silahkan anda perhatikan penulisan berikut :

Contoh A

<style type="text/css">
div.contoh-A {margin: 25px 50px 75px 100px;}
</style>

<div class="contoh-A">TEKS DISINI</div>

Penulisan diatas sama penulisannya dengan :

<style type="text/css">
div.contoh-A
{
margin-top:25px;
margin-right:50px;
margin-bottom:75px;
margin-left:100px;
}
</style>

<div class="contoh-A">TEKS DISINI</div>

Anda lihat posisi teks dibawah ini : 

CSS atau Cascading Style Sheet adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda. Dengan kata lain Css adalah merupakan salah satu bahasa pemrograman web untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam.

Contoh B

<style type="text/css">
div.contoh-B
{
margin: 25px 50px 75px;
}
</style>

<div class="contoh-B">TEKS DISINI</div>

Penulisan diatas sama penulisannya dengan :

<style type="text/css">
div.contoh-B
{
margin-top:25px;
margin-right:50px;
margin-left-:50px;
margin-bottom:75px;
}
</style>

<div class="contoh-B">TEKS DISINI</div>

Anda lihat posisi teks dibawah ini : 

CSS atau Cascading Style Sheet adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda. Dengan kata lain Css adalah merupakan salah satu bahasa pemrograman web untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam.

Contoh C

<style type="text/css">
div.contoh-C
{
margin: 50px 25px;
}
</style>

<div class="contoh-C">TEKS DISINI</div>

Penulisan diatas sama penulisannya dengan :

<style type="text/css">
div.contoh-C
{
margin-right:25px;
margin-left-:25px;
margin-top:50px;
margin-bottom:50px;
}
</style>

<div class="contoh-C">TEKS DISINI</div>

Anda lihat posisi teks dibawah ini :

CSS atau Cascading Style Sheet adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda. Dengan kata lain Css adalah merupakan salah satu bahasa pemrograman web untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam.

Contoh D

<style type="text/css">
div.contoh-D
{
margin: 50px;
}
</style>

<div class="contoh-D">TEKS DISINI</div>

Penulisan diatas sama penulisannya dengan :

<style type="text/css">
div.contoh-D
{
margin-top:50px;
margin-right:50px;
margin-bottom:50px;
margin-left:50px;
}
</style>

<div class="contoh-D">TEKS DISINI</div>

Anda lihat posisi teks dibawah ini :

CSS atau Cascading Style Sheet adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda. Dengan kata lain Css adalah merupakan salah satu bahasa pemrograman web untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam.

Catatan : Untuk satuan nilai kita bisa menggunakan satuan " cm, px, em, atau %"

Ok...., Silahkan anda bisa coba mengganti nilai ukurannya sesuka anda, agar terlihatperbedaan hasilnya. Selamat mencoba dan Semoga bermanfaat.... Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini. Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.

Baca artikel lain :

CSS Border-Radius

Fungsi Properti css border - radius memudahkan kita merubah sudut pada sebuah box atau kotak menjadi tumpul atau melengkung. Bahkan dengan properti css border - radius ini kita bisa membuat sebuah lingkaran. Dan masing - masing sudut bisa diatur nilainnya secara sendiri - sendiri, seperti bagian atas - kanan, atas - kiri, bawah - kanan, dan bawah - kiri.

Contoh A

<div class="Contoh_A" style="

height: 65px; width:160px;
-moz-border-radius: 0 0 50px 0;
-webkit-border-radius: 0 0 50px 0;
border-radius: 0 0 50px 0;

background-color:#C7C8FF;border:2px solid blue;"></div>

Berikut hasilnya :

Contoh B

<div class="Contoh_B" style="

height: 65px;
width:160px;
-moz-border-radius: 0 50px 25px 0;
-webkit-border-radius: 0 50px 25px 0;
border-radius: 0 50px 25px 0;

background-color:#C7C8FF;border:2px solid blue;"></div>

Berikut hasilnya :

Contoh C

<div class="Contoh_C" style="

height: 65px;
width:160px;
-moz-border-radius: 0 50px 50px 0;
-webkit-border-radius: 0 50px 50px 0;
border-radius: 0 50px 50px 0;

background-color:#C7C8FF;border:2px solid blue;"></div>

Berikut hasilnya :

Contoh D

<div class="Contoh_D" style="

height: 65px;
width: 160px;
-moz-border-radius: 25px 50px 25px 50px;
-webkit-border-radius: 25px 50px 25px 50px;
border-radius: 25px 50px 25px 50px;

background-color:#C7C8FF;border:2px solid blue;"></div>

Berikut hasilnya :

Contoh E

<div class="Contoh_E" style="

height: 65px;
width:160px;
-moz-border-radius: 25px 25px 25px 25px;
-webkit-border-radius: 25px 25px 25px 25px;
border-radius: 25px 25px 25px 25px;

background-color:#C7C8FF;border:2px solid blue;"></div>

Berikut hasilnya :

Contoh F

<div class="Example_F" style="

height: 70px;
width: 70px;
-moz-border-radius: 50px 50px 50px 50px;
-webkit-border-radius: 50px 50px 50px 50px;
border-radius: 50px 50px 50px 50px;

background-color:#C7C8FF;border:2px solid blue;"></div>

Berikut hasilnya :

Ok...., Silahkan anda bisa coba mengganti nilai ukurannya sesuka anda, agar terlihat perbedaan hasilnya.

Selamat mencoba dan Semoga bermanfaat.... Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini. Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.

Baca artikel lain :

CSS BOX dan Fungsinya

Fitur Css Box digunakan pada saat kita membuat desain web termasuk mengatur tata letaknya. Css Box pada dasarnya adalah sebuah kotak yang membungkus elemen HTML, dan sesuai fungsi tata letaknya Fitur Css Box terdiri atas: margin, border, padding, dan konten.



    * Properti Margin berfungsi membuat ruang kosong atau memberikan jarak disekitar border.
    * Properti Border yaitu Sebuah batas yang terjadi di sekitar padding dan konten.
    * Properti Padding berfungsi membuat ruang kosong atau memberikan jarak disekitar konten.
    * Properti Content berfungsi sebagai Isi kotak, di mana teks dan gambar ditampilkan

Lebih jelasnya silahkan perhatikan gambar dibawah ini :

Berikut kode penggunaan box dalam fitur css :

<style type="text/css">
div.contoh
{
margin:15px;
width:400px;
border:10px solid green;
padding:10px;
}
</style>

<div class="contoh">Contoh ini menunjukkan bahwa margin atau jarak dari kiri hingga border dengan nilai 15px, sedang jarak dari border hingga konten atau teks ini dengan nilai 10px. Dan lebar border 40opx dengan ketebalan border 10px</div>

Berikut hasilnya :

Contoh ini menunjukkan bahwa margin atau jarak dari kiri hingga border dengan nilai 15px, sedang jarak dari border hingga konten atau teks ini dengan nilai 10px. Dan lebar border 400px dengan ketebalan border 10px

Ok...., Silahkan anda bisa coba mengganti nilai-nilai dari margin, border, lebar border, atau paddingnya sesuka anda, agar terlihat perbedaan hasilnya.

Selamat mencoba dan Semoga bermanfaat.... Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini. Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.

Baca artikel lain :

CSS BORDER

Banyak sekali properti dari fitur css border, yang semuanya berfungsi mengatur tampilan gaya dan warna dari sebuah border. Berikut beberapa properti dari fitur css border yang bisa kita gunakan dalam pembuatan web atau untuk keperluan lain :

1. Border-style
Properti ini dapat mengatur tampilan border dengan bermacam-macam bentuk dan efek.

<style type="text/css">

div.dotted {border-style:dotted;}

</style>

<div class="dotted">TEKS DISINI</div>

<style type="text/css">

div.dashed {border-style:dashed;}

</style>

<div class="dashed">TEKS DISINI</div>

<style type="text/css">

div.solid {border-style:solid;}

</style>

<div class="solid">TEKS DISINI</div>

<style type="text/css">

div.double {border-style:double;}

</style>

<div class="double">TEKS DISINI</div>

<style type="text/css">

div.groove {border-style:groove;}

</style>

<div class="groove">TEKS DISINI</div>

<style type="text/css">

div.ridge {border-style:ridge;}

</style>

<div class="ridge">TEKS DISINI</div>

<style type="text/css">

div.inset {border-style:inset;}

</style>

<div class="inset">TEKS DISINI</div>

<style type="text/css">
div.outset {border-style:outset;}
</style>

<div class="outset">TEKS DISINI</div>

2. Border-width
Properti border-width digunakan untuk mengatur ketebalan border. Dan nilai ketebalan border bisa diatur dengan satuan nilai Pixel (px) atau menggunakan nilai yang sudah ditentukan yaitu thin, medium, dan thick.

<style type="text/css">
div.satu
{
border-style: solid ;
border-width: 10px ;
}
</style>

<div class="satu">TEKS DISINI</div>

<style type="text/css">
div.dua
{
border-style: solid ;
border-width: thin ;
}
</style>

<div class="dua">TEKS DISINI</div>

<style type="text/css">
div.tiga
{
border-style: solid ;
border-width: medium ;
}
</style>

<div class="tiga">TEKS DISINI</div>

<style type="text/css">
div.empat
{
border-style:solid;
border-width: thick ;
}
</style>

<div class="empat">TEKS DISINI</div>

3. Border-Color
Properti border-Color yang digunakan untuk mengatur warna border.Dan pengaturan warna kita bisa menggunakan penulisan kode seperti :

• nama-nama warna, penulisannya "red, blue, green, dll" 
• RGB, penulisannya dengan nilai RGB, seperti "rgb(225, 225, 225)" 
• Hex, penulisannya dengan nilai hex, seperti "# FF0000" 

<style type="text/css">
div.hijau
{
border-style:solid;
border-width:5px;
border-color:green;
}
</style>

<div class="hijau">TEKS DISINI</div>

<style type="text/css">
div.merah
{
border-style:solid;
border-width:10px;
border-color:#ff0000;
}
</style>

<div class="merah">TEKS DISINI</div>

<style type="text/css">
div.abu-abu
{
border-style:solid;
border-width:15px;
border-color:rgb(225, 225, 225);
}
</style>

<div class="abu-abu">TEKS DISINI</div>

4. Contoh Border lain
Kita bisa menentukan ukuran kertebalan dan warna hanya pada border bagian atas, bawah, maupun samping.

<style type="text/css">
div.tebal-atas
{
border-style:solid;
border-top-width:20px;
border-color:rgb(225, 225, 225);
}
</style>

<div class="tebal-atas">TEKS DISINI</div>

<style type="text/css">
div.tebal-bawah
{
border-style:solid;
border-bottom-width:20px;
border-color:green;
}
</style>

<div class="tebal-bawah">TEKS DISINI</div>

<style type="text/css">
div.tebal-samping
{
border-style:solid;
border-left-width:20px;
border-color:#E3E3AC;
}
</style>

<div class="tebal-samping">TEKS DISINI</div>

Ok...., Silahkan anda bisa mengexplore sendiri bentuk border yang lain sesuai keinginan anda sambil belajar. Selamat mencoba dan Semoga bermanfaat.... Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini. Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.

Baca artikel lain :

CSS LIST

Seperti halnya HTML List, fitur css List juga berfungsi untuk membuat sebuah List atau tanda pada daftar. Dalam hal ini ada tiga macam bentuk yang bisa kita gunakan yaitu :

• Ordered lists adalah daftar item yang ditandai dengan bentuk lingkaran kecil ataupun kotak kecil.

• Unordered lists adalah daftar item yang ditandai dengan bentuk angka atau huruf.

• Image lists adalah daftar item yang ditandai dengan bentuk gambar.

1. Ordered lists

<style type="text/css">
ul.a {list-style-type:disc;}
ul.b {list-style-type:circle;}
ul.c {list-style-type:square;}
</style>

<ul class="a">
<li>Bentuk lingkaran</li>
<li>Lingkaran kecil</li>
<li>Lingkaran blok</li>
</ul>

<ul class="b">
<li>Bentuk lingkaran</li>
<li>Lingkaran kecil</li>
<li>Lingkaran lubang</li>
</ul>

<ul class="c">
<li>Bentuk kotak</li>
<li>Kotak kecil</li>
<li>Kotak blok</li>
</ul>

Berikut hasilnya :

• Bentuk lingkaran
• Lingkaran kecil
• Lingkaran blok

• Bentuk lingkaran
• Lingkaran kecil
• Lingkaran lubang

• Bentuk kotak
• Kotak kecil
• Kotak blok

2. Unordered

<style type="text/css">
ol.e {list-style-type:decimal;}
ol.f {list-style-type:decimal-leading-zero;}
ol.g {list-style-type:lower-roman;}
ol.h {list-style-type:upper-roman;}
ol.i {list-style-type:lower-alpha;}
ol.j {list-style-type:upper-alpha;}
ol.k {list-style-type:lower-greek;}
ol.l {list-style-type:armenian;}
ol.m {list-style-type:georgian;}
</style>

<ol class="e">
<li>Bentuk angka</li>
<li>Bentuk angka</li>
<li>Bentuk angka</li>
</ol>

<ol class="f">
<li>Bentuk angka dg Nol didepannya</li>
<li>Bentuk angka dg Nol didepannya</li>
<li>Bentuk angka dg Nol didepannya</li>
</ol>

<ol class="g">
<li>Bentuk huruf romawi kecil</li>
<li>Bentuk huruf romawi kecil</li>
<li>Bentuk huruf romawi kecil</li>
</ol>

<ol class="h">
<li>Bentuk huruf romawi besar</li>
<li>Bentuk huruf romawi besar</li>
<li>Bentuk huruf romawi besar</li>
</ol>

<ol class="i">
<li>Bentuk huruf abjad kecil</li>
<li>Bentuk huruf abjad kecil</li>
<li>Bentuk huruf abjad kecil</li>
</ol>

<ol class="j">
<li>Bentuk huruf abjad besar</li>
<li>Bentuk huruf abjad besar</li>
<li>Bentuk huruf abjad besar</li>
</ol>

<ol class="k">
<li>Bentuk simbol 1</li>
<li>Bentuk simbol 1</li>
<li>Bentuk simbol 1</li>
</ol>

<ol class="l">
<li>Bentuk simbol 2</li>
<li>Bentuk simbol 2</li>
<li>Bentuk simbol 2</li>
</ol>

<ol class="m">
<li>Bentuk simbol 3</li>
<li>Bentuk simbol 3</li>
<li>Bentuk simbol 3</li>
</ol>

Berikut hasilnya :

1. Bentuk angka
2. Bentuk angka
3. Bentuk angka

1. Bentuk angka dg Nol didepannya
2. Bentuk angka dg Nol didepannya
3. Bentuk angka dg Nol didepannya

1. Bentuk huruf romawi kecil
2. Bentuk huruf romawi kecil
3. Bentuk huruf romawi kecil

1. Bentuk huruf romawi besar
2. Bentuk huruf romawi besar
3. Bentuk huruf romawi besar

1. Bentuk huruf abjad kecil
2. Bentuk huruf abjad kecil
3. Bentuk huruf abjad kecil

1. Bentuk huruf abjad besar
2. Bentuk huruf abjad besar
3. Bentuk huruf abjad besar

1. Bentuk simbol 1
2. Bentuk simbol 1
3. Bentuk simbol 1

1. Bentuk simbol 2
2. Bentuk simbol 2
3. Bentuk simbol 2

1. Bentuk simbol 3
2. Bentuk simbol 3
3. Bentuk simbol 3

3. Image lists

<style type="text/css">

ul.o {list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjafM1Sk2aMrBMH9ddhWuCLjlIIbG09Cb_be55frH5NQR6ir5dO79D2y-Za3YRYoGA2myrPapKobWgu1FCKS8v5xR-ZJ_15KTypTFaXzf54XjPghI27dMJIrfXZfdm4J7l1LDdaSaSyBiK_/s104/List+1.jpg');}

ul.p {list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidveQNjTAtbY3iQe10vb1TotbDcsjeoIwkg8PTezWgcfi3MXS-IHqDx28emJ976XlniZsO64R9YUscLcj8kTYCWOfDMzQ5Q2nTjCIGb4FMSanHxHfyLgLhWe9OgxEZEyIltaJiYV3lPygk/s104/List+2.jpg');}

ul.q {list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXFwAV0k_6Y8152rjJDxoA2EbD2O6KXpRS6WnisXASFURH3L8tDcYl6UT0-lbscWhbGpYi6ou8E9Cabg9i037YK2PXIC9I1nD7bJGmYl-LXGW9zfxu7TvsjjboHMPX2gZb9ASEpYQPXPLD/s104/List+3.jpg');}

ul.r {list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjffT4FNXU8LoTKjkvzaTR4e_V-4DHTvOlhUHT5BMSo9gTcPWZE5abL6jkshRuqvrIwGYbDs3F2mHld0QtS61PeEm6ZxX-Dcoxs8348m5K8llq-ZV-KT3TDOvpPNfl7gjsWbEV3OCBDRJtC/s104/List+4.jpg');}

ul.s {list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHQpuCaUSJFl2T4jemvIMBfF81Gb1nj7MHz8cq9fsME2vpHVtgOaO5x3SqDWGL1VmuOkIIWBA_eQIlieVTEfk72hLVMAzDEi-rzSxvo3FnrtE2ffMwdlIukMUMfsvIwQAMW7rOQ8zkidj0/s104/List+5.jpg');}

ul.t {list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAHLzO-dC-1SB5jRjJUXFD02P4S8A2OG3sag2feJH_zpBHIuuw3KKKZbrlv5H2FagFge682e8gGzl2k6SgO-FlBRrDOVf3s95KYiY_pFLIjIfvLMKRGn91MIM2R4Forb1Yn_kbIWJX1Sk7/s104/List+6.jpg');}

</style>

<ul class="o">
<li>Bentuk gambar 1</li>
<li>Bentuk gambar 1</li>
<li>Bentuk gambar 1</li>
</ul>

<ul class="p">
<li>Bentuk gambar 2</li>
<li>Bentuk gambar 2</li>
<li>Bentuk gambar 2</li>
</ul>

<ul class="q">
<li>Bentuk gambar 3</li>
<li>Bentuk gambar 3</li>
<li>Bentuk gambar 3</li>
</ul>

<ul class="r">
<li>Bentuk gambar 4</li>
<li>Bentuk gambar 4</li>
<li>Bentuk gambar 4</li>
</ul>

<ul class="s">
<li>Bentuk gambar 5</li>
<li>Bentuk gambar 5</li>
<li>Bentuk gambar 5</li>
</ul>

<ul class="t">
<li>Bentuk gambar 6</li>
<li>Bentuk gambar 6</li>
<li>Bentuk gambar 6</li>
</ul>

Berikut hasilnya :

• Bentuk gambar 1
• Bentuk gambar 1
• Bentuk gambar 1

• Bentuk gambar 2
• Bentuk gambar 2
• Bentuk gambar 2

• Bentuk gambar 3
• Bentuk gambar 3
• Bentuk gambar 3

• Bentuk gambar 4
• Bentuk gambar 4
• Bentuk gambar 4

• Bentuk gambar 5
• Bentuk gambar 5
• Bentuk gambar 5

• Bentuk gambar 6
• Bentuk gambar 6
• Bentuk gambar 6

Catatan :

Silahkan anda ganti Ulr gambar List dengan Ulr gambar List milik anda.

Untuk penerapan, anda bisa pilih salah satu bentuk yang disukai dan langsung ditempatkan pada posting bisa, langsung pada gadget juga bisa. Jadi bila salah satu yg dipakai (misal saya pakai List yg paling bawah), maka kode yg dipakai jadi seperti ini :

<style type="text/css">

ul.t {list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAHLzO-dC-1SB5jRjJUXFD02P4S8A2OG3sag2feJH_zpBHIuuw3KKKZbrlv5H2FagFge682e8gGzl2k6SgO-FlBRrDOVf3s95KYiY_pFLIjIfvLMKRGn91MIM2R4Forb1Yn_kbIWJX1Sk7/s104/List+6.jpg');}

</style>

<ul class="t">

<li>Bentuk gambar 6</li>

<li>Bentuk gambar 6</li>

<li>Bentuk gambar 6</li>

</ul>

Catatan : Huruf "t" yg berwarna biru merupakan ID, anda bisa ganti ID seperti huruf "t" diatas dgn nama bebas asal keduannya sama.

Bila ditambahkan Link, maka jadinya seperti berikut :

<style type="text/css">

ul.t {list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAHLzO-dC-1SB5jRjJUXFD02P4S8A2OG3sag2feJH_zpBHIuuw3KKKZbrlv5H2FagFge682e8gGzl2k6SgO-FlBRrDOVf3s95KYiY_pFLIjIfvLMKRGn91MIM2R4Forb1Yn_kbIWJX1Sk7/s104/List%2B6.jpg');}

</style>

<ul class="t">

<li><a href="http://www.carabuatwebgratis.com/2011/03/css-list.html">CSS List</a></li>

<li><a href="http://www.carabuatwebgratis.com/search/label/css list">Label CSS List</a></li>

<li><a href="http://www.carabuatwebgratis.com/search/label/css">Label CSS</a></li>

</ul>

Catatan : Jangan lupa ganti ukuran gambar berwarna pink (utk blogger biasanya s104 atau h104), dengan ukuran lebih kesil misal: "15px" , sehingga menjadi s15 atau h15.

• List pertama adalah contoh Link langsung keartikel
• List kedua adalah contoh Link Label CSS List
• List ketiga adalah contoh Link Label CSS

Berikut hasilnya :

• CSS List
• Label CSS List
• Label CSS

Ok...., Selamat mencoba dan Semoga bermanfaat....
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini.
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.

Baca artikel lain :

CSS LINK

Penggunaan css pada fitur css link sangat bervariasi. Ada banyak fungsi pada fitur css link, kita bisa mengatur warna link, warna latar pada link, merubah warna pada saat dikunjungi ataupun warna bila link dipilih atau diklik.




Beberapa properti yang digunakan yaitu :
    * a: link - link, normal belum dikunjungi
    * a: visited - link pengguna telah mengunjungi
    * a: hover - link ketika krusor mouse di atasnya
    * a: active - link saat itu diklik

Berikut contoh-contoh Penggunaan fitur Css Link :
1. Menambahkan warna link, saat dikunjungi serta pada saat diklik

<style type="text/css">
a.satu:link {color:#FF0000;}
a.satu:visited {color:#00FF00;}
a.satu:hover {color:#FF00FF;}
a.satu:active {color:#0000FF;}
</style>

<a class="satu" href="http://www.carabuatwebgratis.com" target="_blank">Cara Buat Web Gratis</a>

Berikut hasilnya :

Cara Buat Web Gratis

2. Penggunaan text-decoration pada link

<style type="text/css">
a.dua:link {text-decoration:none;}
a.dua:visited {text-decoration:none;}
a.dua:hover {text-decoration:underline;}
a.dua:active {text-decoration:underline;}
</style>

<a class="dua" href="http://www.carabuatwebgratis.com" target="_blank">Cara Buat Web Gratis</a>

Berikut hasilnya :

Cara Buat Web Gratis

3. Menentukan warna latar belakang untuk link

<style type="text/css">
a.tiga:link {background-color:#B2FF99;}
a.tiga:visited {background-color:#FFFF85;}
a.tiga:hover {background-color:#FF704D;}
a.tiga:active {background-color:#FF704D;}
</style>
<a class="tiga" href="http://www.carabuatwebgratis.com" target="_blank">Cara Buat Web Gratis</a>

Berikut hasilnya :

Cara Buat Web Gratis

4. Memberikan efek lain pada link

<style type="text/css">
a.empat:link {color:#ff0000;}
a.empat:visited {color:#0000ff;}
a.empat:hover {color:#ffcc00;}

a.lima:link {color:#ff0000;}
a.lima:visited {color:#0000ff;}
a.lima:hover {font-size:150%;}

a.enam:link {color:#ff0000;}
a.enam:visited {color:#0000ff;}
a.enam:hover {background:#66ff66;}

a.tujuh:link {color:#ff0000;}
a.tujuh:visited {color:#0000ff;}
a.tujuh:hover {font-family:monospace;}

a.delapan:link {color:#ff0000;text-decoration:none;}
a.delapan:visited {color:#0000ff;text-decoration:none;}
a.delapan:hover {text-decoration:underline;}
</style>

<a class="empat" href="http://www.carabuatwebgratis.com" target="_blank">Cara Buat Web Gratis</a>

<a class="lima" href="http://www.carabuatwebgratis.com" target="_blank">Cara Buat Web Gratis</a>

<a class="enam" href="http://www.carabuatwebgratis.com" target="_blank">Cara Buat Web Gratis</a>

<a class="tujuh" href="http://www.carabuatwebgratis.com" target="_blank">Cara Buat Web Gratis</a>

<a class="delapan" href="http://www.carabuatwebgratis.com" target="_blank">Cara Buat Web Gratis</a>

Berikut hasilnya :

Cara Buat Web Gratis

Cara Buat Web Gratis

Cara Buat Web Gratis

Cara Buat Web Gratis

Cara Buat Web Gratis

4. Membuat kotak link berbentuk tab menu

<style type="text/css">
a.sembilan:link,a.sembilan:visited
{
display:block;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
}
a.sembilan:hover,a.sembilan:active
{
background-color:#7A991A;
}
</style>
<a class="sembilan" href="http://www.carabuatwebgratis.com" target="_blank">Cara Buat Web Gratis</a>

Berikut hasilnya :

Cara Buat Web Gratis

Ok...., Selamat mencoba dan Semoga bermanfaat....
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini.
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.

Baca artikel lain :