ตอบเพื่อคนอยากทำแบบนี้เลยละกัน แต่ไม่รู้จะทำโค๊ดยังไงด้วย เพื่อใช้ตกแต่งเว็บให้สวยงามขึ้นไป
ขั้นแรกทำรูปครับ
แล้วก็ css ส่วนของเส้นหยัก ใช้เป็น ID เพราะทำหยักหลายสี repeat-x 0 0 หมายถึง การแสดงซ้ำในแนวนอนตำแหน่ง บน ซ้าย แล้วก็ปรับสีพื้นให้เป็นสีเดียวกันกับรูปที่เราจะนำมาใช้นะครับ เพื่อให้เนียนตา
#beverly{ background: #ffbbcf url(../images/beverly_teeth_03.jpg) repeat-x 0 0 ;
padding:50px 0}
ส่วนของ กล่อง warpper ใช้เป้น class
.wrapper{width:1000px;
margin:0 auto;
position:relative;
text-align:left;}
เวลาใช้งานจริงก็ ใช้ div ควบคุม ประมาณนี้ครับ
<div id="beverly">
<div class="wrapper">
....เนื้อหาในส่วนนี้ จะใส่อะไรก็อยู่ใน div นี้เลย
</div>
</div>
เราก็จะได้พื้นที่ ๆ ด้านขอบบนแสดงพื้นหลังเป้น รอยหยักรูปที่เราเตรียมไว้ซึ่งจะ รีพีท หรือ แสดงซ้ำในแนวนอนครับ
ประมาณนี้ ปรับแก้ชื่อ id ตามสะดวกเลยครับ
ปล. ไม่รู้ตอบตรงประเด็นหรือป่าวนะ 555+
ส่วนการทำใน Photoshop ก็ต้องทำ แพทเทินน์ไว้ครับ
การทำ pattern การสร้างงานใหม่ ขนาด สัก 15 x 15 แล้วก็เทพื้นหลังสีชมพู สร้างเลเยอร์ใหม่ ทำรูปสามเหลี่ยมหัวลง ใส่เงา drop shadow ไปตั้งค่าให้สวยงาม และก็ไปที่ edit เลือก Defind pattrun กดเซฟ
เวลาจะใช้งาน ก็เริ่มที่ สร้างสี่เหลี่ยมขึ้นมา เลือกที่ pattern overlay ตรง optionของสี่เหลี่ยมที่เราสร้าง ให้ทำการเลือกรูปแพทเทินที่เรา เซฟไว้ จากนั้นกดตกลง สี่เหลี่ยมเราก็จะมีรูปฟันปลาเรียงกันสวยงามครับ
เป้นอันเสร็จสินการทำรูปฟันปลา แล้วเราก็นำมาใช้ในเว็บเพื่อตกแต่งเป็นเส้นขั้นอย่างมีสไตล์ ต่อไป
บางคนอาจมีวิธีดีกว่านี้ครับ
ความรู้ทั่วไป
