Home > Inspirasi, Panduan > Sudut Tumpul

Sudut Tumpul

Sahabat pasti masih ingat istilah Sudut Tumpul dalam pelajaran Matematika di SMP, yaitu sebuah sudut yang besarnya antara 900 dan 1800. Tapi kali ini saya tidak akan membahas hal itu melainkan bagaimana cara membuat bingkai yang sudutnya tumpul.

Suatu ketika kita mungkin merasa perlu untuk membuat teks berbingkai untuk melengkapi postingan atau juga diletakkan di sidebar. Kode dasar untuk membuat bingkai adalah

<div style="text-align:center;padding-top:10px;padding-bottom:10px;background:#FFFFCC;border:2px solid #FF0000">teks</div>

Hasilnya seperti ini

teks

Tampak bahwa keempat sudutnya runcing. Bandingkan dengan bingkai berikut ini.

teks

Sudut seperti inilah yang saya maksud sebagai Sudut Tumpul. Kode untuk membuatnya sbb :

<div style="text-align:center;padding-top:10px;padding-bottom:10px;background:#FFFFCC;border:1px solid #FF0000; border-top-left-radius:12px; -moz-border-radius-topleft:12px; -webkit-border-top-left-radius:12px;border-bottom-right-radius:12px; -moz-border-radius-bottomright:12px; -webkit-border-bottom-right-radius:12px; border-top-right-radius:12px; -moz-border-radius-topright:12px; -webkit-border-top-right-radius:12px;border-bottom-left-radius:12px; -moz-border-radius-bottomleft:12px; -webkit-border-bottom-left-radius:12px">teks</div>

Jika yang akan dibuat tumpul hanya sebagian, maka kodenya bisa dikurangi. Misalnya hanya kiri atas dan kanan bawah yang dibuat tumpul, maka kode yang memuat top-right (kanan atas) dan bottom-left (kiri bawah) dihilangkan sehingga menjadi

<div style="text-align:center;padding-top:10px;padding-bottom:10px;background:#FFFFCC;border:2px solid #FF0000; border-top-left-radius:12px; -moz-border-radius-topleft:12px; -webkit-border-top-left-radius:12px;border-bottom-right-radius:12px; -moz-border-radius-bottomright:12px; -webkit-border-bottom-right-radius:12px">teks</div>

Hasilnya akan seperti ini

teks

Beberapa hal yang harus disesuaikan antara lain

  • Tebal bingkai atau border. Pada contoh ini tebalnya 2px
  • Warna bingkai. Pada contoh ini kode warnanya #FF0000
  • Warna latar belakang atau background. Pada contoh ini kode warnanya #FFFFCC
  • Kelengkungan sudut atau radius. Pada contoh ini kelengkungannya 12px
  • Jarak teks dengan bingkai atau padding. Pada contoh ini jarak atas dan bawahnya 10px
  • Perataan teks. Pada contoh ini dipilih center. Jika mau rata kiri kanan maka diganti justify

Selamat mencoba membuat Sudut Tumpul, semoga bermanfaat

