Membuat Halaman Microsoft Dengan CSS

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

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

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