6.2.15
25
Amplop Surat Design Model Untuk Teks - Ingin menyampaikan suatu kata-kata kepada sahabat Anda, tetapi malu jika harus mengucapkannya secara langung, Anda bisa menyampaikan rangkaian kata-kata Anda dalam selembar kertas surat dalam amplop. Setidaknya orang yang menerima amplop dari Anda bisa membaca isi surat Anda, dan Anda pun mendapatkan maaf darinya dengan tampilan Amplop Surat Design Model Untuk Teks seperti ini:




DEMO SHOW




Tampilan design sama seperti Anda membuat content box atau teks box untuk menyampaikan beberapa tulisan/teks singkat dalam posting artikel. Koleksinya lihat pada TAB dibawah ini:




Untuk membuat content box design Amplop surat seperti ini, pada tampilan saya hanya menggunakan bakcground:linear-gradient, namun kita gunakan format repeating untuk memberikan warna hanya pada sisi objek saja (max-height="20px") dengan efek kemiringan 45deg, elemen CSS-nya seperti ini:


.bgColor {
background: repeating-linear-gradient (
  45deg, #114abc, #114abc 10px, #fff 10px,
  #fff 20px, #bf2010 20px, #bf2010 30px,
  #fff 30px, #fff 40px);
}


Amplop Surat




Background Info
Mengenal Lebih Jauh Tentang CSS3 Linear Gradient


PENERAPAN KE BLOG
1.1 Elemen CSS



<style type='text/css'>
/* Licensi Codes by. http://pastebin.com
don't copy this code unlicensed source links to share, your blog will be deleted
visit link: http://sahabatblogger77.blogspot.com */
@import url(http://fonts.googleapis.com/css?family=IM+Fell+English);
.amplop {
  width: 400px;margin: 0px auto;padding: 10px 20px;
  background: #fff;position: relative;border-radius: 3px}

.amplop:after {
  content: '';
  background:-webkit-repeating-linear-gradient(45deg, #114abc, #114abc 10px, #fff 10px, #fff 20px, #bf2010 20px, #bf2010 30px, #fff 30px, #fff 40px);
  background:-moz-repeating-linear-gradient(45deg, #114abc, #114abc 10px, #fff 10px, #fff 20px, #bf2010 20px, #bf2010 30px, #fff 30px, #fff 40px);
  background:-ms-repeating-linear-gradient(45deg, #114abc, #114abc 10px, #fff 10px, #fff 20px, #bf2010 20px, #bf2010 30px, #fff 30px, #fff 40px);
  background:-o-repeating-linear-gradient(45deg, #114abc, #114abc 10px, #fff 10px, #fff 20px, #bf2010 20px, #bf2010 30px, #fff 30px, #fff 40px);
  background:repeating-linear-gradient(45deg, #114abc, #114abc 10px, #fff 10px, #fff 20px, #bf2010 20px, #bf2010 30px, #fff 30px, #fff 40px);
  padding: 20px;border-radius: 6px;
  box-shadow: 1px 2px 6px 1px rgba(76, 66, 47, 0.75);
  width: calc(100% - 24px);height: calc(100% - 24px);
  position: absolute;top: -8px;left: -8px;z-index: -1}

p {font-size:15px;line-height:24px;margin:20px 0;color:#111}
.kop {
  display: inline-block;margin: 15px 0 10px -28px;
  padding: 10px 15px 5px 30px;background: #bf2010;
  border-width: 1px 1px 1px 0px;border-style: dashed;
  color: #fff;text-shadow:1px 2px 1px #111;font-size:25px;
  box-shadow:2px 0 0 2px #bf2010, 2px 2px 0 2px #bf2010, 2px -2px 0 2px #bf2010, inset 0 0 5px 2px rgba(0, 0, 0, 0.2)}
</style>



1.2 HTML Markup


<div class="amplop">
   <div class="kop">From: SB-77 Design</div>

<p>...Tulis Surat Anda Disini...</p>
</div>


Tampilannya terlihat keren bukan.? tetapi jangan kirim amplop surat ini kepada Devy ya, soalnya kalau isi amplop tidak ada duitnya tidak Devy terima, (mata duitan Devy euy..!!) hehe..!!. Happy Blogging.

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Amplop Surat Design Model Untuk Teks
Ditulis oleh= Devy
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 =

25 komentar

  1. Balasan
    1. tapi Devy gak bisa berkokok tau mas, jadi jangan dibilang jago attuh, cuma bisa sedikit dan paham bentuknya saja, itu saja.
      hehe..

      Hapus
    2. Wah, mbak Devy bisa sedikit dan paham bentuk CSS ya? (Ini nggak nyebut jago, lho, ya)
      Keren mbak, tapi aku pusing gimana nerapinnya. :&

      Hapus
    3. Sebagai tahapan dasar untuk percobaan mas Renggo cukup Copy semua kode diatas CSS+HTML, lalu letakkan pada formulir posting mode tulis HTML, seperti ini:

      http://4.bp.blogspot.com/-1TCwibq3tjM/VNTg9uwNsrI/AAAAAAAABn0/FPKpI5uDxBw/s1600/formulir%2BHTML.jpg

      Hapus
    4. devy ...sy klo nyoba semua model text box yg dg sebelumnya, sllu gagal yah ,,,
      ada solusi ? :)

      Hapus
    5. deteksi penambahan kode input pada peramban browser, seperti:

      -webkit-(kode element);
      -moz-(kode element);
      -ms-(kode element);
      -o-(kode element);

      Hapus
    6. blm mudeng nih ,,, penmbahn pada permban browser ? :-?

      Hapus
    7. kalo belum mudeng sini mas belajar sama saya biar mubeng (c)

      Hapus
    8. Makasih mbak Devy penjelasannya. nanti saya coba. Bookmark dulu, deh.

      Hapus
  2. Wih jadi mirip amplop beneran, Tapi bingung gmana buat penerapannya diposting.. mungkin bisa untuk ngpost tentang contoh surat ya mba... (o)
    cssnya bisa langsung di taro di html posting kan.. Tanpa harus ngedit html template.. soalnya udah bnyk bnget css nya =))

    BalasHapus
    Balasan
    1. benar sekali mas, karena ini hanya merupakan tampilan teks box, atau konten box ( untuk menyimpan beberapa tulisan penting saat kita membuat artikel, jadi bisa kita tempatkan pada paragraf ke-2 atau terakhir,

      letakkan pada mode tulis HTML bukan yang Compose.

      Hapus
  3. heheheh, devy ada aja nih idenya ,,, :)
    nnti sy sediakan devy es doger yg bnyk deh, khusus buat devy seorang ,,, :)

    BalasHapus
    Balasan
    1. huhh...janji mau beliin es doger yang kemarin saja, sampai sekarang belum terlaksana, ini sudah mau sediain yang banyak,,bohong ah..!!

      Hapus
    2. hehehe, lgian devy punya ktu kpn aja sy blm tw gimna mw beliin coba ,,, hayooo ? :) xixixix

      Hapus
  4. saya pusing kalo lihat kode html

    BalasHapus
    Balasan
    1. ya udah besok kode script dech yang Devy bagikan, biar gak pusing, hehe...!!!

      Hapus
  5. selamat Siang Mba,,,wah tampilan amplopnya keren banget Mba,kapan kapan saya ingin praktekkan...saya minta izin follow blognya ya Mba...

    BalasHapus
  6. keren banget..ini sich namanya amplop surat digital...
    keep happy blogging always....salam dari Makassar :-)

    BalasHapus
  7. Keren,,, :)
    salam sukses

    BalasHapus
  8. bisa diterapin di wp ga mbak :-)

    BalasHapus
  9. Kalau sudah bicara tentang CSS dan kode lainnya memang Mbak Devy lah orang nya. Menurut saya amplop surat desain model di atas juga bisa di custom ke penggunaan selain teks ya mbak, seperti menerapkan di blockquote, subscribe by email dan bentuk-bentuk lainnya ya mbak. super sekali hehe.

    BalasHapus
    Balasan
    1. bisa juga seperti itu mas, dengan border-radius misalnya, tampilan amplop ini bisa kita bentuk tampil depan, seperti layaknya amplop ada tutupnya.

      Hapus
  10. ohh gt yah 8-)
    info yang bermanfaat.

    BalasHapus
  11. Aak... kalo CSS aku masih bingung :3 :3

    BalasHapus
  12. Pengetahuan baru ni, blog good

    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