Amplop Surat Design Model Untuk Teks

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);
}

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.

Belum berminat? tak apa 😊 bantu kami dengan membagikan link ini ke teman, siapa tahu, justru mereka sedang mencari ini!