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:

Description Teks Box

• Teks Box Versi Google Chrome
• Blockquote Info Design
• Konten Light On Off
• Panel Slide Teks Info

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.

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 >>

http://sahabatblogger77.blogspot.com/2015/02/amplop-surat-design-model-untuk-teks.html

= TERIMA KASIH =

Devy Indriyani

Join To Sahabat Blogger 77