Practice Makes Right,repetitions Make Perpect.

Tentang Blog Ini ×

B log Ini merupakan media saya untuk berbagi segala hal yang berhubungan tentang blogging meskipun masih sederhana,Mand4rt juga merupakan media saya dalam menuangkan hasil karya sekaligus tempat saya belajar membangun sebuah blog/website dan berharap untuk tetap bisa memberikan yang terbaik kepada pembaca.

Aura Template

T emplate yang saya gunakan ini merupakan buatan saya sendiri, Banyak yang mengatakan bahwasanya DHE adalah template hasil cloningan secara utuh namun tidak demikian template ini saya susun dari sangat dasar dengan pemahaman yang sedikit awam dan otodidak dalam pembuatannya saya berusaha meniru tampilan beberapa template yang pernah dipakai oleh:

DTE :] web.id

Tentang Saya

S

alam pembuka dari saya sebagai penulis blog ini sebelumnya akan memperkenalkan diri saya sebagai salah satu blogger yang berasal dari Provinsi Sulawesi Barat Dan Saya Bersekolah Di SMA Neg 1 Polewali.Nama saya Haekal Fikri akrab dipanggil Haekal. Saya Tidak Mempunyai Guru Saya Belajar Secara Otodidak Beserta Bantuan Dari Teman-teman blogger saya dan saya masih NEWBIE Jadi jika Saya Tidak Dapat Menjawab Pertanyaan Anda Tentang Seputar Blogging Harap Di Maklumi.
iklan
Bagikan kepada teman!

Mengenal Apa Itu -moz-linear-gradient!

Mengenal Apa Itu -moz-linear-gradient!


Hallo sobat blogger, aga kareba? ok ok aja kan?
belakangan ini Mand4rt seperti tewas dari dunia perblogan, ya bagaimana tidak kalo posting terakhirnya hampir sebulan yang lalu hahaha ‘sorry ya konco, sedikit sibuk soalnya, selain urusan offline.
well, kali ini kita akan sharing tentang -moz-linear-gradient.

Apa itu ‘-moz-linear-gradient’?

-moz-linear-gradient adalah value untuk browser yang ber-engine layout Gecko(firefox), jadi untuk membaca tulisan ini sobat wajib menggunakan firefox, minimal versi 3.6 sedangkan fungsi dari -moz-linear-gradient adalah untuk membuat gradient linear, contohnya sepeti ini

