Efek-efek terbaru dari css3 untuk mempercantik blog maupun website anda.

CSS (Cascading Style Sheet) adalah sebuah kode bukan merupakan bahasa pemrograman yang fungsinya sendiri adalah membuat sebuah tampilan menjadi lebih menarik (user frendly). CSS sendiri merupakan singkatan dari Cascading Style Sheet yang di artikan secara abstrak adalah sebuah kode untuk membuat gaya pada sebuah halaman-halaman agar lebih menarik. Tentunya halaman-halaman tersebut diartikan sebagai sebuah website dan blog.

Dengan adanya CSS sebuah website akan terlihat lebih menarik dan cantik, itu di karenakan style pada CSS memiliki beberapa efek spesial. Dulu jika seseorang ingin membuat halaman pendaftaran untuk sebuah website dengan html murni tampilan mungkin akan seperti gambar dibawah ini :


Terlihat sederhana dan kurang menarik bukan!? coba kalian bandingkan dengan gambar yang ini:


Walaupun kontennya sederhana tetapi terlihat lebih menarik bukan!?
Yang harus kalian tahu setelah melihat gambar di atas adalah bahwa dalam pembuatan halaman contoh tersebut saya tidak memakai gambar!

Lho, background gradiasi itu?
eitsz, jangan salah baground itu saya buat dengan style CSS3

kok bisa!!? Gimana caranya!?
mau tahu!! mau tahu!!

Kasih tahu donk!!?
lihat tutorial di bawah ini :

<html>
<head>
<title> HTML TEST BY RIA RELADZI &copy; blank-note.blogspot.com</title>
<style>
.q{
border:1px solid Grey;
box-shadow:1px 2px 8px red,2px 1px 8px lime;
color:white;
background:radial-gradient(circle, #1a82f7, #2F2727);
text-shadow:1px 1px 6px red;
}
.q input{
border-radius:2px;
border:grey;
color:#000020;
}
.q input:hover{
box-shadow:1px 1px 9px red;
}
</style>
</head>
<body bgcolor=black text=lime>
<table class="q">
<tr>
<td> Nama</td><td><input type=text value=""></td>
</tr>
<tr>
<td> Email</td><td><input type=text value="">&nbsp;@&nbsp;<select><option value=yahoo.com>Yahoo.com</option><option value=yahoo.co.id>Yahoo.co.id</option></select></td>
</tr>
<tr>
<td> Password</td><td><input type=password value=""></td>
</tr>
<tr>
<td> <input type=submit value=kirim></td><td><input type=reset value="ulang"></td>
</tr>
</table>
</body>
</html>

simpan dengan nama tes.html

Lanjut!!

CSS yang di kembangkan oleh W3c mengalami perkembangan yang tidak terlalu cepat, namun ia selalu memberi kejutan di setiap updatennya. Diawali dari CSS1 tahun 1996 lebih ke pemformatan dokumen html agar tidak terkesan kaku, di versi berikutnya yaitu CSS2 memberi kejutan dengan mendukung penentuan posisi konten, downloadable, huruf font, tampilan pada tabel /table layout dan media tipe untuk printer. Hingga beberapa tahun CSS2 masih populer di gunakan oleh para web development, hingga pada sekitar tahun 2010an kalau gak salah CSS di update ke versi CSS3 itu hampir bersamaan dengan peluncuran html5, dengan CSS3 kejutan yang hadir lebih mengasyikan dan dinamis.

 Bagaimana tidak!! dengan CSS3 kita dapat membuat animasi 2D bahkan 3D, selain itu CSS3 juga telah menjadi populer dengan dukungan efek-efek menarik yang hadir di dalamnya, sebut saja text-shadow untuk membuat efek teks berbayang, border-radius untuk melengkungkan border, box-shadow membuat efek bayangan sebuah box, opacity untuk transparasi dan masih banyak lagi keasyikan CSS3 yang lain.

Tentu dengan adanya CSS3 kita lebih diuntungkan, yang tadinya jika kita ingin membuat efek-efek teks berbayang, border melengkung kita harus menggunakan image editor semisal photoshop dan corel draw yang notabene sebuah gambar dapat memperlambat loading sebuah website. Dengan hadirnya CSS3 itu dapat dengan mudah di atasi, websitepun menjadi lebih cepat untuk dibuka dan lebih cantik tampilannya.

Beberapa efek-efek menarik pada CSS3 yang dapat anda terapkan pada website/blog antara lain :

1. BOX-SHADOW
      sebelum adanya style ini banyak di antara kita untuk memberi efek bayang-bayang pada tabel atau elemen yang kita buat menggunakan gambar yang di terapkan di background. tentunya itu akan memperlambat proses load. Lha, dengan adanya kode ini kita tak usah ribet-ribet buka photoshop atau yang lainnya.

      Berikut style dari box-shadow

      <html>
      <head><title>Tutorial Ria Reladzi</title>
      <style type="text/css">
      #Bayangan{
                       box-shadow:1px 1px 6px #000;
                       border:1px;
                       padding:10px 5px 5px 5px;
                       
                     }
         </style>
         <head>
         <body>
              <div id="bayangan">
                    ini adalah contoh kotak bayangan
               </div>
          </body>
          </html>
   
       simpan dengan nama tes1.htm
       buka dengan web browser anda. dan lihatlah apa yang terjadi

  
 Syntak dari box shadow sendiri yaitu
