Graphic Design Community HardcoreGraphic

ผู้เขียน หัวข้อ: แปลงไฟล์ภาพให้เป็น CSS3 ผ่าน Photoshop ด้วย CSS3Ps  (อ่าน 2465 ครั้ง)

0 สมาชิก และ 1 บุคคลทั่วไป กำลังดูหัวข้อนี้

ออฟไลน์ รปภ.

  • Administrator
  • Level 12
  • *****
  • กระทู้: 1230
  • Like 39
  • เพศ: ชาย
  • หาเลวที่ตัวเรา ไม่ต้องหาเลวที่คนอื่น
    • ดูรายละเอียด
    • HardcoreGraphic
แปลงไฟล์ภาพให้เป็น CSS3 ผ่าน Photoshop ด้วย CSS3Ps
« เมื่อ: สิงหาคม 22, 2013, 12:17:32 PM »
แปลงไฟล์ภาพให้เป็น CSS3 ผ่าน Photoshop ด้วย CSS3Ps

สำหรับนักออกแบบเว็บ เทคนิคการเขียน CSS3 มีความสามารถในการสร้างสรรค์งาน โดยเฉพาะพวก effects หรือแม้แต่ภาพเคลื่อนไหวทำได้ดีกว่า CSS2 และยังช่วยย่นระยะเวลาในการทำไฟล์กราฟฟิค เช่น เมื่อก่อนเราสร้างกรอบโค้งมน ด้วย Photoshop แล้วค่อย Export ไฟล์ไปทำต่อในโปรแกรมเขียนเว็บ เรียกว่าต้องใช้เวลาหลายขั้นตอนหน่อย แต่หากใช้ CSS3 เราก็เพียงเขียนโค๊ด CSS3 เช่น...

.border1    {
width:200px; height: 66px;
border:1px solid #F00;
padding: 10px;
-webkit-border-radius: 10px;     /*บรรทัดนี้สำหรับแสดงผลใน Safari หรือ Google Chrome*/
-moz-border-radius: 10px;          /*บรรทัดนี้สำหรับแสดงผลใน Firefox */
border-radius: 10px;                     /*บรรทัดนี้สำหรับแสดงผลใน IE*/ 
}

หรืออาจจะใส่แค่ border-radius: 10px; อย่างเดียว (ปัจจุบันเว็บบราวเซอร์รุ่นใหม่ๆ น่าจะรับคำสั่งนี้แล้ว)
จากนั้นนำไปกำหนด Class ในไฟล์ html ของเรา เช่น   <div class="border1">test test test</div>


เพียงเท่านี้เราก็จะได้กรอบโค้งมนแล้ว โดยไม่ต้องไปทำไฟล์กราฟฟิคแบบเดิม และหากเราจะเพิ่มเทคนิคไล่เฉดสี หรือ Gradient ในกรอบด้วย เราก็เพิ่มโค๊ดเข้าไปอีก เช่น