~ Grazie ~
Categories: Inspirasi, Panduan
  1. April 8th, 2013 at 07:27 | #1

    karena buka di hape saya ga bisa lihat hasilnya Pak. Tapi njenengan memang kreatif.. 🙂


    Belum terlalu kreatif Mas.
    Cuma pantang mundur saja

    [Reply]

  2. April 8th, 2013 at 07:44 | #2

    keren pak…jadi kalo nyari kode-kode yang beginian di blog ini pake label “Panduan” ya pak?


    Iya. Supaya gampang saya masukkan kategori panduan

    [Reply]

  3. April 8th, 2013 at 10:36 | #3

    Maturnuwun pak….ada ilmu baru, tak bookmarks nggih pak? Sapa tau suatu saat pengin mencoba hehehe


    Selamat mencoba Mas

    [Reply]

  4. April 8th, 2013 at 11:23 | #4

    ternyata bikin artikel menarik di blog itu ga gampang. . .
    semoga apa yang saya dapat di blog ini bisa saya jadikan referensi buat blog saya.
    makasih gan.


    Sama2 Bro

    [Reply]

  5. April 8th, 2013 at 11:37 | #5

    Asyik, makasi Pak
    Pengen les lagi sama Pak Mars, cuma waktunya yang susah 🙂


    Kalau saya pas ke LPMP nanti kita ketemuan Mbak 😀

    [Reply]

    Esti Sulistyawan Reply:

    Langsung sms aja ya Pak 🙂

    Nggih Mbak

    [Reply]

  6. April 8th, 2013 at 11:39 | #6

    sudut tumpul ternyata HTMLnya lebih “cerewet” ya pak Mar

    Salam saya Pak Mars


    Iya Om. Kodenya ribet sekali dan berbelit2.
    Salam kembali…

    [Reply]

  7. April 8th, 2013 at 11:56 | #7

    kalau terlalu tajam berbahaya ya pak jadi dibuat tumpul 🙂


    Kalau tajam berbahaya untuk anak2 Mbak 😀

    [Reply]

  8. April 8th, 2013 at 12:42 | #8

    Kereeeen, suatu saat nanti akan kucoba. Makasiy, Om 😀


    Harus dicoba, jangan hanya janji 😀

    [Reply]

  9. April 8th, 2013 at 12:57 | #9

    Udah berbagi tutorial ya Pak,,bagus ini lihatnya untuk sekedar penghias blog 🙂


    Sekedar untuk variasai saja Mas

    [Reply]

  10. April 8th, 2013 at 13:50 | #10

    mulai belajar html lagi nehh….


    Iya Mas…
    Belajar tak pernah henti

    [Reply]

  11. April 8th, 2013 at 17:06 | #11

    owalah, moz sama webkit to kodenya. Sip sip. Kapan2 djajal.


    Ayo dijajal-jajal

    [Reply]

  12. Mas Andank
    April 9th, 2013 at 01:51 | #12

    nah kode koyo ngene, pernah liat aku di theme nya mas Satrya, tapi yo tetep orang mudeng pak, tak copy wae lah kode ne.


    Selamat membuat sudut tumpul Mas

    [Reply]

  13. April 9th, 2013 at 12:34 | #13

    mantap…tinggal di copy deh rumusnya…

    Selamat mencoba Mas

    [Reply]

  14. April 10th, 2013 at 15:44 | #14

    makasih Pakdhe atas tipsnya… kalau mau buat sesuatu menjadi tumpul dan lancip memang Pakdhe Mars jagonya

    Hahahaha
    Belum jago. Masih amatiran

    [Reply]

  15. April 11th, 2013 at 19:48 | #15

    Karena ‘tumpul’, saya sulit menyimpul pelajaran sudut tumpul ini, sementara dikumpul di folder dulu. Terima kasih Pak Mars selalu berbagi ilmu, salam.

    Biar tumpul asal ngumpul…

    [Reply]

  16. April 14th, 2013 at 09:38 | #16

    Nah asyik, dapat ilmu baru lagi
    ijin copy mas
    matur nuwun
    Salam hangat dari Surabaya

    Semoga bermanfaat

    [Reply]

  17. April 14th, 2013 at 14:38 | #17

    Bisa jadi kotak menjawab komen kayak Ngai itu ya Pak ?
    Trims 🙂

    Iya Mas…
    Ngai belajar dari sini 😀

    [Reply]

  18. khay
    April 17th, 2013 at 00:10 | #18

    kiran tadi Ruhut Sitompul, mister..
    btw, sangat inspiratif… sangat bermanfaat bagi calon webmaster

    Bagus buat SEO…

    [Reply]

  1. No trackbacks yet.

silakan buka katalog untuk melihat postingan lainnya
~ terima kasih ~