CONTOH SYNTAX CSS3

pada postingan kali ini saya membahas tentang syntax-syntax untuk membuat efek-efek

background, dan button menggunakan syntax css 3 berikut saya memberikan 3 contoh

yang berbeda beserta contoh hasilnya.

1. CONTOH PERTAMA

Untuk menghasilkan efek glossy, saya menggunakan -moz-border-radius untuk 

rounded corner dan -moz-linear-gradient untuk gradasinya. berikut adalah syntax

dan hasilnya. 

Syntax :  

.tombol {
   width: 600px;
   height: 200px;
   margin: -30px auto;
   border: 2px solid #4F93CA;
   background-color: rgba(60, 132, 198, 0.8);
   /* Kode yang digunakan */
   -moz-border-radius: 100px;
   -moz-box-shadow:0 20px 20px rgba(66, 140, 240, 0.3);
   background-image: -moz-linear-gradient(rgba(28, 91, 155, 0.8) 0%, 

   rgba(108, 191, 255, .9) 90%);
   -webkit-border-radius: 100px;
   -webkit-box-shadow:0 20px 20px rgba(66, 140, 240, 0.3);
   background-image: -webkit-gradient(linear, 0% 0%, 0% 90%, from

  (rgba(28, 91, 155, 0.8)), to(rgba(108, 191, 255, .9)));
}
.kilau {
   top:1px;
   left:50px;
   position: relative;
   height: 110px;
   width: 500px;
   /* Kode yang digunakan */
   -moz-border-radius: 100px;
   background-color: rgba(255, 255, 255, 0.2);
   background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.55) 0%, 

   rgba(255, 255, 255, 0) 80%);
   -webkit-border-radius: 100px;
   background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from

  (rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0)));
}
.tombol span { 
   text-shadow: 0px 1px 8px #2867A5;
   font-family: arial black;
   color: #fefefe;
   font-size: 80px;
   position: relative;
   top: -20px;
   left: 150px;
}

2. CONTOH KEDUA

Perintah css3 diatas dapat anda gunakan dengan mudah dan bisa diterapkan sebagai gambar latar/background sebuah area atau latar halaman. Anda tinggal sisipkan pada bagian css yang sudah ada. - See more at: http://www.zainalhakim.web.id/posting/membuat-background-motif-unik-dengan-css3.html#sthash.GN7PRel9.dpuf

 Perintah css3 diatas dapat anda gunakan dengan mudah dan bisa diterapkan 

 sebagai gambar latar/background sebuah area atau latar halaman. Anda 

 tinggal sisipkan pada bagian css yang sudah ada. 