.border2    {
width:200px; height: 66px;
border:1px solid #F00;
padding: 10px;
-webkit-border-radius: 10px;     /*บรรทัดนี้สำหรับแสดงผลใน Safari หรือ Google Chrome*/
-moz-border-radius: 10px;          /*บรรทัดนี้สำหรับแสดงผลใน Firefox */
border-radius: 10px;                     /*บรรทัดนี้สำหรับแสดงผลใน IE*/

/*ส่วนที่เพิ่มเติมในการไล่เฉดสี Gradient รองรับหลายๆ เว็บบราวเซอร์ รวมถึง IE6*/

background: #ff3236; /* Old browsers */
background: -moz-linear-gradient(top,  #ff3236 0%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3236), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ff3236 0%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ff3236 0%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ff3236 0%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(to bottom,  #ff3236 0%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3236', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
}


ผลลัพธ์หลังจากเพิ่มโค๊ดอีกชุด

ทั้งนี้คุณก็ไม่ต้องพิมพ์เองก็ได้ เนื่องจากมีเว็บที่ Generate โค๊ดเฉดสีแบบ CSS3 ให้อยู่หลายเว็บ เช่น
www.colorzilla.com/gradient-editor
www.css-tricks.com/examples/CSS3Gradient

ขณะที่ปลั๊กอิน CSS3Ps จะช่วยแปลงเลเยอร์ที่คุณทำไฟล์เอาไว้ด้วย Photsohop ให้เป็นโค๊ด CSS3  โดยเราไม่ต้องไปเขียนโค๊ดเองเช่นกัน สะดวกตรงที่ว่าเรา Export จาก Photoshop โดยไม่ต้องไปนั่งไล่เฉด หรือปรับโค้งอีกทีตามเว็บ Generator ต่างๆ วิธีการก็ง่ายๆ หลังคุณสร้างเลเยอร์ที่มีเฉดสี ภาพโค้งอะไรเรียบร้อยด้วยเครื่องมือ Shape Tool (ในรูป ข้อ 1.) ให้คลิกเลือกที่เลเยอร์ จากนั้นกดปุ่ม CSS3PS มันก็จะพาคุณไปยังหน้าเว็บบราวเซอร์เพื่อทำการ Generate โค๊ด รอสักครู่ ก็จะแสดงหน้าโค๊ดออกมา คุณก็ก๊อปปี้โค๊ดไปใช้งานได้แล้ว






ลองนำมาใช้กับโปรแกรมเขียนเว็บแล้ว Preview


ผลการแสดงผลใน Chrome


ผลการแสดงผลใน IE9 ด้วย Browser Mode ผ่าน IE10 พบว่าแสดงผลยังไม่ถูกต้อง


ผลการแสดงผลใน IE10 ไม่มีปัญหา

สำหรับการแสดงผลใน IE ให้ศึกษาการใช้ Gradient Filter เพิ่มเติม เพื่อให้แสดงผลถูกต้องกับ IE ต่ำกว่า IE10

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3236', endColorstr='#7db9e8',GradientType=0 );
www.msdn.microsoft.com/en-us/library/ms532997(v=vs.85).aspx
www.red-team-design.com/css-gradients-quick-tutorial

ดาวโหลดปลั๊กอิน CSS3PS
www.css3ps.com


หมายเหตุ:
- CSS3 จะรองรับกับเว็บบราวเซอร์ IE9 เป็นต้นไป ส่วน Chrome, Firefox, Safari เวอร์ชั่นปัจจุบันจะรองรับอยู่แล้ว
- สำหรับกรอบโค้งนั้นใน IE เวอร์ชั่นต่ำกว่า 9 จะต้องใช้สคริปท์เพิ่มเติม ศึกษาได้จาก www.fetchak.com/ie-css3
- ช่วงเดือน ต.ต. ปี 2013 เฉพาะเว็บบราวเซอร์ IE เวอร์ชั่นที่มีคนใช้สูงในไทยคือ IE8 (อ้างอิงสถิติจาก Turehits.net)

« แก้ไขครั้งสุดท้าย: พฤศจิกายน 19, 2013, 03:31:39 PM โดย รปภ »
*สมาชิกที่ไม่ได้ Login และโพสท์กระทู้ในบอร์ดประมาณ 2 ปี+ อาจถูกลบออกจากการเป็นสมาชิก ท่านจะต้องสมัครใหม่

*ไฟล์ลิขสิทธิ์ 150+ Vintage Logos และ Photo Mock-Ups ราคา 16 เหรียญ

ออฟไลน์ aimbestdesign

  • Level 1
  • *
  • กระทู้: 91
  • Like 1
    • ดูรายละเอียด
    • AimBestDesign รับทำเว็บไซต์ รับออกแบบเว็บไซต์
Re: แปลงไฟล์ภาพให้เป็น CSS3 ผ่าน Photoshop ด้วย CSS3Ps
« ตอบกลับ #1 เมื่อ: กันยายน 12, 2013, 09:53:13 PM »
ปรกติจะใช้ ไฟล์ภาพเลย เพราะจะได้ผลลัพท์เหมือนกันทุก Browser แต่วิธี CSS นี้จะช่วยลด Bandwidth จากการโหลดภาพ ได้มากเหมือนกัน
« แก้ไขครั้งสุดท้าย: เมษายน 20, 2014, 11:03:05 AM โดย aimbestdesign »

 

©HardcoreGraphic.com All rights reserved