Showing posts with label kode css. Show all posts
Showing posts with label kode css. Show all posts

membuat layout website dengan css

membuat layout website dengan css.Postingan kali ini lebih ke melanjutkan postingan saya sebelumnya yaitu belajar kode css.Dalam membuat layout dengan css, kita bisa membuat style yang terpisah atau bisa juga di gabungkan dalam satu halaman html atau php.

kali ini kita belajar membuat layout yang cssnya bergabung dengan html dan jika anda mau membuat terpisah cukup copy css dan buat file cssnya.
More about → membuat layout website dengan css

membuat galeri foto efek hover dengan css

membuat galeri foto efek hover dengan css. seperti sebelumnya saya pernah posting dengan judul hampir sama yaitu membuat galeri foto dengan css, namun kali ini kita sedikit memberikan efek animasi hover nya.

trik ini sendiri sangat mudah untuk di terapkan dalam sebuah website dan blog.untuk penggunaannya sendiri itu tergantung anda.

untuk jelasnya , berikut contoh live demonya:

.hovergallery
More about → membuat galeri foto efek hover dengan css

Belajar css dan fungsi-fungsinya | bagian 1

Belajar css dan fungsi-fungsinya. Pada postingan kali ini saya akan mencoba share tentang kode css3 , kurang lebihnya seperti itu, namun pembahasan ini sendiri saya bagi menjadi beberapa bagian.
pada bagian pertama ini saya akan membahas tentang border radius.

sebelum itu tolong mengerti dulu konsep untuk menghubungkan kode css dengan html.

Jika .nama maka pada html kode pangilannya harus
More about → Belajar css dan fungsi-fungsinya | bagian 1

Membuat Menu Bundar untuk website dan blog

Membuat Menu Bundar untuk website dan blog.membuat menu dan menu lagi,hehe, gpp lah untuk mengisi waktu luang daripada habis buat facebook.hehe.

siapa tahu aja ada yang menginginkan menu seperti ini, menu ini simpel banget namun unik dan masih sangat jarang orang yang menggunakan menu seperti ini.
berikut ini contoh atau demo menu nya:


.circlemenu{
width: 100%;
overflow:hidden;
}

.circlemenu
More about → Membuat Menu Bundar untuk website dan blog

Cara Membuat css Triangle

Cara Membuat css Triangle. Triangle sendiri banyak sekali manfaatnya untuk blog, misalkan kita mau menunjukan sesuatu kepada pengunjung ,kita membuat sapaan di dalam bentuk triangle.
ada yang masih bingung apa itu triangle.
berikut ini contohnya:
contoh 1


.uparrowdiv, .downarrowdiv, .leftarrowdiv, .rightarrowdiv{
width:400px;
min-height:40px; /*min height of DIV should be set to at least 2x
More about → Cara Membuat css Triangle

Membuat bingkai Foto dengan css3

Membuat bingkai Foto dengan css. Ok sekarang saya akan share tentang cara membuat bingkai foto dengan css, ya tentu css3 ya.. tapi sebenarnya ini tidak cuma bisa di gunakan untuk foto , bisa foto + artikel , atau hanya artikel , atau lainnya  terserah anda mau menampilkan apa, namun lebih elegan aja kalau nampilin foto di blog dan website menggunakan bingkai.

.imageborder{
border-width: 20px;
-
More about → Membuat bingkai Foto dengan css3

membuat menu dengan css

membuat menu dengan css. Tertarik dengan efeknya , kali ini posting tentang membuat menu dengan css lagi deh. sebelumnya saya banyak posting tentang Cara membuat menu dengan css baik itu dropdown maupun tidak , atau vertikal dan menu horizontal. jadi postingan kali ini hanya sebagai pelengkap saja.
lihat di artikel terkait di bawah postingan ini jika anda mau menu yang lainnya.

ok sekarang
More about → membuat menu dengan css

Membuat Efek Gambar saat di sentuh

Membuat Efek Gambar saat di sentuh.Trik kali ini membahas tentang css lagi, kali ini kita akan membuat efek gambar saat di sentuh mouse. tentu efek ini sangat bagus dan elegan untuk anda gunakan di blog atau website.

seperti sebelumnya efek gambar ini hanya menggunakan kode css dan html untuk implementasinya , jadi tidak memberatkan loading blog atau website anda.
untuk lebih jelasnya berikut
More about → Membuat Efek Gambar saat di sentuh

Membuat menu vertikal animasi dengan css

Membuat menu vertikal dengan css. Oke kembali lagi kita membahas tentang menu dengan css, namun kali ini selain tampilannya yang beda dan menunya berbentuk vertikal. sebelumnya saya banyak posting tentang menu horizontal dengan css , ada juga yang menggunakan javascript.

balik ke pokok postingan kali ini, kita akan membuat vertikal menu yang ada efeknya menggunakan css3.
untuk lebih jelasnya
More about → Membuat menu vertikal animasi dengan css

membuat slide keterangan gambar animasi

Kembali lagi membahas tentang kode css, Namun kali ini kita akan membuat slide keterangan gambar.
Sebuah gambar yang ada pada website tentu memiliki title atau keterangan untuk menjelaskan apa maksud gambar tersebut, tentu secara standar keterangan gambar hanya biasa2 saja.

pada trik ini kita akan membuat keterangan gambar keluar secara slide dari bawah gambar dengan animasi yang elegan dan
More about → membuat slide keterangan gambar animasi

membuat menu website dengan css

membuat menu website dengan css.Kembali lagi membahas tentang Membuat menu dengan css, Tentu kali ini tampilannya dan efeknya yang beda.
Menu ini bisa di bilang sangat elegan dan animasi karena efek transparan saat di sentuh mouse.
Untuk lebih jelasnya , berikut ini contoh menu nya:

div.bottombar{ /* bar that runs across the bottom of the menu */
height: 10px;
background: #1a1109;
}

More about → membuat menu website dengan css