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

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

สำหรับการทำรูปภาพและตัวหนังสือเป็นสีขาว-ดำทั้งเว็บไซต์ สำหรับเว็บมาสเตอร์ ถ้าหลายๆท่านเข้าเว็บไซต์ทั้งหลายตั้งแต่วันที่ 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 */
}


  Note. "ทางเว็บไซต์ไม่อนุญาตให้เว็บมาสเตอร์หรือเจ้าของเว็บไซต์ใด คัดลอกบทความหรือรูปภาพเพื่อนำไปเผยแพร่ต่อบนเว็บไซต์อื่น หากฝ่าฝืนถือเป็นความผิดตามกฎหมายที่ระบุไว้สูงสุด"


สำหรับการทำรูปภาพและตัวหนังสือเป็นสีขาว-ดำทั้งเว็บไซต์ สำหรับเว็บมาสเตอร์ ถ้าหลายๆท่านเข้าเว็บไซต์ทั้งหลายตั้งแต่วันที่ 14 ตุลาคมที่ผ่านมา จะสังเกตเห็นว่าเว็บไซต์ของคนไทยส่วนใหญ่จะมีการปรับแต่งตัวหนังสือและรูปภาพทั้งหมดเป็นโทนสีขาว-ดำ นั่นก็เพื่อเป็นการร่วมไว้อาลัยถวายแด่ องค์พระบาทสมเด็จพระเจ้าอยู่หัวในพระบรมโกศ รวมถึงเว็บไซต์ วาร์ไรตี้พีซี ดอทเน็ต แห่งนี้ด้วย วิธีการง่ายๆในการทำให้รูปภาพและตัวหนังสือเป็นโทนสีขาว-ดำทั้งเว็บไซต์อย่างง่าย ก็มีดังนี้ ซึ่งเว็บไซต์ส่วนใหญ่จะมีโครงสร้างไฟล์ 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 ก็เพียงแค่นำโค้ดดังต่อไปนี้ไปวางระหว่างตำแหน่งแท็ก &lt;head&gt;กับ&lt;/head&gt; &lt;style&gt; img { -webkit-filter: grayscale(100%); filter: grayscale(100%); } html { -webkit-filter: grayscale(100%); } &lt;/style&gt; สำหรับเว็บไซต์ของท่านที่ใช้ 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 */&hellip;

Review Overview

User Rating: Be the first one !

About varietypc

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