CSS隨便玩 - Terminal Command Line 樣式

日期：
最近限量蠻喜歡玩CSS的，所以就開始玩一些有的沒的主題。這是是用CSS來做出像Linux Command Line，可以輸入Command的簡單樣板，因為看很多介紹IDE或一些Coding高手的網站上都會放一個Command Line游標跳動的樣式就想說來玩玩看。

限量主要將樣式著重在模仿Command Line的幾個部分：

  • 背景
  • 字型
  • 輸入游標

限量寫了三個主要的 class：

  1. console 表示 Command Line背景樣式
  2. keyin 表示輸入區樣式
  3. pointer 表示輸入游標樣式


 接下來有幾個實作要點要注意：

  • 因為字型要像Ubuntu，所以在 font-family 設定為 Monaco, Menlo, 'Ubuntu Mono', Consolas, source-code-pro, monospace。
  • 為了製造出游標閃爍的功能，限量定義了一個動畫 flash 並由 pointer 使用，動畫內容很簡單只要在每個階段設定 opacity 的值變化就好了，這裡記得要將 animation設置為 infinite 不然呈現出來只會閃一次。
  • 將Html的輸入控制項的 border 設為0就不會有邊框出來。另外輸入控制項在 focus 時會跑出 highlight的邊框，這要在 focus 的時候將 outline 設為 none。在 focus 的時候會跑出閃爍的游標，啊因為我們游標已經自己做了，所以要把原本的游標拿掉，將 color 設為透明再透過設定 text-shadow 就可達到我們要的效果。
  • 因為Html的輸入控制項的寬度是固定的，所以這裡必須要讓寬度根據輸入內容動態調整，所以限量在keyup的事件中實作動態寬度調整。

以下是實作的範例程式碼：

CSS：
.console {
 background-color: #000;
 font-family: Monaco, Menlo, 'Ubuntu Mono', Consolas, source-code-pro, monospace;
 font-size: 16px;
 color: #fff;
 width: 500px;
 height: 250px;
 padding: 5px 10px;
 -ms-word-break: break-all;
 word-break: keep-all;
}

.console p {
 white-space: pre-line;
 margin: 0;
}

.keyin {
 background-color: inherit;
 border: 0;
 color: transparent;
 text-shadow: 0 0 0 #fff;
 font: inherit;
 width: 0;
}

 .keyin:focus {
  outline: none;
 }

.pointer {
 background-color: #fff;
 -moz-animation: flash 1s infinite;
 -o-animation: flash 1s infinite;
 -webkit-animation: flash 1s infinite;
 animation: flash 1s infinite;
}

 .pointer:after {
  content: '_';
 }

@-moz-keyframes flash {
 0% {
  opacity: 0;
 }

 20% {
  opacity: 1;
 }

 40% {
  opacity: 1;
 }

 60% {
  opacity: 1;
 }

 80% {
  opacity: 0;
 }

 100% {
  opacity: 0;
 }
}

@-webkit-keyframes flash {
 0% {
  opacity: 0;
 }

 20% {
  opacity: 1;
 }

 40% {
  opacity: 1;
 }

 60% {
  opacity: 1;
 }

 80% {
  opacity: 0;
 }

 100% {
  opacity: 0;
 }
}

@keyframes flash {
 0% {
  opacity: 0;
 }

 20% {
  opacity: 1;
 }

 40% {
  opacity: 1;
 }

 60% {
  opacity: 1;
 }

 80% {
  opacity: 0;
 }

 100% {
  opacity: 0;
 }
}

Javascript：
function changeWidth(ele) {
 if(ele.value.length > 0) {
  ele.size = ele.value.length + 1;
  ele.style.width = 'auto';
 } else {
  ele.style.width = 0;
  ele.size = 1;
 }
}

Html：
<div class="console">
 <div>
  <p>Download package ...    Done.
  Install package ...    Done.
  Read package ...    Done.
  Complete!</p>
 </div>
 <div>
  <span>root@limited: </span>
  <span>
   <input type="text" id="keyin_field" class="keyin" onkeyup="changeWidth(this)" autofocus />
   <label class="pointer" for="keyin_field"></label>
  </span>
 </div>
</div>

執行結果：

Download package ... Done. Install package ... Done. Read package ... Done. Complete!
root@limited:


大概就這樣，當然這只是簡單的，有不太像的部分請鞭小力一點。







留言

張貼留言