Headlines News
Home » , » Tutorial CSS Lima Watermark

Tutorial CSS Lima Watermark


|| Tutorial CSS 5 || 

Konsep Watermark

CSS juga hadir dengan properties yang mengijinkan anda untuk mendefinisikan cara bagaimana gambar latar (background) anda di tampilkan. Pertama, property ”background-image” mengijinkan anda untuk menetapkan sebuah image background untuk setiap elemen HTML. .question {background-image: url ("http://www.mysite.com/back.gif")} /*Menampilkan image background dari url*/ Jika anda memerlukan latar belakang ini sebagai watermark, yang tidak dapat discroll ketika anda men-scroll ke bawah suatu halaman, anda harus menambahkan property “background-attachment” – Nilai-nilai yang diterima adalah “fixed” dan “scroll”.

Anda juga dapat mengatur Ya/Tidak nya suatu image/gambar yang melewati satu halaman dengan properti “background-repeat”. Properti ini dapat diambil satu dari empat bagian : “repeat” (letak secara horizontal dan secara vertikal), “repeat-x” (letak secara horizontal saja), “repeat-y” (letak seacara vertikal saja), dan “no-repeat” (tidak ada pengaturan letak)
Contoh di bawah ini kita ambil untuk menunjukkan keyword “repeat-y”, silahkan dicoba :

<HTML>
<HEAD>
<STYLE TYPE="text/css">
.question {font-size: 20pt; background-image:
url("http://www.mysite.com/bunga.gif"); background-repeat: repeat-y}
</STYLE>
</HEAD>
<BODY>
<P CLASS="question">
Q. Hmm… ternyata anda sekarang sudah mengerti tentang konsep watermark?
A. Ya, Belum Sepenuhnya lah Pak!
</BODY>
</HTML>

