Buat posting Image Cantik dg Border Radius

Gambar gambar di bawah ini hanyalah sebagian kecil dari begitu banyaknya kemungkinan lengkungan yang dapat dibuat. Silahkan anda kembangkan lagi menjadi benruk-bentuk lain yang jauh lebih menarik.

Kode CSS:

.GRphotoku{
       padding:1%;
       background:#eee;
       box-shadow:0 0 6px #444;
       margin:15px auto;
       display:block;
       text-align:center;
}

Kode CSS di atas digunakan jika semua gambar akan diposisikan ditengah-tengah. Jika menginginkan posisi gambar lebih feksibel (bisa kanan, kiri & tengah) gunakan kode CSS yang ada di gubhugreyot

<a href="Your URL"><img class="GRphotoku" height="..px" src="Your Image.jpg" style="border-bottom-left-radius: 60% 50%; border-bottom-right-radius: 60% 50%; border-top-left-radius: 30% 60%; border-top-right-radius: 30% 60%;" width="..px" /></a>

<a href="Your URL"><img class="GRphotoku" height="..px" src="Your Image.jpg" style="border-bottom-left-radius: 60% 50%; border-bottom-right-radius: 60% 50%; border-top-left-radius: 30% 60%; border-top-right-radius: 30% 60%;" width="..px" /></a>

<a href="Your URL"><img class="GRphotoku" height="..px" src="Your Image.jpg" style="border-bottom-left-radius: 30% 50%; border-bottom-right-radius: 30% 50%; border-top-left-radius: 60% 40%; border-top-right-radius: 60% 40%;" width="..px" /></a>

<a href="Your URL"><img class="GRphotoku" height="..px" src="Your Image.jpg" style="border-bottom-left-radius: 50% 50%; border-bottom-right-radius: 50% 50%; border-top-left-radius: 50% 50%; border-top-right-radius: 50% 50%;" width="..px" /></a>

<a href="Your URL"><img class="GRphotoku" height="..px" src="Your Image.jpg" style="border-bottom-left-radius: 50% 50%; border-bottom-right-radius: 50% 50%;box-shadow:0 0 8px #000;border-top-left-radius:50% 50%; border-top-right-radius: 50% 50%;border:6px solid #222;padding:4px;" width="..px" /></a>

<a href="Your URL"><img class="GRphotoku" height="..px" src="Your Image.jpg" style="border-bottom-left-radius: 205px 265px; border-bottom-right-radius: 205px 265px; border-top-left-radius: 235px 130px; border-top-right-radius: 235px 130px;" width="..px" /></a>

<a href="Your URL"><img class="GRphotoku" height="..px" src="Your Image.jpg" style="border-bottom-left-radius: 205px 140px; border-bottom-right-radius: 205px 140px; border-top-left-radius: 205px 140px; border-top-right-radius: 205px 140px; border:5px double #aaa; box-shadow: 0 0 8px #555;" width="..px" /></a>

<a href="Your URL"><img class="GRphotoku" height="..px" src="Your Image.jpg" style="border-bottom-left-radius: 60% 70%; border-bottom-right-radius: 60% 70%; border-top-left-radius: 30% 50%; border-top-right-radius: 30% 50%;" width="..px" /></a>

<a href="Your URL"><img class="GRphotoku" height="..px" src="Your Image.jpg" style="border-bottom-left-radius: 60% 70%; border-bottom-right-radius: 40% 50%;box-shadow:4px 4px 8px #000;border-top-left-radius: 60% 70%; border-top-right-radius: 40% 50%;border:6px solid #888;padding:4px;" width="..px" /></a>

<a href="Your URL"><img class="GRphotoku" height="..px" src="Your Image.jpg" style="border-bottom-left-radius: 50% 50%; border-bottom-right-radius: 50% 50%; border-top-left-radius: 40% 60%; border-top-right-radius: 40% 60%;border:5px inset #888;" width="..px" /></a>

Tutorial :

Back to tutorial

DEMO: Cursor Jam dengan Nama Blogger

Ini hanya sebuah trik untuk memanfaatkan apapun yang kita gunakan sebagai pelengkap sekaligus pemanis blog seperti halnya cursor jam. Dengan sedikit melakukan perubahan pada javascript, jadilah sebuah cursor jam yang di dalamnya terdapat nama pemilik blog. Anda bisa mencermati pada titik-titik penunjuk jam (1 s/12) yang angkanya telah berganti dengan "gubhugreyot". Nggak sulit untuk melakukan perubahan seperti ini, anda hanya perlu mencermati cara melakukan pergantian angkanya hingga menjadi sebuah teks bermakna.

Back to Tutorial :

Tutorial : Cursor Jam dengan Nama Blogger