Category Archives: CSS

ใส่ฟอนต์สวยๆให้เว็บ


Css 3 ยอมให้กำหนด font เพิ่มได้เองนอกจากที่มีอยู่แล้ว ทำให้สามารถออกแบบหน้าเว็บสวยๆ หรือจะเล่น typography อักษรศิลป์ได้มากขึ้น แต่ก็ยังเจอกับปัญหาเดิมคือ แต่ละ browser มันรับชนิดตัวอักษรได้ไม่เท่ากัน ถ้าดูจาก http://caniuse.com/fontface จะเห็นว่าตั้งแต่ ie8 มันก็ใช้ font-face ได้แล้ว แต่เฉพาะ Embedded OpenType (EOT) แต่ก็ไม่มีเจ้าอื่นๆ ที่รับนามสกุลนี้เท่าไหร่เลย ที่มีความหวังที่สุดคือ True Type (TTF) และ OpenType (OTF) ก็ยังไม่ครบทุกบราวเซอร์

ปัญหานี้แก้ได้ง่ายๆ โดยไปที่เว็บ Convert Fonts upload ไฟล์ fonts ที่เราต้องการใช้ หรือเข้าไปหาฟอนต์ที่เคยลงไว้ใน C:\Windows\Fonts เสร็จแล้วกด get @font-face จะได้ไฟล์ zip
สมมุติจะแปลง THSarabunNew เป็นนามสกุลอื่นๆ ภายในจะมีไฟล์ตามนี้
thsarabunnew.css
เป็นตัวอย่าง css ให้เอาไปแปะในไฟล์ css สาเหตุที่มันทำงานได้ทุกๆ บราวเซอร์
เพราะพี่แกเล่นเขียน css แบบนี้มาให้เลย

@font-face {
    font-family: 'THSarabunNewRegular';
    src: url('thsarabunnew.eot');
    src: url('thsarabunnew.eot') format('embedded-opentype'),
         url('thsarabunnew.woff') format('woff'),
         url('thsarabunnew.ttf') format('truetype'),
         url('thsarabunnew.svg#THSarabunNewRegular') format('svg');
}

ต่างจากตัวอย่าง(ในอุดมคติ)ของ w3c เยอะเลย เพื่อให้ browser compatibility มากที่สุด
และมีฟอนต์ที่แปลงมาให้แล้วอีก 4 ตัว

  • thsarabunnew.ttf (TrueType)
  • thsarabunnew.eot (Embedded OpenType)
  • thsarabunnew.svg (Scalable Vector Graphics) เขียนมาเป็น code เลย อันนี้ไม่มีใครขยันทำเองแน่ๆ
  • thsarabunnew.woff (Web Open Font Format)

ตัวอย่างการใช้งาน กำหนดให้ใช้ฟอนต์สารบัญ

body
{
	color:#c00000;
	font-family: 'THSarabunNewRegular', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
	font-size: 14px;
}

สังเกต จะมีชื่อฟอนต์อื่นต่อหลัง THSarabunNewRegular อีกที เพื่อถ้าหากโหลดฟอนต์มาไม่ได้ บราวเซอร์จะใช้ตัวถัดๆไปแสดงแทน

Advertisements

สลับสีตารางเหมือน world


สลับสีตาราง worldWord เวอร์ชั่นหลังมีตัวช่วยใส่สีตารางสวยๆ สบายตา ที่สำคัญคืออ่านง่ายขึ้น จึงมีคนเลียนแบบมาใช้กับตารางในเว็บบ้าง ความจริงการใส่สีตารางสลับกัน โดยใช้ css (:nth-child odd) มีคนเขียนไว้เยอะแล้ว แต่ตัวนี้จะพิเศษกว่าเพราะว่าด้านล่างแถวสีฟ้าอ่อน สังเกตุดีๆ จะเห็นเส้นสีขาว ซ่อนอยู่ด้วยทำให้ดูมีมิติ สวยขึ้นอีกนิด เหมือนต้นแบบครับ (ไม่เห็นบนไออีแก่ๆ เก่าเก็บ อีกตามเคย)
โหลดตัวอย่างได้ที่นี่

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Cool table</title>
<style>
table.plus {
	background: #7ba0cd;
	border-collapse: collapse;
	border-left: solid 1px #7ba0cd;
	border-right: solid 1px #7ba0cd;
	font-family: "Calibri", "sans-serif";
	font-size: 11pt;
	width: 100%;
}
table.plus tr {
	background: #FFFFFF;
	border-bottom: solid 1px #7ba0cd;
}
table.plus thead tr {
	background-color: #4e80bc;
	color: white;
}
table.plus tbody tr:nth-of-type(odd) {
	background: #d2deed;
	border-bottom: solid 1px #FFFFFF;
	box-shadow: 0 2px 0 -1px #7ba0cd;
}
table.plus tbody tr.case,
table.plus tfoot tr {
	background-color: #d7d7d7;
}
</style>
</head>

<body>
<form action="username" method="post">
  <table class="plus">
  <caption>
  User Register
  </caption>
  <thead>
    <tr>
      <th width="30">No.</th>
      <td width="100">required</td>
      <td width="100">name</td>
      <td width="100">value</td>
      <td>sample</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>yes</td>
      <td><label for="username">username</label></td>
      <td><input type="text" name="username" /></td>
      <td></td>
    </tr>
    <tr>
      <th>2</th>
      <td>yes</td>
      <td><label for="text">password</label></td>
      <td><input type="password" name="password" /></td>
      <td></td>
    </tr>
    <tr>
      <th>3</th>
      <td>yes</td>
      <td><label for="passwordCon">passwordCon</label></td>
      <td><input type="password" name="passwordCon" /></td>
      <td></td>
    </tr>
    <tr>
      <th>4</th>
      <td>yes</td>
      <td><label for="email">email</label></td>
      <td><input type="text" name=email" /></td>
      <td></td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="4"><label for="profiler">profiler Your Application</label>
        <input type="checkbox" name="profiler" value="1" checked />
        <input type="submit" value="call" /></td>
      <td></td>
    </tr>
  </tfoot>
  </table>
</form>
</body>
</html>
%d bloggers like this: