3 Colection Ribbon Style Boxes Info - Banyak cara untuk membuat dan menampilkan text info dengan berbagai style, salah satunya adalah dengan memberikan hiasan border pada sisi text sehingga berbentuk box. Seperti Membuat Panel Slide Untuk Menyimpan Text merupakan salah satu tampilan SPOILER BOX yang sudah saya modifikasi dengan efek ribbon pita.

Efek kali ini saya akan memberikan 3 Colection Ribbon Style Boxes Info yang bisa Anda gunakan untuk memberikan hiasan gaya cantik dan keren untuk tampilan info teks Anda, tampilan gambarnya seperti ini:

Box ribbon style




BACA JUGA
Penyebab Menurunnya Kualitas SEO Pada Blog

Elemen CSS dibawah ini saya jabarkan dalam 1 wilayah deklarasi, Anda tinggal pilih salah satu diantara ke-3 Colection Ribbon Style Boxes Info untuk menghias teks Anda, masing-masing box sudah saya tandai dengan teks berwarna MERAH seperti ini:



<style type="text/css">
.boxes1-info,.boxes3-info {padding:63px 5px;text-align:left;color:#999}
.boxes {
  background: #fff;box-shadow: 0 0 3px rgba(0,0,0,0.25);
  float: left;height: 220px;margin: -20px 42px 0 0;
  position: relative;text-align: center;width: 210px}

.boxes p {
  background: #08b;
  background-image: radial-gradient(transparent 30%, rgba(0, 0, 0, 0.2));
  background-image: -webkit-radial-gradient(transparent 30%, rgba(0, 0, 0, 0.2));
  background-image: -moz-radial-gradient(transparent 30%, rgba(0, 0, 0, 0.2));
  background-image: -ms-radial-gradient(transparent 30%, rgba(0, 0, 0, 0.2));
  background-image: -o-radial-gradient(transparent 30%, rgba(0, 0, 0, 0.2));
  color: #fff;font-size: 18px;font-weight: bold;
  position: relative;text-shadow: -1px -1px 1px rgba(0,0,0,0.2)}

/* Ribbon Style 1 (Folded) */
.ribbon1:before, .ribbon1:after {
  bottom: 30px;box-shadow: 0 30px 10px rgba(0,0,0,0.8);
  content: "";height: 50px;position: absolute;width: 47.5%;z-index: -1}

.ribbon1:before {left: 3%;transform: rotate(-5deg)}
.ribbon1:after {right: 3%;transform: rotate(5deg)}
.ribbon1 p {
  border-width: 1px 1px 2px;box-shadow: 0 2px 6px rgba(0,0,0,0.5);
  padding: 4px 40px;position: absolute;right: -14px;top: 12px}

.ribbon1 p:after {
  border-width: 7px;border-style: solid;
  border-color: #134 transparent transparent #134;bottom: -15px;
  content: "";position: absolute;right: -1px}

/* Ribbon Style 2 (Cutter) */
.ribbon2 {z-index: -1}
.boxes2-info {padding:5px 5px;text-align:left;color:#999}
.ribbon2 p {
  border-color: rgba(0,0,0,0.1);box-shadow: 0 0 4px rgba(0,0,0,0.3);
  display: inline-block;margin: 12px auto;padding: 4px 30px;width:150px}

.ribbon2 p:before, .ribbon2 p:after {
  bottom: 24px;box-shadow: 0 28px 8px rgba(0,0,0,0.3);content: "";
  height: 25px;position: absolute;width: 47%;z-index: -1}

.ribbon2 p:before {left: 1%;transform: rotate(-6deg)}
.ribbon2 p:after {right: 1%;transform: rotate(6deg)}

/* Ribbon Style 3 (Corner) */
.ribbon3 {overflow: hidden}
.ribbon3 p {
  background-image: linear-gradient(0deg, transparent 50%, rgba(0, 0, 0, 0.3));
  background-image: -webkit-linear-gradient(0deg, transparent 50%, rgba(0, 0, 0, 0.3));
  background-image: -moz-linear-gradient(0deg, transparent 50%, rgba(0, 0, 0, 0.3));
  background-image: -ms-linear-gradient(0deg, transparent 50%, rgba(0, 0, 0, 0.3));
  background-image: -o-linear-gradient(0deg, transparent 50%, rgba(0, 0, 0, 0.3));
  border-width:1px 0;border-color:rgba(0,0,0,0.3);box-shadow:0 2px 6px rgba(0,0,0,0.5);
  padding: 4px 28px;position: absolute;width:180px;left:-13px}

.ribbon3 p:after {
  border-width: 7px;border-style: solid;
  border-color: #134 transparent transparent #134;bottom: -15px;
  content: "";position: absolute;right: -1px}

.ribbon3 p:before {
  border-width: 7px;border-style: solid;
  border-color: #134 #134 transparent transparent;bottom: -15px;
  content: "";position: absolute;left: -1px}
</style>

Hasilnya:




DEMO SHOW




Tahap selanjutnya tinggal menempatkan kode HTML berikut pada postingan Anda mode tulis HTML (bukan yang Compose), lengkapnya seperti ini:


<div class="boxes ribbon1"> <!..Ribbon Style 1 (Folded)..>
   <p>Info</p>
      <div class="boxes1-info">
          ...Insert Your Info In Here...
      </div>
</div>

<div class="boxes ribbon2"> <!..Ribbon Style 2 (Cutter)..>
   <p>Info</p>
      <div class="boxes2-info">
          ...Insert Your Info In Here...
      </div>
</div>

<div class="boxes">
  <div class="ribbon3"> <!..Ribbon Style 3 (Corner)..>
    <p>Info</p>
       <div class="boxes3-info">
          ...Insert Your Info In Here...
       </div>
  </div>
</div>

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= 3 Colection Ribbon Style Boxes Info
Ditulis oleh= Devy Indriyani
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

46 komentar

  1. kode css nya di letakkan dimana yah ? hehehe

    BalasHapus
    Balasan
    1. dimana saja boleh mas, asala jangan disimpan dihati mas Fiu, hehe..!!

      kalau untuk halaman posting, sertakan saja saat membuat artikel baru, sama seperti peletakan kode HTML.

      Hapus
    2. hehehe, klo yg disimpan di hti sy sih mending devy aja deh ,.. :)

      nah itu dia yg dulu pernah sy bilng ke devy smua tutorial deby yg kek bgini kebanyak gak muncul walo html sdh di letakkan di kode html ...

      Hapus
    3. untuk mengundang mas Fiu bertanya, jadi tidak semua artikel efek yang devy publikasikan secara komplit, soalnya kalau tinggal pakai tanpa ada edit sesuatu, kan kesannya cuma mencontek saja apa yang sudah saya berikan, kalau begini kan kita bisa sama-sama belajar cara meletakkannya, jadi sedikit banyaknya sahabat lain bisa tahu mengotak-atik tampilan widget.

      begitu loh mas.?

      Hapus
    4. iya itu sudah pernah devy smpaikn ke sy ..

      tpi tutorial yg membuat sitemap dengan cara meletakkan html saja itu bisa muncul, yg model ribbon ,,, dg yg sblmnya devy post itu tidak muncul di postingan ... hehee

      Hapus
    5. oh karena itu toh masalahnya, coba mas perhatikan lagi kode CSSnya, disana memang tidak Devy tampilkan kode untuk membuat tampilan ribbon, kalau untuk tampilan di DEMO SHOW memang devy tampilkan.

      kalau mas Fiu mau membuat ribbon yang sama, tinggal tambahkan kode CSS-ribbon seperti ini:

      .ribbon-top {
      font:bold 16px Cambria,Georgia,Times,Serif;
      color:#fff;
      width:auto;
      padding:0px 20px;
      background: linear-gradient(left, #39f 0%,#3B5998 50%,#39f 100%);
      background:-webkit-linear-gradient(left, #39f 0%,#3B5998 50%,#39f 100%);
      background:-moz-linear-gradient(left, #39f 0%,#3B5998 50%,#39f 100%);
      background:-o-linear-gradient(left, #39f 0%,#3B5998 50%,#39f 100%);
      position:relative;
      line-height:48px;
      margin:0 auto;
      text-align:center;}

      .ribbon-top:before {
      content:"";
      position:absolute;
      top:100%;
      left:0px;
      width:0px;
      height:0px;
      border-width:6px;
      border-style:solid;
      border-color:#39f #39f transparent transparent;}

      .ribbon-top:after {
      content:"";
      position:absolute;
      top:100%;
      right:0px;
      width:0px;
      height:0px;
      border-width:6px;
      border-style:solid;
      border-color:#39f transparent transparent #39f;}


      Selanjutnya diatas Script letakkan kode HTML seperti ini:

      <div class="ribbon-top">
      DAFTAR ISI FACEBOOK</div>

      Hapus
    6. Css itu berlaku utk smua model ribbon gak? Jdi nntinya tinggal menambahkan html sja diatasnya ...heheh

      Hapus
    7. model ribbon kan banyak mas, jadi elemen CSSnya juga berbeda, CSS diatas untuk membentuk model ribbon corner, atau lipatan melengkung 3D pada sisi kanan dan kiri,

      ada lagi ribbon pita, ribbon arrow dan masih banyak lagi model dan jenisnya, dan CSS nya juga berbeda.

      Hapus
    8. Gak begitu mudeng sama CSS mas brow

      Hapus
    9. hehe, tuing-tuing .... html diatas dh sy praktekin ... tpi gk muncul jg nih ... ;(

      Hapus
  2. Nice share... just nyimak kalo masalah beginian haha

    Salam blogging dari Pulau Dollar

    BalasHapus
    Balasan
    1. minta saran attuh mas, masalah apa yang bisa membuat mas Abu tidak akan menyimak, ya kali aja bisa saya buat, hehe..!!

      Hapus
    2. maslah nyimak devy itu loh yg bkin keingetan trs ... itu giman yah klo kek gtu ,,,,hehehe

      Hapus
  3. kode Ribbon Style Boxes Info yang pertama yang menarik hati saya yang sedang galau ini teh, sepertinya unik dan tidak umum dipakai sebagai boxes info,kliatan lebih bergaya menurut saya mah, nanti ah kalau perlu menyertakan info penting layak untuk tak pasangin di depan rumah saya yang baru nih.
    makasih ilmunya yang selalu makjleb nya yah

    BalasHapus
    Balasan
    1. bikin neon box aja kang, tapi minta bikinin yang pake ribbon style...pasti muantab tuh...terus tulisannya...terima bongkar pasang susuk ala ribbon style...buka 24jam. gimana, mantab gak saran saya? heeee

      Hapus
    2. ditambah lagi dengan bikin senter, kali aja pemadaman listrik, jadi senter bisa berguna, hehe.!!

      Hapus
  4. jangan dipasang didepan rumah kang, apalagi sampai dipajang, akhir-akhir ini sangat sering terjadi kejahatan pencurian, kemarin celana jeans mamang saya hilang tuh dari jemuran, bukan menuduh ada yang curi sih, tetapi kalau sudah hilang ya berarti dicuri, takutnya ribbon itu juga nanti dicuri sama mas FIU, hehe,,,!!

    kang lembu bisa kehilangan ntar.!

    BalasHapus
    Balasan
    1. hehehe, tenang mg lembu tidak akan sy curi kok, sy sih mnding lngsung minta ama devy aja ,,,hehehe

      Hapus
    2. kalau mau pasang ribbon style pake kunci gembok kang lembu...pasang empat penjuru sambil membaca bismillah 21x lalu alfatihah 7 kali. insya Allah selamat...hedeh udah kayak paranormal gak ane komen masalah robbon stylenya?

      Hapus
    3. setelah kelar, sebut BENTO..BENTO..BENTO, kayak Bp. Iwan Fals, hehe..!!, kalau mbah dinan kayak paranormal, devy kayak pengamat artis, hehe..!!

      Hapus
  5. keren juga ya mbak, bisa menambah tampilan style text diblog kita hehee, ini nantinya akan berpengruh terhadap loading blog gax ya ?

    BalasHapus
  6. berapa kali saya belajar bikin robbon selalu aja gagal dev...
    yang saya masih bingung itu apakah pembentuk bilah sisinya hanya menggunakan
    transform: rotate
    atau bagaimana dev...maksudnya pembentuk sudut ribbonnya. ,pencerahan ya sista. terima kasih.

    BalasHapus
    Balasan
    1. Rotate - biasanya untuk membentuk sebuah objek dengan efek miring, sedangkan kalau untuk bentuk tampilan efek ribbon sebenarnya lebih kepada CSS ::before dan ::after

      karena yang akan kita bentuk hanya 2 bilah sisi, right dan left atau sisi top dan bottom, jika elemennya kita hubungkan dalam satu perintah, efek ribbon tidak bisa terbentuk, jadi dibuat pembentukan 1 sisi, misal seperti ini:

      //untuk membentuk bilah sisi left only
      .ribbon::before {
      left:-1px;
      ...
      }

      // Untuk bilah sisi kanan
      .ribbon::after {
      right:1px;
      ...
      }


      Sedangkan untuk membuat shadow miring, kita tambahkan elemen CSS rotate pada masing-masing sisi, seperti ini:

      //untuk membentuk bilah sisi left only
      .ribbon::before {
      left:-1px;
      ...
      transform:rotate(-3deg);
      }

      // Untuk bilah sisi kanan
      .ribbon::after {
      right:1px;
      ...
      transform:rotate(3deg);
      }

      Hapus
  7. keren tutorialnya. penampakan ribbon style boxes ini sering saya jumpai di beberapa weblog tetangga. nice artikel sobat salam "BPI"

    BalasHapus
  8. keren dan menarik mbak, ada 3 pilihan

    BalasHapus
    Balasan
    1. tetapi gak bingung kan mbak mau pilih yang mana, soalnya takutnya pusing lagi kalau terlalu banyak pilihan, soalnya kemarin saja waktu pemilihan presiden hanya 2 pilihan sulit dan bingung mau coblos yang mana, hehe..!!

      silahkan dipilih..dipilih..!!

      Hapus
    2. Klo sy sih gk bingung kn dh milih devy, jadi gk bingung lg ....xixixixixixix ... ;p

      Hapus
  9. Uh mantap sekali tutorialnya mba. Salut deh saya jadinya ... :)

    BalasHapus
  10. Tampilannya cantik-cantik semua ya.

    BalasHapus
  11. bagus mbak, tertarik untuk memasang tapi mau dipasang dimana ya...?

    BalasHapus
    Balasan
    1. banyak kok mbak ruang dan tempatnya, atau abaikan saja boxes infonya, kita ambil efek ribbonnya saja untuk membuat halaman sidebar yang judul widgetnya kita beri hiasan ribbon seperti diatas,

      jadi bukan terfokus hanya kearah sana,

      Hapus
  12. tq perkongsiannya...soal teknik IT ni perlu difahami betul2...

    BalasHapus
  13. Di dalam box nya bisa di isi dengan image?
    Dan kalau bisa, dimensi ukuran image yang pas untuk mengisi box tersebut berapa px yah sis?

    BalasHapus
    Balasan
    1. Ganti background boxes dengan URL-Gambar menjadi seperti ini:

      .boxes {
      box-shadow: 0 0 3px rgba(0,0,0,0.25);
      height: 200px; /*batas tinggi gambar*/
      position: relative;
      width: 210px; /*batas lebar gambar*/
      background:url(http://URL-Gambar Anda.png) no-repeat center center;
      }


      untuk dimensi gambar, gunakan default format saja s1600 tetapi jangan lupa untuk mengatur nilai tinggi dan lebar gambar agar dapat mengikuti posisi box.
      Hasilnya Akan Terlihat Seperti Ini:

      DEMO SHOW

      Hapus
    2. Oh gt, oke makasih :D
      Berarti imagenya bentuk persegi saja yah. Agar pas masuk ke dalam box

      Hapus
    3. jika ingin membuat atau mengubah gambar menjadi circle (lingkaran), tambahkan CSS-border-radius pada selektor gambar.

      Hapus
  14. mungkin ini bisa saya bahas sebagai pelajaran di blog baru saya ya mbak, :D mumpung ada kesempatan untuk belajar ni :D

    BalasHapus
  15. Pembahasannya menarik ni Mbah Devi, sebelumnya perkenankan saya mempelajari dulu, apakah script ini cocok atau tidak untuk template blog saya....soalnya jika di tambahin lagi kan perlu penyesuaian space...

    sepertinya si sederhana saja tapi menguraikan kode cssnya ini yang sulit buat saya.

    Trims atas info yang bermanfaat ini

    BalasHapus
  16. harus les privat nich kalau masalah CSS :(

    BalasHapus
    Balasan
    1. tetapi bukan dengan saya ya lesnya, soalnya saya juga masih berstatus murid, belum sanggup dan mampu menjadi seorang pengajar,hehe..!!

      Hapus
  17. Wah, lucu juga jadinya. Kapan-kapan boleh dicoba :)

    BalasHapus
  18. itu gunanya untuk dipasang dimana yaa?

    BalasHapus
  19. makasih mas, panduanya langsung saya coba nih

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK