สร้างบล๊อกแบบลบมุม
งานเยอะสุด ๆ ต้องเขียนแบบหยาบ ๆ ไม่งั้นไม่มีโอกาสจะได้เขียน :P
เคยสงสัยว่าหน้าเว็บที่เขาทำเป็นบล๊อกแบบลบมุมมน ๆ เขาทำกันยังไง เลยลองแกะโค๊ดดู
ขออภัยนะครับ มือใหม่จริง ๆ ไม่ค่อยมีความรู้ html เลยไม่รู้จริง ๆ ว่าเขาทำกันยังไง)
ได้ความว่า
ตรงมุมของบล๊อกที่เห็นลบมุมมน ๆ อันนั้นเป็นไฟล์รูปภาพ ซึ่งจะต้องสร้างไว้ก่อน
ส่วนการแสดงผลขึ้นมาทำได้สองแบบ คือ
- แบบสร้างตารางซอยเล็ก ๆ แล้วบรรจุไฟล์รูปภาพลงไป
วิธีนี้มีข้อดีคือ การแสดงผลแน่นอน ไม่ขึ้นกับบราวเซอร์
ส่วนข้อเสียคือ เขียนโค๊ดยาว ทำให้อ่านโค๊ดยาก - อีกวิธีนึง ซึ่งเป็นวิธีแบบสมัยใหม่กว่า คือใช้ความสามารถของ css มาช่วย
ข้อดีคือ โค๊ดกระชับ อ่านง่าย
ข้อเสียคือ บราวเซอร์หลายเจ้า มีการสนับสนุน css ไม่เต็มร้อย
ถ้าเขียนซับซ้อนมาก จะทำให้การแสดงผลเพี้ยน
แสดงตัวอย่างวิธีที่สองไว้แบบนี้ครับ
สร้างไฟล์มุึมมนไว้ 4 ไฟล์คือ bl2-tl.png, bl2-tr.png, bl2-br.png และ bl2-bl.png
พื้นที่นอกขอบมน ต้องให้สีเป็นสีพื้นของฉากหลัง ห้ามทำเป็นสีใส (transparent)
bl2 มาจาก การทดลองบล๊อกครั้งที่ 2 ส่วน tl คือ top-left ...
ส่วนไฟล์ html มีดังนี้
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>Test round-corner block</h1>
<table cellpadding="30"><tr>
<td width="300" bgcolor="#dddddd">
<!-- BLOCK BL2 -->
<div class="bl2">
<h2><span class="btl"><span class="btr">
Heading2
</span></span></h2>
<div class="content">
This is block content<br>line2
</div>
<div class="bbr"><div class="bbl">
</div></div>
</div>
<!-- END BLOCK BL2 -->
</td>
</tr></table>
</body>
</html>
หมายเหตุ
อีตรง ต้องใช้รูปแบบนี้ เพราะต้องแก้เรื่อง IE ไม่รองรับ css เต็มร้อย
โค้ดจริง ต้องเป็น
...
<div class="bbr"><div class="bbl"><div class="content">
This is block content<br>line2
</div></div></div>
...
แต่การแสดงผลของ IE เพี้ยน เลยต้องมาเขียนเป็นแบบนี้
...
<div class="content">
This is block content<br>line2
</div>
<div class="bbr"><div class="bbl">
</div></div>
...
ไฟล์ style.css มีดังนี้
.bl2 {
position: relative;
background: #db6;
border-top: solid #ed9 1px;
border-right: solid #ca6 1px;
border-bottom: solid #ca6 1px;
border-left: solid #ed9 1px;
}
.bl2 .bbl {
display: block;
background: url(bl2-bl.png) no-repeat 0% 100%;
position: relative;
top: 0px;
left: -2px;
}
.bl2 .bbr {
display: block;
background: url(bl2-br.png) no-repeat 100% 100%;
position: relative;
top: 1px;
left: 1px;
}
.bl2 .content {
display: block;
position: relative;
margin: 5px;
padding: 5px;
}
.bl2 h2 .btl {
display: block;
position: relative;
background: url(bl2-tl.png) no-repeat 0% 0%;
padding: 1px 0px 0px 0px;
top: -1px;
left: -1px;
}
.bl2 h2 .btr {
display: block;
position: relative;
background: url(bl2-tr.png) no-repeat 100% 0%;
padding: 1px 0px 0px 0px;
top: -1px;
left: 2px;
}
.bl2 h2 {
display: block;
position: relative;
color: #ffe;
background: #c83;
font: 120% bold;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-indent: 0px;
text-align: center;
}
ถ้าลองแสดงจริง ๆ จะได้ไหม
|
เฮ้ย ได้จริง ๆ ด้วย :P
คำเตือน
โฆษณาชิ้นนี้ เหมาะแก่ผู้ใช้ไฟร์ฟอกซ์ และบราวเซอร์ในตระกูลลินุกส์เท่านั้น :P
| Attachment | Size |
|---|---|
 bl2-bl.png | 213 bytes |
| bl2-br.png | 226 bytes |
| bl2-tl.png | 301 bytes |
| bl2-tr.png | 316 bytes |
 bl2-style.css_.txt | 1.02 KB |
f0nt.com
Recent comments