Tampilkan postingan dengan label Belajar CSS3. Tampilkan semua postingan
Tampilkan postingan dengan label Belajar CSS3. Tampilkan semua postingan

Membuat Form Login dengan HTML5 dan CSS3

Form login berikut ini dibuat menggunakan HTML5 dan CSS3. Form berikut sudah diuji di Mozilla Firefox 10, Safari 5.0.1 dan Google Chrome 18.0.1010.1. Dari hasilnya, google chrome belum mendukung maksimal atribut "placeholder" untuk tag input. Silakan di copy untuk kepentingan pribadi, jangan menggunakan untuk kepentingan kemersil (menjual untuk memperoleh keuntungan) tanpa ijin dari yang membuat.



*klik DEMO untuk melihat hasilnya.

Script CSS nya :
<style>
/** login form by Jeanot Nahasan Nida **/
/** visit http://jeanotnahasan.blogspot.com **/
body{
    font-family: sans-serif;
    background: #999999;
    color: #999999;
}
#contact div, h1, form, fieldset, input, textarea {
    margin: 0; padding: 0; border: 0; outline: none;
}
#contact {
    width: 400px; margin: auto; padding: 30px 30px; margin-top:60px;
    background: #111111;
    border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;
    -moz-box-shadow: 0px 0px 5px #999;-webkit-box-shadow: 0px 0px 5px #999;
}
#contact a{
    text-decoration:none;
    color:#666666;
   
}
h1 {
    font-size: 26px; color: #999999; text-transform: uppercase;
    text-align: center; margin: 0 0 30px 0; text-shadow: 0px 3px 2px #000000;
}
form {
    margin-bottom:25px;
}
label {
    float: left; margin: 10px 20px 0 0; width: 75px;
    text-align: right; font-size: 14px; color: #999999;
    font-weight:bold;
    text-transform: uppercase; text-shadow: 0px 2px 0px #111111;
}