Syntax : 

 background: linear-gradient(324deg, #232927 4%, transparent 4%) -70px 43px, 

 linear-gradient( 36deg, #232927 4%, transparent 4%) 30px 43px, linear-gradient

(72deg, #e3d7bf 8.5%, transparent 8.5%) 30px 43px, linear-gradient

(288deg, #e3d7bf 8.5%, transparent 8.5%) -70px 43px, linear-gradient

(216deg, #e3d7bf 7.5%, transparent 7.5%) -70px 23px, linear-gradient

(144deg, #e3d7bf 7.5%, transparent 7.5%) 30px 23px, linear-gradient

(324deg, #232927 4%, transparent 4%) -20px 93px, linear-gradient

( 36deg, #232927 4%, transparent 4%) 80px 93px, linear-gradient

( 72deg, #e3d7bf 8.5%, transparent 8.5%) 80px 93px, linear-gradient

(288deg, #e3d7bf 8.5%, transparent 8.5%) -20px 93px, linear-gradient

(216deg, #e3d7bf 7.5%, transparent 7.5%) -20px 73px, linear-gradient

(144deg, #e3d7bf 7.5%, transparent 7.5%) 80px 73px; background-color: #232927; 

background-size: 100px 100px;

3. CONTOH KETIGA

Seperti halnya bayangan - bayangan text, adapula bayangan yang diinginkan dalam

bentuk banyak sehingga terlihat banyak text dibelakanganya.

Syntax :

h3 {text-shadow: 0.2em 0.5em 0.1em #600,
      -0.3em 0.1em 0.1em #060,
      0.4em -0.3em 0.1em #006} 

  

REFERENSI :

• http://www.zainalhakim.web.id/posting/membuat-background-motif-unik-dengan-css3.html
• http://cahcepu.com/blog/css3hebat/
• http://blog.nembelas.com/text-shadow-menggunakan-css/

background: linear-gradient(324deg, #232927 4%, transparent 4%) -70px 43px, linear-gradient( 36deg, #232927 4%, transparent 4%) 30px 43px, linear-gradient( 72deg, #e3d7bf 8.5%, transparent 8.5%) 30px 43px, linear-gradient(288deg, #e3d7bf 8.5%, transparent 8.5%) -70px 43px, linear-gradient(216deg, #e3d7bf 7.5%, transparent 7.5%) -70px 23px, linear-gradient(144deg, #e3d7bf 7.5%, transparent 7.5%) 30px 23px, linear-gradient(324deg, #232927 4%, transparent 4%) -20px 93px, linear-gradient( 36deg, #232927 4%, transparent 4%) 80px 93px, linear-gradient( 72deg, #e3d7bf 8.5%, transparent 8.5%) 80px 93px, linear-gradient(288deg, #e3d7bf 8.5%, transparent 8.5%) -20px 93px, linear-gradient(216deg, #e3d7bf 7.5%, transparent 7.5%) -20px 73px, linear-gradient(144deg, #e3d7bf 7.5%, transparent 7.5%) 80px 73px; background-color: #232927; background-size: 100px 100px; - See more at: http://www.zainalhakim.web.id/posting/membuat-background-motif-unik-dengan-css3.html#sthash.qQng1H8Z.dpuf

background: linear-gradient(324deg, #232927 4%, transparent 4%) -70px 43px, linear-gradient( 36deg, #232927 4%, transparent 4%) 30px 43px, linear-gradient( 72deg, #e3d7bf 8.5%, transparent 8.5%) 30px 43px, linear-gradient(288deg, #e3d7bf 8.5%, transparent 8.5%) -70px 43px, linear-gradient(216deg, #e3d7bf 7.5%, transparent 7.5%) -70px 23px, linear-gradient(144deg, #e3d7bf 7.5%, transparent 7.5%) 30px 23px, linear-gradient(324deg, #232927 4%, transparent 4%) -20px 93px, linear-gradient( 36deg, #232927 4%, transparent 4%) 80px 93px, linear-gradient( 72deg, #e3d7bf 8.5%, transparent 8.5%) 80px 93px, linear-gradient(288deg, #e3d7bf 8.5%, transparent 8.5%) -20px 93px, linear-gradient(216deg, #e3d7bf 7.5%, transparent 7.5%) -20px 73px, linear-gradient(144deg, #e3d7bf 7.5%, transparent 7.5%) 80px 73px; background-color: #232927; background-size: 100px 100px; - See more at: http://www.zainalhakim.web.id/posting/membuat-background-motif-unik-dengan-css3.html#sthash.qQng1H8Z.dpuf

background: linear-gradient(324deg, #232927 4%, transparent 4%) -70px 43px, linear-gradient( 36deg, #232927 4%, transparent 4%) 30px 43px, linear-gradient( 72deg, #e3d7bf 8.5%, transparent 8.5%) 30px 43px, linear-gradient(288deg, #e3d7bf 8.5%, transparent 8.5%) -70px 43px, linear-gradient(216deg, #e3d7bf 7.5%, transparent 7.5%) -70px 23px, linear-gradient(144deg, #e3d7bf 7.5%, transparent 7.5%) 30px 23px, linear-gradient(324deg, #232927 4%, transparent 4%) -20px 93px, linear-gradient( 36deg, #232927 4%, transparent 4%) 80px 93px, linear-gradient( 72deg, #e3d7bf 8.5%, transparent 8.5%) 80px 93px, linear-gradient(288deg, #e3d7bf 8.5%, transparent 8.5%) -20px 93px, linear-gradient(216deg, #e3d7bf 7.5%, transparent 7.5%) -20px 73px, linear-gradient(144deg, #e3d7bf 7.5%, transparent 7.5%) 80px 73px; background-color: #232927; background-size: 100px 100px; - See more at: http://www.zainalhakim.web.id/posting/membuat-background-motif-unik-dengan-css3.html#sthash.qQng1H8Z.dpuf

background: linear-gradient(324deg, #232927 4%, transparent 4%) -70px 43px, linear-gradient( 36deg, #232927 4%, transparent 4%) 30px 43px, linear-gradient( 72deg, #e3d7bf 8.5%, transparent 8.5%) 30px 43px, linear-gradient(288deg, #e3d7bf 8.5%, transparent 8.5%) -70px 43px, linear-gradient(216deg, #e3d7bf 7.5%, transparent 7.5%) -70px 23px, linear-gradient(144deg, #e3d7bf 7.5%, transparent 7.5%) 30px 23px, linear-gradient(324deg, #232927 4%, transparent 4%) -20px 93px, linear-gradient( 36deg, #232927 4%, transparent 4%) 80px 93px, linear-gradient( 72deg, #e3d7bf 8.5%, transparent 8.5%) 80px 93px, linear-gradient(288deg, #e3d7bf 8.5%, transparent 8.5%) -20px 93px, linear-gradient(216deg, #e3d7bf 7.5%, transparent 7.5%) -20px 73px, linear-gradient(144deg, #e3d7bf 7.5%, transparent 7.5%) 80px 73px; background-color: #232927; background-size: 100px 100px; - See more at: http://www.zainalhakim.web.id/posting/membuat-background-motif-unik-dengan-css3.html#sthash.qQng1H8Z.dpuf