การทำรูปภาพและตัวหนังสือเป็นสีขาว-ดำทั้งเว็บไซต์ สำหรับเว็บมาสเตอร์

0
อ่านแล้ว 2,751 ครั้ง

สำหรับการทำรูปภาพและตัวหนังสือเป็นสีขาว-ดำทั้งเว็บไซต์ สำหรับเว็บมาสเตอร์ ถ้าหลายๆท่านเข้าเว็บไซต์ทั้งหลายตั้งแต่วันที่ 14 ตุลาคมที่ผ่านมา จะสังเกตเห็นว่าเว็บไซต์ของคนไทยส่วนใหญ่จะมีการปรับแต่งตัวหนังสือและรูปภาพทั้งหมดเป็นโทนสีขาว-ดำ นั่นก็เพื่อเป็นการร่วมไว้อาลัยถวายแด่ องค์พระบาทสมเด็จพระเจ้าอยู่หัวในพระบรมโกศ รวมถึงเว็บไซต์ วาร์ไรตี้พีซี ดอทเน็ต แห่งนี้ด้วย

Black-and-White-all-Website-01

วิธีการง่ายๆในการทำให้รูปภาพและตัวหนังสือเป็นโทนสีขาว-ดำทั้งเว็บไซต์อย่างง่าย ก็มีดังนี้ ซึ่งเว็บไซต์ส่วนใหญ่จะมีโครงสร้างไฟล์ css เป็นหลักอยู่แล้ว โดยเฉพาะเว็บไซต์ที่ใช้ CMS อย่าง WordPress, SMF หรือ CMS อื่นๆ และองค์ประกอบภายในจะประกอบไปด้วยแท็ก html, body หรือ img เราก็เพียงนำโค้ดดังต่อไปนี้ไปใส่ลงในแท็กดังกล่าวพร้อมบันทึก แล้วทำการอัพโหลดขึ้นไปบนเว็บโอสติ้ง ก็เป็นเสร็จสิ้นขั้นตอนแล้วครับ

-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray(); /* IE 6-9 */

โค้ดดังกล่าวให้ใส่ไว้เฉพาะแท็กใดแท็กหนึ่งของไฟล์ css หรือ style.css ที่อยู่ภายในแท็ก html, body หรือ img

แต่ในกรณีที่เว็บไซต์นั้นๆไม่มีโครงสร้างไฟล์ css หรือ style.css ก็เพียงแค่นำโค้ดดังต่อไปนี้ไปวางระหว่างตำแหน่งแท็ก <head>กับ</head>

<style>
img {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
html {
-webkit-filter: grayscale(100%);
}
</style>

สำหรับเว็บไซต์ของท่านที่ใช้ Joomla! สามารถดาวน์โหลด plugin ไปติดตั้งเพิ่มเติมได้ที่ http://joomlachannel.com/2016-10-13-12-14-17.html

แล้วนำโค้ดต่อไปนี้ใส่เข้าไป

html {
/* IE */
filter: progidXImageTransform.Microsoft.BasicImage(grayscale=1);
/* Chrome, Safari */
-webkit-filter: grayscale(1);
/* Firefox */
filter: grayscale(1);
filter: grayscale(100%);
filter: gray;
-moz-filter: grayscale(100%);
-webkit-filter: grayscale(100%);
}

สำหรับ Internet Explorer สำหรับโค้ดด้านบน อาจจะไม่สามารถปรับแต่งได้หรือปรับเปลี่ยนได้ไม่ 100% ก็อาจจะต้องใส่โค้ดต่อไปนี้ลงไปทั้ง 2 แท็กในไฟล์ css ได้แก่ img และ html อีกด้วยครับ

img {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray; /* IE 6-9 */
}

html {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray; /* IE 6-9 */
}

Previous articleการสร้างภาพโปรไฟล์เฟซบุ๊กสีชมพู “เรารักในหลวง” ง่ายๆพร้อมชื่อเราเอง
Next articleการทำให้เปิดหน้าเว็บไซต์แรกเป็น index.html บน wordpress
ส่วนตัวชื่นชอบการเขียน, พัฒนาซอร์สโค้ดเว็บไซต์เป็นชีวิตจิตใจ ตลอดจนถึงอัพเดตเนื้อหาทริค, เทคนิคคอมพิวเตอร์ และข่าวสารเทคโนโลยีทุกอย่าง นอกเหนือจากการเคลียร์งานหลักเสร็จเรียบร้อย ก็จะมาทิ้งชีวิตให้กับ VarietyPC.net กันต่อแทบทุกวัน แต่บางครั้งอาจจะไม่ได้อัพเดตเนื้อหา เพราะต้องพัฒนาระบบการจัดการ Backend หลังบ้านไปด้วยและมีคนทำเพียงคนเดียว แม้จะไม่ได้รับผลตอบแทนจากแหล่งใดๆก็ตาม ตอนนี้เว็บไซต์เล็กๆแห่งนี้ก็ใกล้ย่างเข้าปีที่ 12 แล้วครับ และจะยังคงอยู่แชร์ความรู้กับพี่น้อง เพื่อนๆคนไทย และทั่วโลกตลอดไปครับ

โปรดแสดงความคิดเห็น

This site uses Akismet to reduce spam. Learn how your comment data is processed.