box-shadow: none | <shadow> [ , <shadow> ]* <shadow> = inset? && [ <length>{2,4} && <color>? ]

saya dapat dari css3.info

 jika di artikan menurut saya :


box-shadow: intervalbayangan1(atas) intervalbayangan2(bawah) blur warna;
contoh =
box-shadow:3px 1px 8px red;

jika ingin gradiasi bayangannya kedalam kalian cukup menaruh inset di deklarasi paling belakang
contoh =
box-shadow:3px 1px 8px red inset;

jika ingin gradiasi lebih dari 1 warna, kalian dapat mendeklasikannya sebagai berikut.
syntak = box-shadow:warna1,warna2,warna...(n);
 contoh = box-shadow:0 0 10px 5px black, 40px -30px lime, 40px 30px 50px red, -40px 30px yellow, -40px -30px 50px blue;

2. TEXT-SHADOW
    Syntaks awalnya
    text-shadow:intervalbayangan1(atas) intervalbayangan2(bawah) blur warna;

    contoh =
    text-shadow:2px 2px 6px #0FF;
     

jika ingin gradiasi lebih dari 1 warna, kalian dapat mendeklasikannya sebagai berikut.
syntak = text-shadow:warna1,warna2,warna...(n);
 contoh = text-shadow:0 0 10px 5px black, 40px -30px lime, 40px 30px 50px red, -40px 30px yellow, -40px -30px 50px blue;

contoh file
 
 <html>
<head><title>Tutorial Ria Reladzi</title>
<style>
#bayangan{
border:1px solid #000;
font-size:18px;
text-shadow:1px 2px 2px lime,-1px 5px 3px red,9px 0px 5px purple;
}
</style>
<head>
<body>
<div id="bayangan">

                    ini adalah contoh bayangan

</div>
</body>
</html>

simpan dengan nama tes3.html
hasilnya


3. BORDER-RADIUS

   Syntak :
       border-radius:border-atas-kiri border-atas-kanan border-bawah-kanan border-bawah-kiri;

  Contoh :
       border-radius:4px 10px 4px 10px;


<html>
<head><title>Tutorial Ria Reladzi</title>
<style>
#border{
border:1px solid #000;
font-size:18px;
border-radius:4px 10px 4px 10px;
padding:10px;
width:300px;
}
</style>
<head>
<body>
<div id="border">

                    ini adalah contoh Border-radius

