Membuat efek bayangan cermin pada gambar atau text dlm blog

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.

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.

kode membuat Teks area pada postingan

 

isi text areaingin tampilan seperti ini, silakan kembangkan dan modifikasi sendiri hehe

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

.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 :

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;
}