Mei 05, 2011

Cara Membuat Efek Tulisan Dengan CSS Text Shadow

1 komentar: Diposting oleh Alfi di 21.26 Label:
Kali ini saya akan coba membahas bagaimana cara membuat text shadow menggunakan CSS3. Dari namanya saja sudah bisa ditebak bahwa text yang dimaksud memiliki bayangan.

Sobat bisa membuat tulisan tampak timbul, tenggelam, 3D atau bersinar dengan mengatur besar kecilnya ukuran bayangannya. Semua browser support dengan text shadow ini, kecuali IE. Jadi sebaiknya cek dulu list browser yang support dibawah ini.


Safari 3.1 (Mac/Win) yes, but no multiple shadows
Safari 4 (Mac/Win) yes, full support
Opera 9.5 (Mac/Win/Lin) yes, full support
Firefox 2/3 (Mac/Win/Lin) no
Firefox 3.1/3.5 (Mac/Win/Lin) yes, full support
Google Chrome 1 (Win) no
Google Chrome 2 (Win) yes, full support
IE 7/8 (Win) no
Shiira (Mac) yes, but no multiple shadows
Safari on iPhone yes, but no multiple shadows
Opera Mini 4.1 yes, no blur radius

Jika sudah, mari kita lanjut ke tutorialnya. Perhatikan kode css dibawah ini :

color: #000;
background: #fff;
text-shadow: 1px 1px 1px #424242;
  • color : #000 adalah warna dasar tulisan
  • background: #fff adalah warna latar
  • 1px 1px 1px #424242 untuk warna bayangannya (shadow)

Dibawah ini ada beberapa contoh model text shadow beserta kode css-nya, silahkan sobat kreasikan.

gambar 1 color: #000;
background: #fff;
text-shadow: 2px 2px 3px #000;
gambar 2 color: #000;
background: #fff;
text-shadow: 2px 2px #000;
gambar 3 color: #000;
background: #fff;
text-shadow: 2px -2px 3px #000;
gambar 4 color: #000;
background: #666;
text-shadow: 0px 1px 1px #fff;
image color: #666;
background: #000;
text-shadow: 0px 1px 0px #ccc;
image color: #fff;
background: #666;
text-shadow: 0px 1px 1px #000;
image color: #fff;
background: #000;
text-shadow: 1px 1px 6px #fff;
image color:#FFE9C7; background:#FF6C17;  text-shadow: 2px 2px 2px #A6250C;
image color:#823210; background:#FF6C17; text-shadow:1px 1px 1px #FF9924;
image color: #fff;
background: #fff;
text-shadow: 1px 1px 4px #000;
image color: #000;
background: #000;
text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -18px 18px #f20;
Read More

Mei 03, 2011

Pengolahan data akademik dengan neatbean

Tidak ada komentar: Diposting oleh Alfi di 07.46 Label:
Latihan 1. Pengolahan Data IPK Mahasiswa
Program dibawah ini dibuat dengan menggunakan NetBeans IDE 6.0 yaitu untuk mengolah data perthitungan Indeks Prestasi.
Adapun langkah-langkah pembuatannya adalah
A. Membuat Project
1. Mengaktifkan Editor Netbeans dengan cara klik, Start, All Program, Netbeans, lalu klik Netbeans 6.0 (Pastikan Netbeans sudah terinstal didalam Komputer)
2. Buatlah project baru dengan cara, klik File, New Project, pada kolom Categories pilih Java. Dan pada kolom projects pilih Java Aplication. Dan klik tombol next
3. Pada halaman Name dan Location, ketikkan nama project yang akan dibuat pada kotak Project name dengan nama PrjMhs.
4. Tentukanlah lokasi project pada kotak Project location dan folder penyimpananya pada project Folder, dengan cara klik Browse sehingga membentuk gambar berikut :
Read More
Baca selengkapnya »

Mei 02, 2011

Membuat sidebar kiri dan kanan di blogger

Tidak ada komentar: Diposting oleh Alfi di 02.53 Label:
Berikut ini adalah catatan mengenai cara membuat dua sidebar yang terletak di sebelah kanan dan sebelah kiri kolom utama/ posting.

Langkah-langkah membuat sidebar kanan kiri pada template minima blogger.

Read More
Baca selengkapnya »
Langganan: Komentar (Atom)