input {
    width: 250px; height: 35px; padding: 5px 20px 0px 20px; margin: 0 0 20px 0;
    background: #666666;
    background: -moz-linear-gradient(top, #999999 0%, #b2b2b2  20%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#999999), color-stop(20%,#b2b2b2)); /* webkit */
    border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
    -moz-box-shadow: 0px 2px 0px #111111;-webkit-box-shadow: 0px 2px 0px #111111;
    font-size: 14px; color: #444444; text-transform: uppercase; text-shadow: 0px -1px 0px #222222;
}
    input::-webkit-input-placeholder  {
        color: #333333; text-shadow: 0px -1px 0px #222222;
    }
    input:-moz-placeholder {
        color: #333333; text-shadow: 0px -1px 0px #222222;
    }




input:focus{
    background: #999999;
    border: 1px solid #CCCCCC;
    background: -moz-linear-gradient(top, #999999 0%, #dddddd  20%); /* firefox */ /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#999999), color-stop(100%,#dddddd)); /* webkit */
}


input[type=submit], input[type=reset] {
    width: 100px; height: 30px; float: right; padding: 5px 5px; margin: 0 15px 0 0;
    -moz-box-shadow: 0px 0px 5px #999;-webkit-box-shadow: 0px 0px 5px #999;
    background: -moz-linear-gradient(top, #999999 0%, #b2b2b2  20%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#999999), color-stop(100%,#b2b2b2)); /* webkit */
    cursor: pointer;
}


input[type=submit]:hover, input[type=reset]:hover{
    border: 3px solid #CCCCCC;
    background: -moz-linear-gradient(top, #999999 0%, #dddddd  20%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#999999), color-stop(100%,#dddddd)); /* webkit */
}
</style>
Script HTML5 nya :
<!DOCTYPE html>
<html
<head>
 <title>Belajar HTML5 dan CSS3 | Jeanot Nahasan Nida</title>
</head>
<body>
<div id="contact">
    <h1>Login Form by JNC</h1>
    <form action="http://www.crazflo.web.id" method="post">
        <fieldset>
            <label for="name">Username:</label>


            <input type="text" id="username" name="username" placeholder="Enter your username" />


            <label for="password">Email:</label>
            <input type="password" id="password" name="password" placeholder="your password" />


            <input type="submit" value="Login" /> <input type="reset" value="Cancel" />


        </fieldset>
    </form>
    <center><p style="font-size:12px;">&copy; <a href = "http://jeanotnahasan.blogspot.com"> JNC </a> | 2012 <br/>
    <a href="">back to post</a></p>
    </center>
    </div>
    </body>
</html>

Semoga bermanfaat, jika ada kekurangan, silakan disampaikan via komentar. No SPAMMING!
byJeanot
in , ,
Kamis, Maret 01, 2012
Form login berikut ini dibuat menggunakan HTML5 dan CSS3 . Form berikut sudah diuji di Mozilla Firefox 10, Safari 5.0.1 dan Google Chrome...
Read More

Mengenal Pengertian dan Perkembangan CSS3

Sebelumnya, saya sudah memberikan sedikit penjelasan tentang HTML5 yang kedepannya tetap akan dibahas di blog ini. Pada tulisan ini, saya ingin berbagi informasi terkait perkembangan tenknologi web yang juga merupakan pasangan dari HTML5, yaitu CSS3.

CSS (Cascading Style Sheets) adalah: kumpulan kode-kode yang berurutan dan saling berhubungan untuk mengatur format / tampilan tata letak sebuah halaman web. CSS ini bersifat embeded pada tag HTML yang artinya menempel atau melekat pada tag HTML.

Sebelum CSS lahir dan berkembang, web programer hanya menggunakan tag <table> pada HTML untuk mengatur tata letak tampilan.

Keuntungan menggunakan CSS :
  • Untuk mengatur dan memperindah tampilan web (lebih rapi).
  • Lebih praktis dan menghemat penggunaan tag yang berulang-ulang.
  • Bisa digunakan pada website atau webpage yang lain, misalnya website kita mempunyai 5 halaman (webpage), maka kita tidak perlu membuat pengaturan tampilan atau menulis ulang code-code untuk mengatur tata letak tampilan pada masing-masing halaman/page sebanyak lima kali. Kita bisa memanfaatkan code yang sudah ada dengan memanggil tag CSS yang dibuat pada file terpisah (file.css).

Format penulisan syntax/code CSS :

selector { property: value }
Contoh Syntax :
h1{color : blue}
Contoh di atas menunjukkan :
Selector-nya : h1
Property-nya : color
Value : blue


Lalu, Apa Pengertian CSS3 itu?
CSS3 tidak sama dengan CS(S-nya 3 kali) atau CSSSS (Cascading Style Sheets Sheets Sheets). CSS3 merpukan generasi ke-3 dari perkembangan CSS sebelumnya. Jadi pada dasarnya, pengertian CSS3 sama saja dengan pengertian CSS generasi paling awal. Hanya saja, beberapa standar baru untuk CSS3 menggantikan CSS2 dan mungkin akan membuat kiat dapat bereksplorasi lebih dalam lagi untuk membuat tampilan situs lebih menarik dan mulai meninggalkan situs yang membuat menunggu dengan loading yang lama.

Beberapa kelebihan yang ada pada CSS3 :
  • CSS3 bisa lebih detail untuk mendeklarasikan objek yang akan diberikan style. Contohnya di dalam  objek ‘blockquote’ bisa membuat (quote) di awal dan akhirnya menggunakan font lebih besar dari konten blockquote itu sendiri. 
  • CSS3 kaya akan fitur untuk animasi dan efek untuk text atau objek, yang sebelumnya tidak bisa   dilakukan oleh CSS2/CSS2.1, dan bisa menggantikan peran gambar. Standar web 2.0 atau situs interaktif dan efisien berdasar dari penggunaan CSS. 
  • Dengan CSS3 situs akan bisa lebih berkembang dan bisa lebih interaktif lagi dengan pengunjung.
  • Bisa  mengurangi ukuran  file yang di-load dan lebih ringan, secara otomatis mengurangi bandwidth inbound/outbound situs.

CSS3 memiliki fasilitas untuk shadow dari suatu div layout, fitur transparansi, gradien warna pada border, warna pada teks yang diseleksi, fitur skala memperkecil atau memperbesar layout, kolom pada teks, dan fitur gradien pada background.



Pekembangan CSS3 Seperti Apa?
Dari hasil pengamatan saya pada beberapa situs yang sudah menerapkan CSS3 + HTML5, saya beranggapan bahwa fungsi jQuery sepenuhnya akan tergantikan oleh CSS3. Perkiraan ke depan, tidak ada lagi web yang menggunakan jQuery karena sizenya lebih besar dibanding CSS3. Bukan cuma jQuery, saat ini penggunaan flash juga mulai terakusisi dengan semakin berkembangnya CSS3. Menurut saya, CSS3 merupakan bahasa pemrograman olah digital gambar/citra tingkat tinggi karena dengan CSS3, anda bisa menggambar Tokoh Kartun Doraemon seperti contoh berikut :
Dari contoh di atas, memang terlihat belum semua browser sudah mendukung secara keseluruhan penggunaan CSS3, namun, masing-masing browser sudah melakukan proses perkembangan produk agar bisa mendukung penggunaan CSS3.

Contoh lain penggunaan CSS3 yaitu membuat efek 3D pada tuliasan, contohnya :


JEANOT NAHASAN'S BLOG




Code untuk contoh di atas sebagai berikut :
<h4 style="color: #3d3d3d; font-size: 32px; text-align: center; text-height: font-size; text-shadow: 1px 0px #ccc, 0px 1px #ccc, 2px 1px #ddd, 1px 2px #bbb, 3px 2px #ddd, 2px 3px #bbb, 4px 3px #ddd, 3px 4px #bbb, 5px 4px #ddd, 4px 5px #bbb, 6px 5px #ddd, 5px 6px #bbb, 7px 6px #ddd, 6px 7px #bbb, 8px 7px #ddd, 7px 8px #bbb, 8px 8px #ddd; ">
<a href="http://jeanotnahasan.blogspot.com">JEANOT NAHASAN'S BLOG</a></h4>
Cukup sekian yang bisa saya bagikan pada tulisan ini, di lain waktu, saya akan berbagi lebih banyak tentang CSS3 dan studi kasus membuat tampilan menarik dengan CSS3.

Jika masih ada kekurangan pada pembahasan ini, saya sangat berharap peran serta dari teman2 untuk memperbaiki/melengkapi yang belum lengkap dengan berkomentar di tempat yang telah disediakan :)
byJeanot
in , ,
Jumat, Februari 24, 2012
Sebelumnya, saya sudah memberikan sedikit penjelasan tentang HTML5 yang kedepannya tetap akan dibahas di blog ini. Pada tulisan ini, saya i...
Read More

 

Jeanot Nahasan © 2015 - Designed by Templateism.com, Plugins By MyBloggerLab.com