หลาย ๆ คนก็คงจะเคยเรียนหรือศึกษา
css กันมาบ้างแล้วเพราะว่ามันเป็นเรื่องสำคัญในการตกแต่งหน้า
เว็บไซต์ของเรานั้นเองโดยส่วนใหญ่เราก็จะรู้จักกับคำสั่งที่ใช้กันบ่อย ๆ อยู่แล้วแต่วันนี้เราก็จะมานำเสนอวิธีการทำให้ตัวอักษรเป็นแนวตั้งกันจะเป็นอย่างไรลองไปดูกันเลย
โดยคำที่จะทำให้ตัวอักษรของเราเป็นแนวตั้งได้ก็คือ
นั้นเองโดยให้เรานำคำสั่งนี้ไปไว้ในไฟล์ css ของเราหรือจะนำไปเขียนเอาไว้ในไฟล์งานของเราเลยก็ได้เราลองมาดูตัวอย่างกัน
ในตัวอย่างนี้ผมก็จะใช้คำสั่ง writing-mode: vertical-lr อยู่ในไฟล์งานของผมเลยเพื่อจะได้เห็นภาพกันเง่าย ๆ นะครับโค้ดก็จะเป็นแบบนี้
โค้ด: เลือกทั้งหมด
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style>
.text {
writing-mode: vertical-lr;
}
</style>
</head>
<body>
<div>
<p class="text">ตัวอักษรแนวตั้ง</p>
</div>
</body>
</html>
ผลลัพธ์ที่ได้
- Selection_999(341).png (7.45 KiB) Viewed 2198 times
ในตัวอย่างตัวอักษรที่อยู่ในคลาส text ก็จะแสดงผมเป็นแนวตั้งให้กับเราได้แล้ว
เป็นอย่างไรกันบ้างครับสำหรับคำสั่ง writing-mode: vertical-lr เป็นอะไรที่แปลกใหม่สำหรับผู้ที่รู้จักคำสั่งนี้นะครับก็หวังว่าจะนำคำสั่งนี้ไปพัฒนางานของท่านได้นะครับก็หวังว่าบทความนี้จะเป็นความรู้ให้กับท่านได้ไม่มากก็น้อยนะครับ
บทเรียน css
https://www.mindphp.com/บทเรียนออนไลน์/บทเรียน-css.html
PlayList Css
https://www.youtube.com/playlist?list=P ... tEeTJ-cUWo
หลาย ๆ คนก็คงจะเคยเรียนหรือศึกษา [url=https://www.mindphp.com/%E0%B8%84%E0%B8%B9%E0%B9%88%E0%B8%A1%E0%B8%B7%E0%B8%AD/73-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/2193-css-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3.html]css[/url] กันมาบ้างแล้วเพราะว่ามันเป็นเรื่องสำคัญในการตกแต่งหน้า[url=https://www.mindphp.com/%E0%B8%84%E0%B8%B9%E0%B9%88%E0%B8%A1%E0%B8%B7%E0%B8%AD/73-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/3585-website-%E0%B9%80%E0%B8%A7%E0%B9%87%E0%B8%9A%E0%B9%84%E0%B8%8B%E0%B8%95%E0%B9%8C.html]เว็บไซต์[/url]ของเรานั้นเองโดยส่วนใหญ่เราก็จะรู้จักกับคำสั่งที่ใช้กันบ่อย ๆ อยู่แล้วแต่วันนี้เราก็จะมานำเสนอวิธีการทำให้ตัวอักษรเป็นแนวตั้งกันจะเป็นอย่างไรลองไปดูกันเลย
โดยคำที่จะทำให้ตัวอักษรของเราเป็นแนวตั้งได้ก็คือ
[code]writing-mode: vertical-lr;[/code]
นั้นเองโดยให้เรานำคำสั่งนี้ไปไว้ในไฟล์ css ของเราหรือจะนำไปเขียนเอาไว้ในไฟล์งานของเราเลยก็ได้เราลองมาดูตัวอย่างกัน
ในตัวอย่างนี้ผมก็จะใช้คำสั่ง writing-mode: vertical-lr อยู่ในไฟล์งานของผมเลยเพื่อจะได้เห็นภาพกันเง่าย ๆ นะครับโค้ดก็จะเป็นแบบนี้
[code]<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style>
.text {
writing-mode: vertical-lr;
}
</style>
</head>
<body>
<div>
<p class="text">ตัวอักษรแนวตั้ง</p>
</div>
</body>
</html>[/code]
ผลลัพธ์ที่ได้
[attachment=0]Selection_999(341).png[/attachment]
ในตัวอย่างตัวอักษรที่อยู่ในคลาส text ก็จะแสดงผมเป็นแนวตั้งให้กับเราได้แล้ว
เป็นอย่างไรกันบ้างครับสำหรับคำสั่ง writing-mode: vertical-lr เป็นอะไรที่แปลกใหม่สำหรับผู้ที่รู้จักคำสั่งนี้นะครับก็หวังว่าจะนำคำสั่งนี้ไปพัฒนางานของท่านได้นะครับก็หวังว่าบทความนี้จะเป็นความรู้ให้กับท่านได้ไม่มากก็น้อยนะครับ
บทเรียน css
https://www.mindphp.com/บทเรียนออนไลน์/บทเรียน-css.html
PlayList Css
https://www.youtube.com/playlist?list=PLLi1ciqQAf8TPD9upqrC1pFtEeTJ-cUWo