Artikel

Home > Artikel
 

 

User Interface CSS


Diposting : 2017-03-16 oleh : WebHozz



Halo sobat Webhozz berjumpa lagi dengan saya, kali ini saya ingin membagikan artikel mengenai user interface pada CSS. Nah untuk menjawab pertanyaan tersebut langsung aja yuk kita masuk ke pembahasan artikelnya  sobat Webhozz.

cara memanipulasi suatu elemen link (tag <a><a/>) agar bisa tampil layaknya button di dalam game. CSS akan terasa sangat penting karena bisa mengurangi penggunaan gambar. Untuk lebih jelasnya maka kita bisa melihat kode program di bawah ini :

<!DOCTYPE  HTML>

<html>

          <head>

                <style

                a     {

                                    color :     #fff ;

                                    text-decoration :  none ;

                }    

                a : hover  {

                                    text-decoration : underline ;

                }

                a.button    {

                                  background :   #185da8 ;

                                  border-radius :   5px ;

                                  display :  block ;

                                  font-size :  30px ;

                                  margin :  40px  0  0   270px ;

                                  padding :  10px

                                  width :   200px

                }

 

                a . button : hover   {

                                    background :    #2488f5 ;

                                    color :    #fff ;

                                    text-decoration : none ;

                }

                #gameUI    {
                                        height :    600px

                                        position :     absolute ;

                                        width :    800px ;

                }

                #gameIntro,   #gameComplete   {

                                        backgroiund :   rgba (0,    0,    0,    0 . 5 )  ;

                                        margin-top :   100px ;

                                        padding :   40px   0 ;

                                        text-align :   center ;

                }

                </style>

   </head>

   <body>

                <div id= " gameUI " >

                       < div id="gameIntro">

                                <h1>Asteroid avoidance </h1>

                                <p><a   id="gamePlay"  class="button"

 

 

href=: ">Play</a></p>

                    </div>

                 </div>

        </body>

</html>

 

Keterangan :

Kode  a     {

                                    color :     #fff ;

                                    text-decoration :  none ;

                }    

Kode tersebut menerangkan dimana kita melakukan penentuan tag a dengan tema warna putih (#fff) dan tanpa garis bawah (text-decoration :  none)  maka setiap link a href akan memiliki teks warna putih tanpa garis bawah.

 

Kode     a : hover  {

                                    text-decoration : underline ;

                }

Kode tersebut menerangkan ketika tag tersebut didekati mouse maka akan diberikan underline (text-decoration : underline).

 

Kode     a.button    {

                                  background :   #185da8 ;

                                  border-radius :   5px ;

                                  display :  block ;

                                  font-size :  30px ;

                                  margin :  40px  0  0   270px ;

                                  padding :  10px

                                  width :   200px

                }

Kode tersebut menerangkan mengenai khusus untuk tag a dengan class button diberikan setting khusus sehingga bentuknya akan menyerupai sebuah button game.

 

Kode     #gameUI    {
                                        height :    600px

                                        position :     absolute ;

                                        width :    800px ;

                }

Kode tersebut menerangkan mengenai ini untuk menentukan tinggi, lebar dan posisi dari class gameUI..

 

Kode       #gameIntro,   #gameComplete   {

                                        backgroiund :   rgba (0,    0,    0,    0 . 5 )  ;

                                        margin-top :   100px ;

                                        padding :   40px   0 ;

                                        text-align :   center ;

                }

Kode tersebut menerangkan mengenai menentukan warna latar dan perataan teks center papda class gameintro (#gameIntro)

 

Nah sobat Webhozz itulah pembahasan singkat mengenai User Interface pada CSS. Semoga pembahasan artikel ini dapat membantu sobat Webhozz semua dalam mempelajari CSS, dan juga dapat menambah pengetahuan sobat Webhozz semua. Sampai berjumpa lagi pada pembahasan artikel-artikel lainnya yang tentunya lebih menarik lagi.




Tag : kursus android, kursus web, kursus web design, kursus php, kursus website, lenovo, woocommerce, windows, excel, xampp, php, mysql, twitter, analytic, adwords, google, maps, seo, jquery, slider, browser, game, transition, animation, whatsapp, desktop, wireframe, desain, vps, css, aplikasi, html, javascript, captcha, form, kode, kaskus, autoscroll, codeigniter, processor, bootstrap, ios, wordpress, div, span, lollypop, background, marquee, behaviour, plugin, chaton, bitcoin, opencart, payment, post, get, tooltip, button, silverlight, webmaster, phonegap, facebook, html5, swicth, sass, bbm, alert, mvc, fungsi, mobile, loading, nokia, template, traffic, laravel, yii, jquerymobile, blogger, adobe, baidu, hosting, font, server, input, sticky, menu, tokoonline, prestashop, joomla, java, yahoo, angular, microsoft, responsive, generator, visitor, counter, flatdesign, kursus web design jakarta, kursus web design bandung, kursus website bandung, kursus php bandung, kursus android bandung, kursus java bandung, kursus web bandung, Aplikasi Ramadhan, Cara Membuat Website, Tempat Kursus Website Bandung, Manfaat Internet, Menggunakan Wireframe Web, multikolom, horizontal, ym, toko online, controllers, optimalisasi, landing page, DOM, multikolom, horizontal, ym, toko online, controllers, optimalisasi, landing page, DOM, kursus web jogja, kursus website jogja, kursus web design jogja, kursus web programming jogja, kursus php jogja, kursus android jogja, kursus android programming jogja, kursus java jogja, kursus webmaster jogja, kursus codeigniter jogja, kursus wordpress jogja, kursus seo jogja, kursus vb jogja, kursus sql server jogja, kursus game jogja, kursus website jakarta, kursus web design jakarta, kursus web programming jakarta, kursus webmaster jakarta, kursus php jakarta, kursus wordpress jakarta, kursus android jakarta, kursus seo jakarta, kursus java jakarta, kursus sql server jakarta, framework cordova, mengenal framework cordova, apa itu cordova, membuat aplikasi android dengan cordova, cordova android, aplikasi hybrid android, cordova vs phonegap, Kursus Website Surabaya, Kursus Web Design Surabaya, Kursus Webmaster Surabaya, Kursus PHP Surabaya, Kursus Wordpress Surabaya ,