</div>
</body>
</html>

simpan dengan nama tes5.html
hasilnya:
     4. BACKGROUND GRADIENT

           Background gradient itu ada 2 macam penulisan

            1. liniear-gradient
                  Gradiasi ini biasanya hanya bergradiasi standar secara vertikal dan horizontal, dengan kombinasi interval radius.
                syntak :
                     background:liniear-gradient(posisi(to [top,left,bottom,right,top left,bottom left,top right,top right]), warna-1, warna-2,.....warna-n);
                contoh :
                       background: linear-gradient(to top right, red, orange, yellow, green, blue, indigo, violet);

<html>
<head><title>Tutorial Ria Reladzi</title>
<style>

#gradiasi{
width:300px;
background: linear-gradient(to top right, red, orange, yellow, green, blue, indigo, violet);
}
</style>
<head>
<body>
<div id="gradiasi">

                    Contoh gradiasi

</div>
</body>
</html>

namai dengan nama tes6.html
hasil kompilasinya yaitu:

                   2. radial-gradient
                         Adalah gradiasi objek dari tengah background
                         syntak
                              Background:radial-gradient(jenis-objek(circle,ellipse,membuat sendiri[80% 20%]), ukuran/letak objek(closest-side, closest-corner, farthest-side, farthest-corner, contain, cover), warna-1,warna-2,...warna-n;
           
                         contoh :
                             background:radial-gradient(circle,farthest-corner, #1a82f7, #2F2727,red,lime,grey,green);

 <html>
<head><title>Tutorial Ria Reladzi</title>
<style>

#gradiasi{
width:300px;
background:radial-gradient(circle,#1a82f7, #2F2727,red,lime,grey,green);}
</style>
<head>
<body>
<div id="gradiasi">

                    Contoh gradiasi

</div>
</body>
</html>

simpan dengan nama tes7.html
hasil kompilasinya:




Okey, cukup sekian tutorial dasar saya mengenai CSS3, sebenarnya masih banyak lagi efek-efek menarik dari css3 yang dapat kalian terapkan untuk mempercantik blog/website kalian.

Agar tidak ketinggalan mengenai CSS3 kalian dapat membacanya referensinya di sini
  1. http://www.css3.info/
  2. http://css-tricks.com/
  3. https://developer.mozilla.org/en-US/docs/CSS

dan perlu di ingat!! untuk penulisan standard CSS3 sesuai dengan W3c seperti di atas, namun ada kemungkinan kode di atas tidak dapat berjalan dengan baik dikarenakan setiap browser memiliki deklarasinya sendiri mengenai penulisan CSS3. Agar dapat berjalan dengan baik cobalah ikuti deklarasi seperti di bawah ini:

/* Untuk Browser Mozilla firefox  tambah -Moz-*/
-moz-text-shadow:1px 3px 8px #ccf;

/* Untuk Browser Safari 4-5, Chrome 1-9  tambah -webkit-*/
-webkit-text-shadow:1px 3px 8px #ccf;

/* Untuk Browser IE  tambah -ms-*/
-ms-text-shadow:1px 3px 8px #ccf;

/* Untuk Browser Opera  tambah -o-*/
-o-text-shadow:1px 3px 8px #ccf;

/* Untuk global deklarasi tidak usah pakai embel-embel*/
text-shadow:1px 3px 8px #ccf;



WARNING!!
hei, jika artikel ini menarik buat kalian, kalian dapat kok mengunduhnya, atau mencopy pastekannya di blog/website kalian secara gratis.  Tapi ingat, kalian harus memberikan source page link blog ini ya!? atau kalau tidak, nanti akan saya laporkan sama google webmaster loh!!? sekian terimakasih. jangan lupa mampir gan!!






     
     
DOWNLOADS
Next PostPosting Lebih Baru Previous PostPosting Lama Beranda
Posting Komentar