ข้ามไปที่เนื้อหาหลัก

บทความ

กำลังแสดงโพสต์ที่มีป้ายกำกับ CSS

CSS Tricks : การจัดรูปภาพให้สวยงาม โดยไม่ใช้ image-background

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

CSS Tricks : การทำโลโก้ให้อยู่ตรงกลาง

Web Designer หรือ Developer ส่วนใหญ่มักปวดหัวกับการจัดรูปให้อยู่ในแบบที่เราต้องการ แต่บางครั้ง รูปที่เราเลือกมานั้นก็ไม่ไช่ว่ามาอยู่ในรูปแบบที่เหมาะสมกับเว็บของเรา บางทีก็เจอ แนวนอนบ้างแนวตั้งบ้าง ปวดหัวจริงๆ เรามาดูวิธีจัดการกับ ปัญหานี้เบื้องต้นกัน

การ Configuration สำหรับการแสดง Output ในรูปแบบต่างของ Compass

เป็นที่ทราบกันดีว่า Compass คือ CSS framework ตัวหนึ่งที่รองรับการเขียน CSS สไตล์โปรแกรมมิ่งอย่าง SASS ได้อีกทั้งยังมีออพชันมากมายให้เลือกใช้ รวมไปถึง Bootstrap ด้วย เพราะมันสะดวกสบายแบบนั้น ทำไมล่ะ? ทำไมเราถึงจะไม่ใช้มัน วันนี้เลยอยากจะมาแนะนำวิธีการตั้งค่าการแสดงผล CSS หลังจากที่มันแปลงค่าจากไฟล์ .SCSS มาให้ ในส่วนนี้จะไม่ได้พูดถึงขั้นตอนการติดตั้ง สามารถเข้าไปดูขั้นตอนการติดตั้ง SASS ได้ ที่นี่ และขั้นตอนการติดตั้ง Compass ได้ ที่นี่ ซึ่งปกติถ้าเราไม่ได้ทำอะไรเลยหลังจากที่สร้างโปรเจ็ค หน้าตา Output ที่ได้ก็จะมีหน้าตาประมาณนี้ หน้าตาก็จะรกๆ ดูไม่ค่อยเหมือน CSS ในแบบที่เราอยากได้เท่าไหร่ ซึ่งความจริงแล้ว Compass สามารถตั้งค่าการแปลงโค้ดให้สวยได้ โดยไปแก้ไขไฟล์ config.rb โดยแก้ไขตามนี้