Efek bayangan seperti cermin pada sebuah gambar atau teks
sudah bisa dibuat dengan menggunakan css, lebih tepatnya css3 reflect,
bagi kalian yang tidak begitu mahir dalam penggunaan software gambar
seperti Adobe Photoshop, css3 reflect bisa menjadi solusi untuk membuat
efek cermin untuk gambar, untuk menghasilkan efek cermin atau bayangan
tidak membutuhkan kode css yang panjang, tidak seperti membuat efek-efek
css3 pada umumnya.
Mi-Ko-m
-----------------------------------------------------------------------------------------------
Sabtu, 10 Januari 2015
Header menjadi dua bagian menyamping
Cara Membuat Header Menjadi 2 Kolom. pastinya
menarik bukan ? dengan ini kita jadi bisa membuat header blog kita
menjadi lebih ramai dan menarik. apasih membuat header menjadi dua kolom
? yaitu kita membuat yang tadinya header hanya 1 kolom, dan sekarang
menjadi 2 kolom seperti gambar di samping ini. di blog-blog/web-web
biasanya elemen yang kanan digunakan memasang Iklan atau gambar. nanti
hasil-nya seperti tampilan header kiri di blog saya ini. langsung aja
ini dia langkah-langkahnya :
memberi keterangan gambar bila disoot mouse
Memberi keterangan gambar pada post image akan membantu pembaca
untuk mengetahui penjelasan dari gambar yang dimaksud, efek hover yang
ditampilkan pada keterangan gambar berbentuk slide dari arah kiri ke
arah kanan dan sebagai alternatif pilihan, efek hover ini bisa dari
bawah ke atas, dan script yang digunakan menggunakan css level 3.
Menambahkan keterangan gambar pada post, tentu saja akan mempercantik tampilan blog, terutama untuk tampilan post. Script ini sangat cocok digunakan bagi mereka yang mempunyai blog dengan banyak penggunaan gambar sebagai penambah keterangan suatu posting (artikel). Kelebihan script ini karena menggunakan css, tentu saja penggunaannya mudah dan untuk hover keterangan gambar pun akan menyesuaikan ukuran dari gambar yang ditampilkan.
Menambahkan keterangan gambar pada post, tentu saja akan mempercantik tampilan blog, terutama untuk tampilan post. Script ini sangat cocok digunakan bagi mereka yang mempunyai blog dengan banyak penggunaan gambar sebagai penambah keterangan suatu posting (artikel). Kelebihan script ini karena menggunakan css, tentu saja penggunaannya mudah dan untuk hover keterangan gambar pun akan menyesuaikan ukuran dari gambar yang ditampilkan.
Jumat, 09 Januari 2015
kode membuat Teks area pada postingan
ingin tampilan seperti ini, silakan kembangkan dan modifikasi sendiri hehe
berikut kodenya, (gunakan entri html)pd blog entri baru..
<form name="Dalang Error"> <div align="center"> <input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Select All" /> </div> <div align="center"> <textarea name="txt" style="height: 50px; width: 300px;">isi text area</textarea></div> </form>
semoga bemanfaat...
Contoh Kode sudut lengkung border
Contoh Border 1
.border-1 {
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
border: 2px solid #A89D61;
}
Contoh Border 2
.border-2 {
-moz-border-radius-topleft: 30px;
-moz-border-radius-bottomright: 30px;
-webkit-border-top-left-radius: 30px;
-webkit-border-bottom-right-radius: 30px;
border: 2px solid #A89D61;
}
Contoh Border 3
.circle {
-moz-border-radius: 80px;
-webkit-border-radius: 80px;
border-radius: 80px;
border: 2px solid #A89D61;
background:#D2CCAD;
width: 150px;
height: 150px;
}
Gantilah bagian warna bagian border sesuai dengan keinginan, untuk mempermudah pencarian warna yang sesuai, kalian bisa pergunakan tools warna pada bagian menu diatas.
BORDER-1
.border-1 {
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
border: 2px solid #A89D61;
}
Contoh Border 2
BORDER-2
.border-2 {
-moz-border-radius-topleft: 30px;
-moz-border-radius-bottomright: 30px;
-webkit-border-top-left-radius: 30px;
-webkit-border-bottom-right-radius: 30px;
border: 2px solid #A89D61;
}
Contoh Border 3
CIRCLE
.circle {
-moz-border-radius: 80px;
-webkit-border-radius: 80px;
border-radius: 80px;
border: 2px solid #A89D61;
background:#D2CCAD;
width: 150px;
height: 150px;
}
Gantilah bagian warna bagian border sesuai dengan keinginan, untuk mempermudah pencarian warna yang sesuai, kalian bisa pergunakan tools warna pada bagian menu diatas.
Membuat garis lengkung pada sudut garis tepi atau border
Dengan hadirnya css3 untuk membuat sudut garis border lengkung atau tumpul
sudah bisa dilakukan, dengan design tampilan garis lengkung pada border
bisa menghasilkan tampilan blog yang elegant, manis dan menarik.
Penggunaan kode css garis border lengkung adalah dengan menggunakan kode border-radius, penggunaan dalam template saya ilustrasikan sebagai berikut :
Penggunaan kode css garis border lengkung adalah dengan menggunakan kode border-radius, penggunaan dalam template saya ilustrasikan sebagai berikut :
Membuat Header 3 elemen
Membagi header menjadi 3 elemen langsung saja pesiapkan kode css berikut untuk dicopy pastekan:
Kode CSS-1:
.GRnewHeader .widget h2.title, .GRnewHeader .widget h2{ font-size:14px; text-transform:uppercase; font-weight:600; margin:10px; } .GRnewHeader .widget{ padding:10px; font-size:12px; background: -moz-linear-gradient(top, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.1) 1%, rgba(153,151,151,0.1) 100%); background: -webkit-linear-gradient(top, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.1) 1%,rgba(153,151,151,0.1) 100%); background: -o-linear-gradient(top, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.1) 1%,rgba(153,151,151,0.1) 100%); background: -ms-linear-gradient(top, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.1) 1%,rgba(153,151,151,0.1) 100%); background: linear-gradient(top, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.1) 1%,rgba(153,151,151,0.1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1affffff', endColorstr='#1a999797',GradientType=0 ); margin:5px; }
Langganan:
Postingan (Atom)