Membuat Border Dengan Ribbon

Membuat Border Dengan Ribbon - Dalam pencarian SE Google banyak sekali teknik pembuatan border baik itu untuk gambar, text ataupun yang lainnya, pada kesempatan ini J-PB akan berbagi sebuah teknik penggabungan Border dengan Ribbon, adapun ahsil akhir dari tek nik ini dapat sobat lihat dalam gambar dibawah ataupun dalam kolom demo.

Membuat Border Dengan Ribbon, border, ribbon, border ribbon
LIHAT DEMONYA INTRUKSI PEMASANGAN KODE

<div class="jpb-ribbon">
  <h1 class="ribbonnya">Judul Headernya</h1>
  <p>Isi kontennya disini.... </p>
<p>Isi kontennya disini.... </p>
</div>
@import url(http://fonts.googleapis.com/css?family=Open+Sans);

.jpb-ribbon {
  width: 400px;
  margin: 2em auto;
  background: white;
  border-color: #2980b9;
  border-width: 0 10px 10px 10px;
  border-style: solid;
  padding: 0 0 0em 0;
}
.jpb-ribbon p {
  padding: 0 30px;
}
.ribbonnya {
  background-color: #1ab315;
  color: white;
  position: relative;
  z-index: 1;
  padding: 0.5em 1em 0;
  margin: 0 0 1.5em;
  text-align: center;
}
.ribbonnya:before,
.ribbonnya:after {
  position: absolute;
  content: '';
  z-index: -1;
}
.ribbonnya:before {
  background: linear-gradient(to bottom, #34495e, #3498db);
  left: -10px;
  height: 100%;
  width: 105%;
  top: 0;
}
.ribbonnya:after {
  top: 100%;
  left: -10px;
  width: 0;
  height: 0;
  border-width: 40px 210px 40px 210px;
  border-style: solid;
  border-color: #3498db transparent transparent transparent;
}

Demikian artikel tentang   "Membuat Border Dengan Ribbon"   ini J-PB sajikan semoga artikel sederhana ini dapat bermanfaat bagi sobat blogger khususnya.....!!!

Berlangganan update artikel terbaru via email:

54 Responses to "Membuat Border Dengan Ribbon"

  1. Keren nih sob, kapan kapan boleh dicoba. sekalian asah kreatifitas :)

    ReplyDelete
    Replies
    1. silakan gan, thank kunjungannya

      Delete
    2. Kira kira menambah beban Loadingnya BLOG kita nda ya. Soalnya script sudah bertumpuk tumpuk di blog saya hiehiehiehiee. Mohon pencerhannya

      Delete
    3. saya rasa utuk koding ini gak terlalu masalaha dengan loading mas, kareana ini cuman CSS sama HTML aja

      Delete
  2. Tutorial yang sangat mantap dan berguana sekali sobat, ternyata kalau dilihat demonya memang keren sob. dan bisa jelas Kode Html dan CSSnya.
    terima kasih banyak ilmunya sobat
    salam sukses selalu

    ReplyDelete
  3. ganti domain ya :) ... lama gak utak-atik nih.. nanti saya coba :) .

    ReplyDelete
  4. hasilnya keren banget sob, okelah bisa tak simpen dulu nin scriptnya...trims

    ReplyDelete
  5. Nambah ilmu lagi nih dari mas Alex :)
    Hasilnya yahud banget....nunggu waktu luang...mas..nanti pasti ta coba :)

    ReplyDelete
    Replies
    1. Bisa aja ni mas budi, makasih kunjungannya mas

      Delete
  6. Mantap juga kalau dicoba ini sob.
    terima kasih sudah mau berbagi.

    ReplyDelete
  7. cuma orang" kece yang ngerti script kaya gini, ehhehe .
    aku mah dari pertama kali gabung ke dunia blog sampe skrng masih lier kalo liat kode begini . hahaa #curcol

    ReplyDelete
    Replies
    1. wkwkkwkkwk.........
      sama miss ane juga lieur wkwkkwkkwkw

      Delete
  8. Wah ini sih dah pembahasan tingkat tinggi bang alex ikutan nyimak aja deh, mudah-mudahan bisa mempraktekannya nie, terimakasih udah berbagi tutorialnya :)

    ReplyDelete
    Replies
    1. waduh bisa aja ni mas marner, masih sob kunjungannya

      Delete
  9. keren sob!, kebayang sy klo andaikan itu latar judul post sy.., *smile

    ReplyDelete
    Replies
    1. Bisa aja ni mas rohis, makasih kunjungannya mas

      Delete
  10. yang disebut ribbonnya yang mana kang? saya ko gk mudeng yah wkwk :D

    ReplyDelete
    Replies
    1. itu ribbonnya yang segitiga kebawah, hehhehhe
      gimana mas....

      Delete
  11. Wey mantap kang lah .. sip keren euy

    ReplyDelete
  12. izin liat demonya dulu sob. thx.^^

    ReplyDelete
  13. Bisa jadi memperindah sekitar tulisan ya mas kan biasanya ada bordernya.

    ReplyDelete
  14. ribon itu maksudnya apa sob?
    bukan uang ribuan kan.....:D

    ReplyDelete
    Replies
    1. ya bukanlah hehheh, kalaua ribuan buat saya aja mas, hehhee
      secara khusus ribbon berarti pita Menurut Goet Poespo, ribbons (pita-pita), sepotong bahan dengan lebar bervariasi, dengan tepian kain (selvage) di kedua sisinya, namun dalam kasus ini ribbonnya kurang nampak karena sudah full rombak, wkkwkkwkkw

      Delete
  15. asoy nih mas, sepertinya asik juga kalo buat sidebar.. hehe

    ReplyDelete
  16. saya malah gak pernah pakai border ribbon, ini juga baru tahu hehehe.. malum deh masih newbie sih hehehe... :)

    ReplyDelete
  17. bagus sekali mas joens , apa itu semua border akan seperti itu setelah terposting artikelnya, atau tertentu doang?

    ReplyDelete
    Replies
    1. engga mas, sebagai contoh kita ingin menulis sesuatu dalam kotak yang berbeda nah ini mungkin dapat menjadi salah satu pilihan, kurang lebih gitu mas

      Delete
  18. nng'liat hasilnya trik border make ribbon ini keren dan terlihat profesional banget ya...suatu saat boleh juga dipake gaya ini nih.

    #salam cinta kasih, sehat dan ceria selalu yey

    ReplyDelete
  19. keren mas, pake pseudo element :-d

    ReplyDelete
  20. keren mas , ,izin coba ya , , ,
    salam kenal

    ReplyDelete
  21. gambar jika ada ribbonnya akan terasa lebih cantik dan tampil beda. terimakasih.

    ReplyDelete
  22. Waduh bgini rupanya ya mas,, bnyk jga kodenya... hampir pusing saya haha :D

    ReplyDelete
  23. Mantap juga nih kalau sayah coba, apalagi setelah melihat demonya ... keren pisan kang.

    ReplyDelete
  24. bagus nih share nya,, saya simpan scrif nya

    ReplyDelete
  25. blogwalking... mana updatenya :) .
    saya belum pakai kode diatas.

    ReplyDelete

Terimakasih banyak atas kunjungannya, salam silatuhami Alexjoen

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel