Penerapan Properti Text Shadow Pada CSS 3

Properti text-shadow hampir sama dengan box-shadow, yakni sama-sama untuk memberikan effek bayangan pada objek. Bedanya hayalah objek yang akan dikenakan properti, kalau box-shadow ditunujukanuntuk memberikan efek shadow pada objek seperti box, table dan image. Sedangkan text-shadow adalah proprti untuk memberikan efek shadow pada text.Untuk lebih jelasnya langsung saja kita proktekkan. Buatlah file html berikut:

<html>
<head>
<style>
h1{
    text-shadow:0px 5px blue;
    }
</style>
</head>
<body>
<h1>Text-Shadow</h1>
</body>
</html>

Maka jika Anda jalankan pada browser anda akan kelihatan seperti berikut ini:

Dari script css3 diatas Anda dapat memanipulasi shadow pada text anda sesuka hari anda dengan menukar ukuran text-shadownya.

Untuk contoh penerapan yang lain buatlah script berikut ini:

<html>
<head>
<style>
h1 {text-shadow: 0.2em 0.5em 0.1em #600,
      -0.3em 0.1em 0.1em #060,
      0.4em -0.3em 0.1em #006}
h3.a {text-shadow: -1px -1px #ffffff, 1px 1px #333}
h3.b {text-shadow: 1px 1px #ffffff, -1px -1px #444}
</style>
</head>
<body>
<h1>Text-Shadow</h1>
<h3 class='a'>Multiple Shadow</h3>
<h3 class='b'>Multiple Shadow</h3>
</body>
</html>

Sekian penjelasan dari TCindent, jika ada kesalahan mohon disisipkan komentar pada artikel ini.
         Salam

TCindent Naturalisi

Read more →

Menentukan Radius untuk Sudut Tertentu

Jika kita sebelumnya telah membuat border radius untuk semua sisi sudut mungkin sekarang timbul pertanyaan bagaimana jika kita ingin membuat radius hanya untuk bagian sudut tertentu?
Ok, coba anda buat script seperti berikut ini:

<html>
<head>
<style>
div{
    color        :white;
    text-align    :center;
    padding        :20px;
    margin        :5px;
    }
.border{
    background    :#00ccff;
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    }

.atas{
    background    :#00ccff;
    border-radius:10px 10px 0px 0px;
    -moz-border-radius:10px 10px 0px 0px;
    -webkit-border-radius:10px 10px 0px 0px;
    }


.bawah{
    background    :#00ccff;
    border-radius:0px 0px 10px 10px;
    -moz-border-radius:0px 0px 10px 10px;
    -webkit-border-radius:0px 0px 10px 10px;
    }

</style>
</head>
<body>
<div class='border'> Menggunakan border dengan radius 10px disetiap sudutnya</div>
<div class='atas'> Menggunakan border untuk kedua sisi atas</div>
<div class='bawah'> Menggunakan border untuk kedua sisi bawah</div>
<div class='box'> border biasa</div>
</body>
</html>

Sekarang coba anda jalankan pada browser kesangan anda, maka anda akan mendapatkan tampilan seperti pada gambar berikut:

Penjelasan kode:

<div class='border'></div>
<div class='atas'></div>
<div class='bawah'> </div>
Pertama kita membuat 3 box dengan tag <div></div> masing-masing dengan kita beri class border,atas, dan bawah.
-moz-border-radius:5px;
Membuat radius 5px untuk keempat sudut box. Properti ini dijalankan jika browser Mozilla firefox.
-webkit-border-radius:5px;
Membuat radius 5px untuk keempat sudut box. Properti ini dijalankan jika browser selain Mozilla Firefox.
.border{
    background    :#00ccff;
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    }
Memberi style pada class border
.atas{
    background    :#00ccff;
    border-radius:10px 10px 0px 0px;
    -moz-border-radius:10px 10px 0px 0px;
    -webkit-border-radius:10px 10px 0px 0px;
    }
Memberi style pada class atas (box yang kedua)
.bawah{
    background    :#00ccff;
    border-radius:0px 0px 10px 10px;
    -moz-border-radius:0px 0px 10px 10px;
    -webkit-border-radius:0px 0px 10px 10px;
    }
Memberi style pada class bawah

Sekian penjelasan saya tentang menentukan radius untuk setiap sudut. Jika terdapat kesalahan dalam artikel ini saya mohon maaf.

salam

TCindent Naturalisi

Read more →

Penerapan CSS3 Properti border-radius

Ok gan, kita jumpa lagi dalam artikel ini. Pada kali ini saya akan membahas tentang properti border-radius yang terdapat pada CSS3, untuk itu coba anda buat kode berikut:

<style>
.box    {
    border:solid thin : #009900;
    background       : #00cc00;
    color                 : white;
    text-align           : center;
}
</style>
<div class=’box’>border biasa</div>

Jika anda menjalankan script tersebut pada browser, maka anda akan mendapatkan tampilan betnuk kotak seperti pada gambar berikut:

Nah dengan properti border radius pada CSS3, anda dapat membuat lengkungan (radius) pada setiap sudut kotak tersebut. Secara umum, penggunaan properti border-radius dapat anda tuliskan seperti berikut:

"border-radius    :nilai;"    (tanpa kutip)

Untuk mengisi nilai border-radius, anda dapat menggunakan satuan pixel atau em, misalnya seperti 5px atau 3em. Contohnya seperti script berikut:

<style>
.box    {
Border-radius      : 5px;     border:solid thin : #009900;
    background     : #00cc00;
    color               : white;
    text-align         : center;
}
</style>
<div class=’box’>border biasa</div>

Jika anda menjalankan kode tersebut pada browser, maka akan mendapatkan tampilan kotak dengan sudut tumpul seperti dibawah ini:

Sebagai tambahan, agar properti dapat berjalan disemua browser, anda bisa membuat menjadi seperti berikut:

<style>
.box    {
-webkit- border-radius      : 5px;  // untuk membuat radius untuk browser selain firefox
-moz- border-radius      : 5px;  // untuk membuat radius pada mozila firefox
border-radius      : 5px;
    border:solid thin : #009900;
    background      : #00cc00;
    color          : white;
    text-align      : center;
}
</style>
<div class=’box’>border biasa</div>

Nah, sekarang anda sudah sedikit mengerti penggunaan properti border-radius ini kan??
Untuk menentukan Radius pada tiap sudut tertentu silahkan klik link berikut :
Menentukan Radius untuk Sudut Tertentu.
Salam

TCindent Naturalisi

Read more →

Tips dan Trik CSS3 Beserta contohnya

Pendahuluan

CSS (Cascading Style Sheet) merupakan salah satu bahasa pemrograman web yang berguna untuk mengendalikan beberapa elemen dalam sebuah web sehingga lebih terstruktur dan seragam. Pada umumnya, CSS digunakan untuk memformat tampilan halaman web yang dibuat dengan menggunakan HTML. Mungkin sebagian dari anda sudah mengetahui tentang CSS3 ini. Yups .. CSS3 merupakan update versi terbaru dari CSS versi sebelumnya yakni CSS2.

Keunggulan Penggunaan CSS3 :

Tampilan website lebih dinamis dan lebih ringan (lebih cepat aksesnya), dengan CSS3 anda dapat mengurangi penggunaan gambar dalam mendesain tampilan website anda.

Kelemahan Penggunaan CSS3 :

Sampai sekarang belum semua browser kompetibel dengan properti CSS3, khususnya browser versi lama. Hal ini tentunya menyulitkan kita, karena kita tidak dapat mengetahui browser yang dipakai pengunjung website kita.
Berikut tabel untuk mengetahui browser support terhadap terhadap properti CSS3 :

Properti	IE	Firefox	Chrome	Safari	Opera
Border-radius	No	-moz-	-webkit-	-webkit-	Yes
Box-shadow	No	-moz-	-webkit-	-webkit-	Yes
Border-image	No	-moz-	-webkit-	-webkit-	Yes
Bacground-size	No	-moz-	Yes	Yes	Yes
Bacground-origin	No	No	Yes	Yes	Yes
Text-shadow	Yes	Yes	Yes	Yes	Yes
Word-wrap	Yes	Yes	Yes	Yes	Yes
@font-face	Yes	Yes	Yes	Yes	Yes
2D transform: translate(), rotate(), scale(),skew(), matrix()	No	-moz-	-webkit-	-webkit-	-o-
3D transform: rotateX(), rotateY()	No	No	-webkit-	-webkit-	No
Transition	No	No	-webkit-	-webkit-	-o-
@keyframes	No	No	-webkit-	-webkit-	No
Animation	No	No	-webkit-	-webkit-	No
Coloumn-count	No	-moz-	-webkit-	-webkit-	No
Coloumn-gap	No	-moz-	-webkit-	-webkit-	No
Coloumn-rule	No	-moz-	-webkit-	-webkit-	No
Resize	No	No	Yes	Yes	No
Box-sizing	Yes	-moz-	-webkit-	-webkit-	Yes
Outline-offset	No	Yes	Yes	Yes	Yes

Untuk keterangan “yes” berarti browser support, jika keterangan “no” berarti browser tidak support, keterangan “–moz-“ pada awal properti. Misal anda menggunakan box-shadow:0px 0px 5px; agar properti disamping dapat diakses dalam browser Firefox, maka anda perlu menambahkannya menjadi –moz-box-shadow:0px 0px 5px; degitu pula dengan opera, safari dan chrome. Jadi, jika anda menginginkan menghasilkan tampilan terbaik pada semua browser, maka penulis menyarankan untuk mencantumkan pengulangan properti seperti contoh berikut:

box-shadow:0px 0px 5px; // properti dasar
–moz-box-shadow:0px 0px 5px; // agar support browser Firefox
–webkit-box-shadow:0px 0px 5px; // agar support Chrome dan Safari
–o-box-shadow:0px 0px 5px;  // agar support Opera

Contoh Penerapan CSS3 :
1.    Properti border-radius
2.    Properti gradient (panding)
3.    Properti box-shadow (panding)
4.    Properti text-shadow

Read more →