Microsoft Page Document With CSS Only (MS-2010 WordPad Design)
Membuat Halaman Microsoft Dengan CSS - Mungkin sahabat semua sudah mengenal bentuk tampilan halaman document wordpad pada microsoft office 2010, kini tampilannya saya hadirkan kembali untuk membuat content tulisan Anda terlihat seakan berada dalam document wordpad microsoft page 2010 seperti ini:




DEMO SHOW





Microsoft page



Beberapa waktu lalu Box Tulisan Versi Google Chrome sudah pernah saya Tampilkan cara membuatnya, pertemuan kali ini SAHABAT BLOGGER 77 akan Membuat Halaman Microsoft Dengan CSS (Pure CSS Only), namun beberapa icon tidak saya sertakan semua, karena takut dicap menjiplak, akan tetapi tampilannya lumayan mirip kan.? hehe..!!
Ok dech, CSS lengkapnya seperti ini:



<style>
.page {
  overflow: hidden;position: fixed;height: 90px;width:755px;margin-top:-7.5em;
  border: 1px solid;border-color: #6b7b84 #596775 #8b9097;
  box-shadow: #aeb1b6 0 2px 2px;border-top:3px solid #111;
  background: linear-gradient(top, #fff, #f9f9f9 45%, #e5e9ee)}

.microsoft-page {
  position: relative;float: left;margin-right: 1px;padding: 2px 4px;
  border-width: 1px;list-style: none;
  border-image: -webkit-linear-gradient(#fdfdfd, #fff) 1 100%;
  font: 10px/1 "Segoe UI", Arial, sans-serif}

.microsoft-page::after {
  content: "";position: absolute;top: 0;right: -2px;width: 1px;height: 100%;
  background: linear-gradient(top, #f6f7f8, #c6cad0 45%, #b0b6bc)}

.microsoft-page:hover {
  background: radial-gradient(center bottom, circle cover, #fff 20px, rgba(229, 233, 238, 0) 100px, rgba(255, 255, 255, 0))}

.microsoft-page-col {float:left}
.microsoft-page-label {clear: left;text-align: center;color: #966d91}
.ribbon-btn-horizontal {height: 22px}
.ribbon-btn-horizontal > .ribbon-btn {border:1px solid transparent;border-radius:3px}
.ribbon-btn-horizontal > .ribbon-btn:hover {border-color: #f0cb54}
.ribbon-btn-vertical {
  height: 66px;border: 1px solid transparent;border-radius: 3px;text-align: center}
.ribbon-btn-vertical:hover {border-color: #f0cb54}
.ribbon-btn-vertical > .ribbon-btn:last-child {line-height: 12px}
.ribbon-btn-vertical > .ribbon-btn > i {margin-bottom: 2px}
.ribbon-btn-vertical > .ribbon-btn > h3 {margin-top: 2px}
.ribbon-btn {padding: 2px 4px;min-height: 100%;cursor: pointer}
.ribbon-btn:hover {
  background: linear-gradient(top, #fcedb2, #fce289 30%, #fce289 60%, #fdfae0);
  box-shadow: #fdf6dc 0 0 0 1px inset}

.ribbon-btn-caret {
  display: inline-block;width: 0;height: 0;vertical-align: super;
  border-top: 3px solid #000;border-right: 3px solid transparent;
  border-left: 3px solid transparent;content: ""}

.ribbon-btn-label-copy-from {width:3em}
.ribbon-btn > h3[class^="ribbon-btn-label"] {
  text-align: center;font: 10px/1 "Segoe UI", Arial, sans-serif}
[class^="icon"], [class*="icon"] {
  display: inline-block;vertical-align: bottom;
  background: url(http://img59.imageshack.us/img59/1187/spriteformmodeler.png) no-repeat}

.icon-32 {width: 32px;height: 32px}
.icon-16 {width: 16px;height: 16px}
.icon-copy-from + h3 {max-width: 3.5em}
.icon-actions-and-validations + h3 {max-width: 5em}
.icon-undo {background-position: -128px 0}
.icon-redo {background-position: -128px -32px}
.icon-properties {background-position: -32px 0}
.icon-copy-from {background-position: -64px 0}
.icon-actions-and-validations {background-position: -96px 0}
.icon-convert-to {background-position: -144px 0}
.icon-delete {background-position: -144px -32px}
.icon-rename {background-position: -160px 0}
.icon-visible {background-position: -160px -32px}
.icon-editable {background-position: -176px 0}
.icon-required {background-position: -176px -32px}
.icon-data,.icon-controls,.icon-layout {vertical-align: text-top}
.icon-data {background-position: -192px 0}
.icon-controls {background-position: -192px -32px}
.icon-layout {background-position: -208px 0}
.wrapper-left-panel {
  position: fixed;margin-top:-25px;padding: 2px 7px;width: 250px;height: 100%;
  border: 1px solid #8a9096;background-color: #e9edf1;
  font: 13px/normal "Segoe UI", Arial, sans-serif;
  box-shadow: #666 0 1px 1px 1px inset}

.ui-tabs-nav {border-bottom: 1px solid #bbbfc4;list-style: none}
.ui-tabs-nav::before,
.ui-tabs-nav::after,
.wrapper-main-panel::before,
.wrapper-main-panel::after {display: table;content: ""}
.ui-tabs-nav::before,.ui-tabs-nav::after,
.wrapper-main-panel::before,.wrapper-main-panel::after {clear: both}
.ui-tabs-nav > li {float: left;margin-bottom: -1px}
.ui-tabs-nav > li > a {
  display: block;padding: 4px;line-height: 24px;border: solid #bbbfc4;
  border-width: 1px 1px 1px 0;border-bottom-color: transparent;
  color: #000;transition: box-shadow ease-in .2s}

.ui-tabs-nav > li > a:hover {box-shadow: #fff 0 1px 1px 1px inset}
.ui-tabs-nav > li:first-child > a {border-left-width: 1px;margin-left:-30px}
.ui-tabs-nav > .active > a {background-color: white;cursor: default}
.ui-tabs-panel {
  clear: left;padding: 8px;border: solid #bbbfc4;
  border-width: 0 1px 1px;background-color: #fff}

.linkPanel:hover {color:red}
.modal {position: absolute;top: 40%;left: 20%;width: 30%}
.wrapper-main-panel {padding: 0 0 0 275px;height: 100%}
#container-layout {position: relative;height: 100%}
#main-panel {
  padding: 3%;overflow:auto;width:450px;margin-top:-1.5em;
  border: 1px solid #a9b0b8;background-color: #fff;
  box-shadow: #9b9ea2 0 5px 10px 1px;
  font: 14px/normal "Segoe UI", Arial, sans-serif}
</style>

HTML Concept Structur

<div id="container-layout" class="bizagi_editor_component_layout">
<div class="page">
   <ul class="microsoft-page">
     <li class="microsoft-page-col"><div class="ribbon-btn-vertical">
        <div class="ribbon-btn">
           <i class="icon-32 icon-save"></i>
              <h3 class="ribbon-btn-label">Save</h3>
        </div>
</div>
     </li>
     <li class="microsoft-page-col"><div class="ribbon-btn-horizontal">
        <div class="ribbon-btn">
           <i class="icon-16 icon-undo"></i> Undo</div>
        </div>
        <div class="ribbon-btn-horizontal"><div class="ribbon-btn">
           <i class="icon-16 icon-redo"></i> Redo</div>
        </div>
     </li>
     <li class="microsoft-page-col"><div class="ribbon-btn-vertical">
        <div class="ribbon-btn">
           <i class="icon-32 icon-properties"></i>
              <h3 class="ribbon-btn-label">Properties</h3>
        </div>
</div>
     </li>
     <li class="microsoft-page-col"><div class="ribbon-btn-vertical">
        <div class="ribbon-btn">
           <i class="icon-32 icon-copy-from"></i>
              <h3 class="ribbon-btn-label">Copy From</h3>
        </div>
</div>
     </li>
     <li class="microsoft-page-col"><div class="ribbon-btn-vertical">
        <div class="ribbon-btn">
           <i class="icon-32 icon-actions-and-validations"></i>
              <h3 class="ribbon-btn-label">Actions & Validations</h3>
        </div>
</div>
     </li>
        <p class="microsoft-page-label">Form</p>
   </ul>
   <ul class="microsoft-page">
     <li class="microsoft-page-col"><div class="ribbon-btn-horizontal">
        <div class="ribbon-btn">
     <i class="icon-16 icon-convert-to"></i> Convert To
     <i class="ribbon-btn-caret"></i></div>
        </div>
        <div class="ribbon-btn-horizontal"><div class="ribbon-btn">
     <i class="icon-16 icon-delete"></i> Delete</div>
        </div>
        <div class="ribbon-btn-horizontal"><div class="ribbon-btn">
     <i class="icon-16 icon-rename"></i> Rename</div>
        </div>
     </li>
        <p class="microsoft-page-label">Element</p>
   </ul>
   <ul class="microsoft-page">
     <li class="microsoft-page-col"><div class="ribbon-btn-horizontal">
        <div class="ribbon-btn">
     <i class="icon-16 icon-visible"></i> Visible
     <i class="ribbon-btn-caret"></i></div>
        </div>
        <div class="ribbon-btn-horizontal"><div class="ribbon-btn">
     <i class="icon-16 icon-editable"></i> Editable</div>
        </div>
        <div class="ribbon-btn-horizontal"><div class="ribbon-btn">
     <i class="icon-16 icon-required"></i> Required
     <i class="ribbon-btn-caret"></i></div>
        </div>
     </li>
        <p class="microsoft-page-label">Visual</p>
   </ul>
</div>
<div class="wrapper-left-panel">
    <div id="left-panel">
      <ul class="ui-tabs-nav"> // Header Left Panel Icon Menu
<li class="active"><a href="#" data-rendering-mode="design">
<i class="icon-16 icon-data"></i> Data</a></li>
<li><a href="#" data-rendering-mode="design">
<i class="icon-16 icon-controls"></i> Controls</a></li>
<li><a href="#" data-rendering-mode="layout">
<i class="icon-16 icon-layout"></i> Layout</a></li>
      </ul>
<div id="left-tab-data-bind" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
Document Archive File
// Content Left Link
<ol>
  <li><a class="linkPanel" href="#">Desktop</a></li>
  <li><a class="linkPanel" href="#">My Document</a></li>
</ol>
</div>

<div id="left-tab-data-bind" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
Laman Archive File
// Content Left Link
<a class="linkPanel" href="#">&raquo; Backlink</a>
<a class="linkPanel" href="#">&raquo; CSS Paper Effect</a>
<a class="linkPanel" href="#">&raquo; Background Hover Rotate Effect</a>
    </div>
  </div>
</div>
     <div class="wrapper-main-panel">
         <div id="main-panel">
           // Content Text Right
               <p>Tulis Artikel Anda Disini...</p>
         </div>
     </div>
</div>



Pada tampilan, saya hanya menirukan background-hover pada icon, header-icon dan sedikit tambahan untuk memuat daftar isi yang saya buat disebelah kiri halaman (panel-left), Jika Anda ingin membuat tampilannya semirip mungkin, Anda bisa membuka halaman wordpad microsoft, lalu perhatikan icon-icon mana saja yang tidak saya sertakan disana, dan Anda bisa melengkapinya. Selamat berkreasi..!!

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Membuat Halaman Microsoft Dengan CSS
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 =

38 komentar

  1. widihhhh...keren mbak.....

    BalasHapus
  2. bener2 mirip ih tampilan microsoftnya ,,,hehe
    ah ... devy bkin sy makin kagum aja deh (f) HEHE , idenya gak sllu fresh pantas visitor blognya ampe membludak ,,, :)

    BalasHapus
    Balasan
    1. perasaan dari kemarin-kemarin juga mas Fiu kkaguk melulu me Devy kok, hehe..

      tetapi tampilannya saya sederhanakan untuk icon tab mas,tetapi lumayan mirin lah. kalau masalah visitor masih kalah membludak kok dari blognya mas Fiu.

      Hapus
    2. hehe, iya makanya sy bilng jadi makin kagum sama devy ,,,, :) iya tampilannya sederhana ...

      eh gak kok visitor blog sy teh, mash naik turun gtu ,,,hehe klo devy kn tiap hari membludak terus ,,,hehe

      Hapus
    3. jangan merendah begitu mas. blog devy belum sampai semeleduk begitu visitornya, kan banyak yang pusing kalau berkunjung disini, karena selalu disuguhin kode-kodean, hehe..!!

      Hapus
    4. hehehe ... bukan merendah ini mah ,,, tpi fakta :)

      pusingnya bisa terobati sama adminya yg baik hati dan ...

      Hapus
  3. hahaahhaaa,... Sangat Kreatif (p)

    BalasHapus
  4. Oh ya mbak blognya udah tak follow...

    BalasHapus
    Balasan
    1. OK dech makasih ya sudah di follow.

      Hapus
  5. Balasan
    1. kalau memasang atau nitip link apalagi itu link AKTIF, mohon jangan disini, karena percuma tidak akan ditampilkan link Anda disini, kalau mau promosi link atau content artikel, sudah saya siapkan halaman khusus menitip link aktif sesuka hati dan jidatmu disini:

      Promosikan Iklan Menggunakan LINK

      Hapus
    2. delete aja komen nya ,,, hehe

      Hapus
    3. kasihan mas fiu kalau dihapus, sidia kan sudah capek mengetikkan teks itu di sini, biarin aja, toh juga tidak akan terdeteksi oleh google, karena llink yang bersumber dari visitor (khusus pengunjung) sudah saya block. jadi yang boleh membuat link Aktif hanya Devy saja. hehe..!!

      Hapus
    4. sip klo gtu ... devy gtuuuu ...hehe
      oh iya sy jadi inget kn ... di blog sy dh dipsang anti link aktif dan berfungsi ... tapi kok di ponsel ttp terlihat yah ,,,
      maaf keluar dri topik ... hehe

      Hapus
    5. hmmm..jadi cerita tentang link AKTIF neh, hehe..!!
      tetapi gak apa-apa soalnya yang bertanya mas Fiu yang spesial gitu.?

      Versi template untuk tampilan kan ada 2 macam mas, tampilan desktop dan mobile(m=1). kalau pada mobile belum pernah devy pelajari, dan sempat juga dulu mengalami hal seperti ini.
      biasanya jika kita menon-aktifkan link pada kolom komentar, maka semua link aktif yang masuk akan diblokir, termasuk link yang dibuat oleh admin.

      coba buka element template pada desktop versi mobile, lalu periksa elemen script yang mengatur kondisional tag pada kontent comment, jika masih terdeteksi aktif (boleh menyisipkan link).
      tambahkan kode CSS seperti ini:

      // untuk memblokir semua link aktif yang diawali dengan tag <a (tanpa terkecuali)

      #comment-holder .visitor-comment p a {display:none}

      lalu hapus script yang sebelumnya terpasang, dan gantikan dengan script seperti ini:

      <script type='text/javascript'>
      (function() {
      if (document.getElementById('comment-holder')) {
      var comments = document.getElementById('comment-holder'),
      icon = comments.getElementsByTagName('span');
      } else {
      icon[i].parentNode.parentNode.className += " visitor-comment";
      }
      })();
      blockLinks('comment-holder', 'visitor-comment p a');
      </script>

      Hapus
    6. horeee ,,, jadi org spesialnya devy ,,,hehe (f)

      buka element template versi dekstop satu tempat ga di menu template dan edit template ,,,ehehe soalnya sy cari dstu kok gak ada yah kode css yg devy sarankan ,,,

      Hapus
    7. maksudnya bukan edit Template mas, tetapi membuka halaman blog dalam versi mobile (bukan versi desktop), lalu klik kanan halaman tersebut, pilih periksa elemen, maka disana akan ditampilkan jabaran struktur template yang mas inginkan, beserta kode-kode baris dan kolom berapa yang terdeteksi error dan butuh perbaikan.

      nah kalau sudah paham, baru tambahkan kode CSS yang devy maksud untuk memblock semua bentuk teks dengan format tag <a

      Hapus
    8. itu buka versi mobile nya di dekstop kn ? hehe

      Hapus
  6. mbak devi kreatif dan pandai sekali dalam hal kode-kodean,,hehe kalau saya mah suka pusing kalau belajar ginian mbak,butuh konsentrasi yang super biar gak cepat pusing :)

    BalasHapus
    Balasan
    1. belum pandai kok mbak, cuma sedikit paham saja tentang kode script, karena devy sangat suka memodifikasi sebuah objek dengan kode-kode seperti ini, dan alhamdulillah sangat pusing, hehe..!!

      tetapi kalau sudah berhasil mendapatkan bentuknya, merasa puas, itu saja.

      Hapus
  7. Wah keren mbak, kreatif banget ide postingnya

    BalasHapus
  8. cakep... mirip office 2003, hehe

    BalasHapus
  9. keren juga ya..., kreatif bener mabaknya ini

    BalasHapus
    Balasan
    1. tetapi gak sekreatif mbak imerlina kok dalam meracik sebuah resep menjadi makanan yang super lezat, bukan seperti Devy, cewek tapi bisa masak mie instan doang, hehe..!!

      Hapus
  10. wah jago koding ya.. bisa buat belajar nich.. tapi saya gak pernah berhasil klo masalah beginian. buntu.

    BalasHapus
    Balasan
    1. kalau udah buntu, ya tinggal balik lagi aja mbak, mungkin tadi waktu ada persimpangan 2 arah salah memilih jalan, yang akhirnya ketemu dengan kebuntuan, hehe..!!

      Hapus
  11. wuihhhh mirip banget mbak :o itu mbak bikinnya berapa lama yah mbak?

    BalasHapus
    Balasan
    1. kalau ngeposting sih cuma 20 menit mas, tetapi merangkai kode-kodenya yang lumayan lama, saya mendesain sebuah tampilan halaman microsoft seperti ini 5 hari, dan masih perlu dicoba juga pada browser yang berbeda, kalau semua tampilan sudah OK dan bekerja pada sistem operasi browser lain, barulah devy terbitkan

      Hapus
  12. Wah bisa dibikin mirip sama MS word gitu ya hahahaha keren nih (h)

    BalasHapus
    Balasan
    1. cuma mirip kok mas, bukan persis seperti tampilan aslinya, kalau dibuat persis takutnya dibilang menjiplak, jadi icon-icon pada halaman hanya saya tampilkan seadanya saja.

      Hapus
  13. unik juga sob hasil nya bener mirip sama microfot word yang biasa ane buat ngetik yak. Ide dan imajinasi nya oke banget sob, ane pelajari dulu yak dan semoga ane bisa paham bikinya, sehingga bs ane cobak di blog butut milik ane

    BalasHapus
  14. waduh mbak kodenya itu lho mantap,liat kodenya aja sudah pusing apalagi nanti kalau dicoba di terapkan ya :D

    BalasHapus
  15. Emang bener ya pernyataan 'wanita penuh kode'. Setidaknya dari postingan-postingan yang ditulis mbak Devy membuktikan itu, hehe.
    Mirip banget sama Word tampilannya.

    BalasHapus
  16. Sekilas saya lihat seperti ngerombak UIX hahaha. Hebat hebat! Keren!

    BalasHapus
  17. keren,tapi bingungin itu kodenya banyak banget mba..

    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