background:-moz-linear-gradient( top, #eee, #222 )
background:-moz-linear-gradient( left, #eee, #222 )
background:-moz-linear-gradient( right, #eee, #222 )
background:-moz-linear-gradient( bottom, #eee, #222 )
background:-moz-linear-gradient( /*bottom*/90deg, red, black )
background:-moz-linear-gradient( /*left*/180deg, red, black )
background:-moz-linear-gradient( /*top*/270deg, red, black )
background:-moz-linear-gradient( /*left*//*0deg*/360deg, red, black )
background:-moz-linear-gradient( top, #ddd 0%, #aaa 25%, #444 50%, #333 75%, #222 100% )
background:-moz-linear-gradient( left, #fff 0%, #aaa 5%, #000 50%, #aaa 95%, #fff 100% )

Sintaks -moz-linear-gradient

sinyak ini adalah aturan baku yang tidak bisa diubah, kecuali value color dan posisi, untuk valuenya seperti ini
background: -moz-linear-gradient(posisi-memulai, warna, warna, warna-lagi, warna-lagi);
contoh

background: -moz-linear-gradient(left, red, blue, green, pink);

keterangan :

  • Dimulai dengan background: -moz-linear-gradient(
  • lalu posisi memulai, pilihanya antara lain : top, right, bottom, left ‘pilih satu’[beserta komanya]
  • setelah itu masukan warna gradient, misal red, blue, black, white, kode hex. Disini kita bisa memasukan banyak warna, dan setiap warna dipisahkan dengan (,)[koma].
  • terakhir ditutup dengan )[tutup kurung]
  • selesai


keterangan tambahan :

kita juga bisa mengatur jarak warna gradient, misal seperti ini

background: -moz-linear-gradient(
left,
white 0%,/* dimulai dengan putih 100% */
red 50%,/* berhenti di 50% dengan warna red atau merah, dan memulai lagi dengan warna merah dari 50% */
black 100%) /* berhenti denga warna black hitam, bersaran % itu tergantung dari lebar elemant yang kita buat, */

dan jika disingkat seperti ini

background: -moz-linear-gradient(
left,
white ,
red 50%,
black )

Jadinya seperti ini

background: -moz-linear-gradient(
left,
white ,
red 50%,
black )

Contoh -moz-linear-gradient untuk belajar

silakan copy markup berikut lalu save dengan format *html, silakan diedit untuk belajar

<html>
<head>
<title>CSS3 : -moz-linear-gradient</title>
<meta content="indam url:http://haekalfiqri2.blogspot.com" name="author"/>
<meta http-equiv="refresh" content="320;url=http://haekalfiqri2.blogspot.com"/>
<style type="text/css">

body{
width:80%;
margin:30px auto;
}
.kotak-gradient1,
.kotak-gradient2,
.kotak-gradient3,
.kotak-gradient4,
.kotak-gradient5,
.kotak-gradient6,
.kotak-gradient7,
.kotak-gradient8,
.kotak-gradient9,
.kotak-gradient10{
color:white;
clear:both;
margin:10px auto;
font:normal 15px courier;
}
.kotak-gradient1{
min-height:50px;
min-width:500px;
background:-moz-linear-gradient(
top,
#eee,
#222
)
}
.kotak-gradient2{
min-height:50px;
min-width:500px;
background:-moz-linear-gradient(
left,
#eee,
#222
)
}
.kotak-gradient3{
min-height:50px;
min-width:500px;
background:-moz-linear-gradient(
right,
#eee,
#222
)
}
.kotak-gradient4{
min-height:50px;
min-width:500px;
background:-moz-linear-gradient(
bottom,
#eee,
#222
)
}
.kotak-gradient5{
height:100px;
width:250px;
background:-moz-linear-gradient(
/*bottom*/90deg,
red,
black
)
}
.kotak-gradient6{
height:100px;
width:250px;
background:-moz-linear-gradient(
/*left*/180deg,
red,
black
)
}
.kotak-gradient7{
height:100px;
width:250px;
background:-moz-linear-gradient(
/*top*/270deg,
red,
black
)
}
.kotak-gradient8{
height:100px;
width:250px;
background:-moz-linear-gradient(
/*left*//*0deg*/360deg,
red,
black
)
}
.kotak-gradient9{
height:50px;
width:450px;
background:-moz-linear-gradient(
top,
#ddd 0%,
#aaa 25%,
#444 50%,
#333 75%,
#222 100%
)
}
.kotak-gradient10{
height:250px;
width:450px;
background:-moz-linear-gradient(
left,
#fff 0%,
#aaa 5%,
#000 50%,
#aaa 95%,
#fff 100%
)
}
</style>
</head>
<body>
<div class='kotak-gradient1'>background:-moz-linear-gradient(
top,
#eee,
#222
)</div>
<div class='kotak-gradient2'>background:-moz-linear-gradient(
left,
#eee,
#222
)</div>
<div class='kotak-gradient3'>background:-moz-linear-gradient(
right,
#eee,
#222
)</div>
<div class='kotak-gradient4'>background:-moz-linear-gradient(
bottom,
#eee,
#222
)</div>
<div class='kotak-gradient5'>background:-moz-linear-gradient(
/*bottom*/90deg,
red,
black
)</div>
<div class='kotak-gradient6'>background:-moz-linear-gradient(
/*left*/180deg,
red,
black
)</div>
<div class='kotak-gradient7'>background:-moz-linear-gradient(
/*top*/270deg,
red,
black
)</div>
<div class='kotak-gradient8'>background:-moz-linear-gradient(
/*left*//*0deg*/360deg,
red,
black
)</div>
<div class='kotak-gradient9'>background:-moz-linear-gradient(
top,
#ddd 0%,
#aaa 25%,
#444 50%,
#333 75%,
#222 100%
)</div>
<div class='kotak-gradient10'>background:-moz-linear-gradient(
left,
#fff 0%,
#aaa 5%,
#000 50%,
#aaa 95%,
#fff 100%
)</div>
<span style='position:fixed;bottom:3%;right:3%;display:block:margin:0;font:italic bold 120% "comic sans ms";'>Original Source Code by <a style='text-decoration:none;color:red;' href='http://haekalfiqri2.blogspot.com' target='blank' title='Mand4rt'>Indam Site</a></span>
<!-- regards
http://haekalfiqri2.blogspot.com -->
</body>
</html>

Catatan :
sebenarnya di webkit(chrome, safari) dan IE6, 7 dan 8 juga sudah didukung gradient ini hanya saja sintaksnya berbeda, jadi akan kita sambung dilain waktu. Jika ada yang ingin ditambahkan silakan tinggalkan komantar, semoga bermanfaat.

iklanBuruan Pasang Iklan Anda Di DHE Dengan Harga Yang Terjangkau.Pajang bisnis online anda di DHE dan dapatkan keuntungan yang lebih dari penjualan produk bisnis anda.
iklanBuruan Pasang Iklan Anda Di DHE Dengan Harga Yang Terjangkau.Pajang bisnis online anda di DHE dan dapatkan keuntungan yang lebih dari penjualan produk bisnis anda.
Diposkan Oleh ❖
  • Iklan Teks Murah

    Hanya Rp.5.000/bulan, Pasang Iklan Teks Anda Disini Sekarang Juga!

  • Iklan Teks Murah

    Hanya Rp.5.000/bulan, Pasang Iklan Teks Anda Disini Sekarang Juga!

  • Iklan Teks Murah

    Hanya Rp.5.000/bulan, Pasang Iklan Teks Anda Disini Sekarang Juga!

8 Komentar

Permalink
pertamax sob. baru tau nih sob. ternyata itu fungsinya :D
Permalink
hehe thanks sob :D
Permalink
Wah mantap banget sob, baru tau saya, terima kasih infonya :)
Permalink
oke sob. salam kenal :D
Permalink
hehe thanks sob dah berkunjung :D
Permalink
salam kenal juga sob :D
Permalink
wah baru pengen belajar tentang gradient ,, ternyata pke -moz toh ? :D kirain dulu cuman linear-gradient{ :D
Permalink
hehe iya sob thanks dah berkunjung :D

Catatan
Dilarang menambahkan link aktif ataupun meng-iklankan suatu produk dll.
Kode yang panjang bisa menggunakan tag <i rel="pre"> KODE PANJANG ANDA </i>
Untuk menyisipkan gambar, gunakan tag <i rel="image"> URL GAMBAR </i>
Untuk menyisipkan Judul, gunakan tag <b rel="h3"> JUDUL ANDA DI SINI... </b>
Untuk menciptakan efek tebal gunakan tag <b> TEKS ANDA DI SINI... </b>
Untuk menciptakan efek huruf miring gunakan tag <i> TEKS ANDA DI SINI... </i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang kita bahas saat ini akan sangat bermanfaat bagi pembaca lain.
:):(^_^:D;):-bd:'(:\:pB):Q:Ozz7:(\o/**p<30:):-a7:O*fck*x@X@~x(:yaya::p*Klik Untuk Melihat Kode Emoticon!

Konversi Kode Special Character Comment Editor Virtual Pedoman Berkomentar Daftar Member Aktif

BATAL

gobottom