Showing posts with label melengkung. Show all posts
Showing posts with label melengkung. Show all posts
Monday, March 6, 2017
Cara Mudah Membuat Border Gambar Melengkung
Cara Mudah Membuat Border Gambar Melengkung
eFTutor - Kumpulan Artikel Online - Cara Mudah Membuat Border Gambar Melengkung menggunakan efek Hover pada CSS3. Default gambar yang sudah melengkung pada gambar akan menjadi kotak katika mouse di dekatkan, ini bisa kita buat untuk mempercantik tampilan gambar di blog kita.
 |
| Border Radius dengan CSS 3 |
Berikut Scriptnya :
.post-body img {Demonya :
border-radius: 50% 0; /* Border Radius */
box-shadow: 0px 0px 15px #000;
padding:15px;
background:#FFF;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.post-body img:hover {
border-radius:0;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}
Selamat Mencoobanya..
Available link for download
Sunday, January 15, 2017
Cara membuat Foto dengan sudut melengkung GIMP
Cara membuat Foto dengan sudut melengkung GIMP
Pada pos sebelumnya saya sudah membahas membuat sudut melengkung dengan CSS, kali ini saya akan membahas pembuatan sudut melengkung foto menggunakan GIMP.
Untuk membuat sudut melengkung menggunakan GIMP ikuti langkah-langkah berikut :
Untuk membuat sudut melengkung menggunakan GIMP ikuti langkah-langkah berikut :
1. Buka aplikasi GIMP dan buka gambar yang akan diedit.
2. Klik Select pada Menubar pilih Rounded Rectangle.
3. Atur nilai radius semakin besar semakin bulat.
4. Kita salin gambar yang terbentuk melengkung. Klik kanan edit > Copy ( Ctrl+C )
5. Selanjutnya membuang sudut yang tidak terpakai. Klik kanan > select > invert ( Ctrl+I ) kemudian hapus klik kanan>edit>cut ( Ctrl+x).
6. Bila hasil sudut yang terbuang tidak transparan alias putih, maka kita mulai lagi dari langkah 4 ( copy ) pindahkan ke layer baru klik File pada menubar > Create > From Clipboard ( Ctrl+Shift+V).
7. Sekarang gambar sudah mempunyai sudut melengkung.
8. Selesai mengedit jangan lupa untuk mengekspor lagi ke ekstensi jpg atau png. klik File pada menubar > Export ( Ctrl+Shift+E).
Semoga tips sederhana ini bermanfaat bagi kita semua.
2. Klik Select pada Menubar pilih Rounded Rectangle.
3. Atur nilai radius semakin besar semakin bulat.
4. Kita salin gambar yang terbentuk melengkung. Klik kanan edit > Copy ( Ctrl+C )
5. Selanjutnya membuang sudut yang tidak terpakai. Klik kanan > select > invert ( Ctrl+I ) kemudian hapus klik kanan>edit>cut ( Ctrl+x).
6. Bila hasil sudut yang terbuang tidak transparan alias putih, maka kita mulai lagi dari langkah 4 ( copy ) pindahkan ke layer baru klik File pada menubar > Create > From Clipboard ( Ctrl+Shift+V).
7. Sekarang gambar sudah mempunyai sudut melengkung.
8. Selesai mengedit jangan lupa untuk mengekspor lagi ke ekstensi jpg atau png. klik File pada menubar > Export ( Ctrl+Shift+E).
sebelum
Sesudah
Semoga tips sederhana ini bermanfaat bagi kita semua.
Available link for download
Thursday, December 1, 2016
Cara membuat sudut melengkung dengan CSS3
Cara membuat sudut melengkung dengan CSS3
Membuat sudut melengkung (rounded corner ) menggunakan CSS itu mudah.
blok ini seharusnya mempunyai sudut melengkung
Kode untuk membuat sudut melengkung dengan CSS adalah border-radius. Sisipkan sintak border-radius pada class CSS yang dimaksud. Contoh :.contoh {
display:block;
border-radius:20px;
background:#aaaaaa;
color:#ffffff;
padding:10px;
Berhubung masing-masing peramban web menerapkan baku yang berbeda maka kita harus menambahkan kode awalan agar didukung oleh masing-masing peramban.
-moz- untuk peramban Mozilla Firefox
-o- untuk peramban opera
-webkit- untuk peramban Chrome dan Safari
.contoh {
display:block;
border-radius:20px;
-moz-border-radius:20px;
-o-border-radius:20px;
-webkit-border-radius:20px
background:#aaaaaa;
color:#ffffff;
padding:10px;
Untuk membuat sudut asimetris anda bisa menggunakan sintaks berikut
/* mozilla */
-moz-border-radius-topleft:15px; /* sudut kiri atas */
-moz-border-radius-topright:50px; /* sudut kanan atas */
-moz-border-radius-bottomleft:15px; /* sudut kiri bawah */
-moz-border-radius-bottomright:50px; /* sudut kanan bawah */
-moz-border-radius:10px 15px 15px 10px; /* ringkas ataskiri ataskanan bawahkanan bawahkiri */
/* chrome , safari */
-webkit-border-top-left-radius:15px; /* sudut kiri atas */
-webkit-border-top-right-radius:50px; /* sudut kanan atas */
-webkit-border-bottom-left-radius:15px; /* sudut kiri bawah */
-webkit-border-bottom-right-radius:50px; /* sudut kanan bawah */
mumulala Selain untuk membuat sudut melengkung pada block juga bisa diterapkan untuk membuat sudut melengkung pada gambar.
Available link for download
Subscribe to:
Posts (Atom)