Perhatikan, url(http://www.situs.com/bunga.gif) mengambil image “bunga.gif” sebagai background yang diatur secara vertikal.

Sekarang tugas anda!

Buatlah dan gantilah image diatas dengan nilai “repeat-x”. Perhatikan apa yang berubah? Kalau memang tidak berubah, penulis sarankan anda untuk mengganti image atau gambar anda. Sehingga perbedaannya terasa.

Kupas Sampai Tuntas

Model format CSS berasumsi bahwa tiap-tiap elemen dikelilingi oleh tiga area yang berbeda. Dimulai dari dalam keluar, area ini adalah padding, border, dan margin. Masing-masing entitas ini dapat diatur melalui spesial properties CSS, mengijinkan para developer untuk secara singkat mengatur tampilan dan posisi dari setiap elemen HTML.

Nilai margin (garis tepi) dapat kita atur besar dan letaknya melalui properti “margin-top”, “margin-bottom”, “margin-right”, dan “margin-left”, dan ditetapkan seperti ini: DIV {margin-top: 10px; margin-bottom: 10px; margin-right: 5px; margin-left: 5px} /* 10px width for horizontal margins, 5px width for vertical margins */ You can also use the catch-all "margin" property DIV {margin: 10px 5px 5px 10px} /* specify widths clockwise */ or set a uniform margin width with DIV {margin: 10px} /* equal width for all margins */

Anda dapat menyesuaikan lebar border dengan properties self-explanatory “border-top-width”, “border-left-width”, dan “border-rigth-width”, atau dengan menata suatu borde dengan shorcut properti “border-width”. Coba perhatikan sekali lagi!

DIV {border-top-width: 50px; border-right-width: 100px;
border-bottom-width: 75px; border-left-width: 125px} /* different width for
each border */
DIV {border-width: 50px} /* equal width for all borders */
You can also specify border widths with the keywords "thick", "medium",
"thin" and "none", like this:
DIV {border-top-width: thick; border-right-width: medium;
border-bottom-width: thin; border-left-width: none}
DIV {border-width: thick}

Dan akhirnya, padding dapat diatur dengan.. ya bener, anda telah menduganya! Properti “padding-top”, “padding-bottom”, “padding-right”, dan “padding-left”. Untuk ini penulis tidak usah mencontohkannya, anda coba saja sendiri!

Hehehe.. bukan malas, menghemat kertas adalah jawaban bijaknya ☺ CSS juga mengijinkan anda untuk mengatur warna border anda dengan properties “border-color”. Contoh di bawah akan menunjukkan bagaimana “border-color” bekerja!

<HTML>
<HEAD>
<STYLE TYPE="text/css">
.question {border-color: black; border-width: thick}
</STYLE>
</HEAD>
<BODY>
<P CLASS="question">
Q. How many doctors does it take to change a light bulb?
A. It depends on what kind of insurance you have
</BODY>
</HTML>

Jika anda orang yang suka membuat daftar (lists), CSS juga memiliki sesuatu untuk anda – dua properties yang mengijinkan anda untuk mengubah tampilan dari item-item pada penanda daftar anda. Pertama sekali, kita harus mengetahui properti “list-style-type”, yang menerima nilai “disc”, “circle”, “square”, “decimal”, “lower-roman”, “upper-roman”, “lower-alpha”, “upper-alpha” atau “none”. Lihat Contoh :

<HTML>
<HEAD>
<STYLE TYPE="text/css">
LI {list-style-type: square}
</STYLE>
</HEAD>
<BODY>
<center><h3>:: Daftar Belanja Siang Ini :: </h3></center>
<OL>
<LI>Jeruk 1 Kg.
<LI>Ikan Asin Rebung 2 Kg.
<LI>Beras 2 Goni Plastik Besar 60 Kg.
<LI>Bayam 4 Ikat
<LI>Mie Instant 4 Kardus
</OL>
</BODY>
</HTML>

anda dapat juga menggunakan suatu image/gambar biasa selain menggunakan bullet,circle dan disc default dengan properti “list-style-image” – Coba lihat ini :

<HTML>
<HEAD>
<STYLE TYPE="text/css">
LI {list-style-image: url("http://www.situs.com/bunga.gif" )}
</STYLE>
</HEAD>
<BODY>
<center><h3>:: Daftar Belanja Siang Ini :: </h3></center>
<OL>
Kuliah Umum IlmuKomputer.Com
Copyright © 2003 IlmuKomputer.Com
19
<LI>Jeruk 1 Kg.
<LI>Ikan Asin Rebung 2 Kg.
<LI>Beras 2 Goni Plastik Besar 60 Kg.
<LI>Bayam 4 Ikat
<LI>Mie Instant 4 Kardus
</OL>
</BODY>
</HTML>

Mohon Diperhatikan dan jangan protes, Browser Netscape Navigator tidak mendukung properties di atas. Lihat Dari Atas Posisinya!

Mungkin salah satu hal yang terbaik dari CSS adalah fakta, untuk pertama kalinya, seorang developer web memiliki kemampuan secara cepat dan tepat mengatur posisi (position) elemen-elemen yang berbeda pada sebuah halaman web. Tiga properti yang mengijinkan anda untuk melakukannya adalah “position”, “left”, dan juga “top” – ingat baik-baik, karena anda akan sering, maaf bukan hanya sering, tapi sangat sering dipergunakan pada script CSS anda.

Properti “position” mengijinkan anda untuk menggambarkan jenis dari positioning ini pada sebuah elemen – pilihannya adalah “absolute” atau “relatives”. Properti ini digunakan secara bersamaan denganm “top” dan “left”, yang menetapkan koordinat bagian atas (top) dan bagian kiri (left) untuk elemen-elemen
yang dibahas.

Posisi Absolute mengijinkan anda untuk menempatkan sebuah elemen dimanapun pada sebuah halaman web, tanpa mengindahkan aturan elemen yang berlaku pada elemen didalamnya, sementara Posisi Relative mengijinkan anda untuk meletakkan posisis relative untuk elemen yang lain pada sebuah halaman situs. Bingung? Jangan khawatir, kalau sampai sini anda masih bingung berarti penulis telah sukses. Lho? Tujuan artikel ini sebenernya bukan untuk mengajari anda. Akan tetapi agar anda semakin bingung.

Di bawah ini adalah sebuah contoh bagaimana anda dapat menggunakan properties ini untuk menempatkan posisi pada block teks:

<HTML>
<HEAD>
</HEAD>
<BODY>
<DIV STYLE="position: absolute; top:10; left:50; font-family: Verdana;
font-size: 35pt; color: green">
Q. Apakah semua orang yang membaca artikel ini sudah mengerti?
</DIV>
<DIV STYLE="position: absolute; top:140; left:300; font-family: Verdana;
font-size: 20pt; color: blue">
A. Belum Tentu!
</DIV>
<DIV STYLE="position: absolute; top:180; left:50; letter-spacing:5px;
font-family: Verdana; font-size: 33pt; color: red">
Fikiran semuanya belum tentu sama.
</DIV>
</BODY>
</HTML>.

Bagaimana? Masih bingung juga? Lah, tapi sudah diberi contoh? Ya udah sekarang coba perhatikan contoh yang penulis buat. Kopi dan pastekan ke editor favourite anda, kemudian lihat hasilnya! Berubah? Tidak juga? Sekarang coba anda restore down jendela browser anda. Atau begini saja bahasa singkatnya, coba anda kecilin ukuran windowsnya. Sudah? Kalo sudah berarti sekarang anda menjumpai kalau teks-teks yang anda tentukan pada script di atas akan mengikuti seberapa besar jendela anda. Ok, sampai sekarang sudah jelas bukan!

Anda juga dapat membuat elemen tertentu kelihatan atau tidak, dengan properti “visibility”, yang menerima nilai “visible” dan “hidden”. Gak usah bingung, lihat saja:

<HTML>
<HEAD>
</HEAD>
<BODY>
<DIV STYLE="position: absolute; top:10; left:50; font-family: Verdana;
font-size: 35pt; color: green">
Q. Apakah semua orang yang membaca artikel ini sudah mengerti?
</DIV>
<DIV STYLE="visibility: hidden">
A. Belum Tentu!
</DIV>
<DIV STYLE="position: absolute; top:180; left:50; letter-spacing:5px;
font-family: Verdana; font-size: 33pt; color: red">
Fikiran semuanya belum tentu sama.
</DIV>
</BODY>
</HTML>

Anda perhatikan pada browser anda, kata “A. Belum Tentu!” tidak tertampil pada browser
karena properti “hidden” tidak menampilkannya.

Bagaimana Sobat Blogger sudah ngertikan bagaimana cara melakukanya pastinya pada Turorial CSS Lima ini Sobat Blogger tambah ngertikan ya?. Ok terima kasih Sudah Membaca ya semoga bermanfaat lagi ya.. Sampai jumpa di Tutorial Berikutnya.
Sobat sedang membaca artikel Aplikasi Online tentang Tutorial CSS Lima Watermark dan Sobat bisa menemukan artikel Tutorial CSS Lima Watermark ini dengan url Sobat boleh menyebar luaskannya atau mengcopy paste-nya jika artikel Tutorial CSS Lima Watermark ini sangat bermanfaat bagi teman-teman, namun jangan lupa untuk meletakkan link Tutorial CSS Lima Watermark sumbernya.

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Creating Website

0 comments:

Post a Comment

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. Free Aplikasi Full Version - All Rights Reserved
Template Modify by Creating Website
Proudly powered by Blogger