เคยรู้สึกไหมว่า CSS Stylesheet ของเราเต็มไปด้วยโค้ดที่ดูซ้ำซ้อนและยุ่งเหยิง? ถ้าเคยเจอปัญหานี้ บทความนี้คือคำตอบ! เราจะพาคุณไปรู้จักกับ CSS Shorthand เครื่องมือที่จะช่วยให้คุณเขียนโค้ดได้เร็วขึ้น อ่านง่ายขึ้น และลดขนาดไฟล์ CSS ได้อย่างมี...
เดียวนี้พลังของ HTML+CSS ไปไกลมากแล้วไม่ใช่เพียงแค่ทำหน้าตาแสดงผลได้อย่างเดียว แต่มีลูกเล่นเพิ่มเติมให้กับคนใช้เว็บด้วย ซึ่งก่อนหน้านั้นความสามารถลูกเล่นต่าง ๆ เราจำเป็นต้องใช้ JavaScript มาช่วย การที่เราเขียนเพียงแค่ HTML+CSS นั...
วันนี้ผมจะแสดงให้คุณเห็นว่า คุณสามารถใช้ CSS เพียงไม่กี่บรรทัดเพื่อทำให้ iframe ที่เราต้องการมีขนาดตาม ratio ซึ่งมันจะสามารถย่อขยายตามขนาดหน้าจอได้ด้วย iframe { aspect-ratio: 16 / 9; height: 100%; width: 100%; } แค่นี้ง่ายๆ เราก็ไปกำหนด 16/9 เอาว่าอยากได้ ratio เท่...
สำหรับคนที่ใช้งาน Tailwind CSS ในการปรับแต่งหน้าเว็บไซต์ของตัวเอง ก็คงเคยใช้ class container กันมาแล้ว ซึ่งตัว container มันจะกำหนดขนาดความกว้างมาให้แล้วตามเอกสาร เราสามารถกำหนดขนาดของ container ได้โดยแก้ไขไฟล์ tailwind.config.jsดังนี้ module.exports = { content: [ "./pages/**/*.{js,ts,jsx,tsx}", "./components/...
ช่วงนี้ css framework ที่มาแรงคงหนีไม่พ้น Tailwind CSS ใครยังไม่ได้ไปลองได้แล้ว เพราะเริ่มมีการนำมาใช้งานกับ Production มากขึ้นเรื่อยๆ ทีมผมก็เช่นกันถ้ามีโปรเจ็คไหนที่ต้องพัฒนาหน้าเว็บไซต์ ก็จะเรียกใช้ Tailwind CSS เลยทันที แทน Bootstrap แล้ว...