เรียนรู้ select ทุก HTML elements ยกเว้นตัวแรก ด้วย CSS `:not(:first-child) selector เพิ่ม rule-set นี้ใน CSS stylesheet ทุก h2 element บนเว็บจะได้ 64px top margin h2 { margin-top: 64px; } แต่ไม่อยากให้ top margin ตัว h2 แรกบนเว็บ แตะทุกตัวอื่น? ใช้ :not(:first-child) selector เพิ่ม rule-set นี้ใน s

เรียนรู้ว่าทำไม uppercase text elements มักได้ประโยชน์จาก letter-spacing — และวิธีทำด้วย CSS ใน Typography ตอนใช้ uppercase/all caps (ตัวพิมพ์ใหญ่) บน text elements มักต้องเพิ่ม breathing room ระหว่างตัวอักษร ไม่งั้นอ่านไมสบาย Letterspacing = tracking synonyms ทั้งคู่ = space ระหว่างกลุ่มตัวอักษร (

เรียนรู้ทำ simple animated background color loop ด้วย pure CSS ใช้ keyframes และ CSS animation properties ต่างๆ ตัวอย่าง target HTML <body> element โดยตรง แตะ apply ให้ HTML element, class, หรือ id ใดๆ ก็ได้ The Code ใช้ demo นี้เป็น reference หมายเหตุ: code นี้ไม่ทำงานใน IE9 วางแผน Animation

เรียนรู้ทำ elements zoom/scale-up on hover ด้วย pure CSS ใช้ transform property transformation method: scale() Zoom/Scale-Up on Hover ลอง hover mouse บน box นี้: มัน scale up 1.5 เท่าของขนาดเดิม — ใหญ่ขึ้น 50% ตอน hover CSS transform property scale method เพิ่มหรือลดขนาด elements ได้ ทั้ง 3D และ 2

เรียนรู้ลบ/ignore mouseover/hover (:hover) event บน HTML elements เฉพาะด้วย pointer-events property ผมสร้าง team gallery page ให้ลูกค้า แต่ละ gallery item เป็น UI card ใช้ overlay เปลี่ยนสี hover แตะเจอปัญหา จึงเขียน tutorial นี้ UI Card Content & Structure แต่ละ gallery card item ประกอบด้วย: E

บางครั้งบังคับเขียน inline CSS เช่น HTML email templates — ขึ้นกับ email/newsletter provider แตะเขียน hover effect ด้วย inline CSS ยังไง? ทำไม่ได้ แต่สร้าง hover effect เดียวกันได้ด้วย JavaScript onMouseOver และ onMouseOut method เช่น อยากเปลี่ยนสี hyperlink hover (mouseover) จากน้ำเงินเป็นแดง: ผลล

เรียนรู้ทำให้ HTML pre tags responsive 100% ด้วย CSS properties เพียงสองตัว ปัญหาที่พบบ่อยบน tutorial websites: long code snippets (wrapped by pre tags) overflow กว้างกว่าหน้า ทำ layout พัง เพราะ default pre tags มี CSS white-space property เป็น normal: pre { white-space: normal; } แก้ง่ายๆ เปลี่ยน

CodePen จากวิดีโอ

วันนี้เรียนรู้ CSS animations ทำให้ arrow SVG icon bounce ขึ้นลง พร้อมปรับ animation type, timing, duration ด้วย CSS animation properties ทำไม animation มีประโยชน์? Guide users Encourage users to take action Grab users attention (พอยังมีอยู่) Requirements ต้องการ text editor ถ้าไม่มี local dev en

เคยสงสัยไหมว่าทำไมบางเบราว์เซอร์เพิ่มสีพื้นหลังสีเหลืองน่ากลัวบน autofill input fields? ผมบอกเหตุผลไม่ได้ แต่บอกวิธีลบให้หนีได้เร็ว ตรวจสอบว่าไม่มีเด็กๆ อยู่ข้างเคียงก่อนอ่านต่อ ทำไมเป็น ปัญหา? อาจไม่ใช่ถ้า design color palette เหมาะกับสีเหลืองน่ารังเกียจ เรื่องนี้เป็น Webkit-specific (Chrome, Saf

Capitalize ตัวอักษรแรกของคำด้วย CSS ใช้ first-letter selector: สมมติมี heading ตัวเล็กทั้งหมด: อยากทำให้ t ของ this เป็นตัวใหญ่ ผูก first-letter selector กับ h2 ใน CSS: h2:first-letter { text-transform: capitalize; } ใช้กับ class attribute ได้เช่นกัน: .name-of-class:first-letter { text-transform: c

วิธี wrap paragraph text block รอบ circular element ด้วย CSS อยากทำ content presentation ให้น่าสนใจ magazine-ish ใช้ CSS wrap text ต่อ elements อย่างน่าสนใจ เพิ่ม HTML content: <article> มี class post และ <img> มี class .circle เพิ่ม CSS: .post { max-width: 800px; margin: 3rem auto; } .

สมมติมี flexbox container พร้อม button ด้านใน: ลอง center align button (child) แนวนอนด้วย justify-content: .container { height: 300px; display: flex; justify-content: center; } ความสูงของ button (child) จะยืดเต็ม parent height (300px): น่าจะไม่ใช่ที่ต้องการ! มีหลายวิธีป้องกัน flex items (children

เรียนรู้ embed YouTube videos บนเว็บไซต์ และทำให้ fully responsive จาก mobile ถึง desktop ด้วย CSS Copy embed code จาก YouTube ได้ <iframe> wrapper ประมาณนี้: เสียดายที่ iframes ต้องการ fixed height/width เพื่อ aspect ratio ถูกต้อง ทำให้ incompatible กับ responsive design out of the box แต่แก

เรียนรู้ปิด text selection ด้วย CSS property user-select Default เบราว์เซอร์อนุญาต select text บนเว็บไซต์ — ตราบใดที่เป็น real text element ไม่ใช่รูปภาพที่มีข้อความ Select text ได้ด้วยเมาส์ หรือ keyboard เช่น cmd + a (Mac), ctrl + a (Windows) แต่ไม่อยากให้ select text (เหตุผลไหนก็ตาม)? ใช้ CSS prope

เรียนรู้ทำ square bullet points บน unordered lists ด้วย CSS property list-style-type Default unordered list items (<ul>) ใช้ round bullet points Round bullet points styled ด้วย: ul { list-style-type: disc; } ลักษณะ: HTML CSS JavaScript ทำ bullet points เป็นสี่เหลี่ยม override default list-st

เรียนรู้สไตล์ ordered list ให้เป็นตัวเลขโรมันใหญ่ (uppercase roman) ด้วย CSS ทำ ordered list ใน HTML 用: <ol> tag กำหนด ordered list element <li> tag กำหนด list item elements ตัวอย่าง: Default ordered list ใช้ regular decimal numbers: List item List item List item Default decimal num

เรียนรู้สไตล์ ordered list ให้เป็นตัวเลขโรมันเล็ก (lowercase roman) ด้วย CSS ทำ ordered list ใน HTML 用: <ol> tag กำหนด ordered list element <li> tag กำหนด list item elements ตัวอย่าง: Default ordered list ใช้ regular decimal numbers: List item List item List item Default decimal num

เรียนรู้ 2 วิธี center align webpage layout ด้วย CSS สมมติ styling article layout อยาก center <article> แนวนอนกลางหน้า วิธีง่ายและคลาสสิก: ใช้ margin ตั้ง left/right เป็น auto HTML markup สำหรับ article layout: CSS declaration block: article { max-width: 640px; margin-left: auto; margin-right

ใช้ CSS property background-image วางรูปเป็น background อาจสังเกตว่ารูปซ้ำเติมเต็ม width/height ของหน้าเว็บ เพราะ default เบราว์เซอร์ตั้ง background-repeat เป็น repeat หยุดการซ้ำ override repeat เป็น no-repeat: body { background-image: url(path-to-image.jpg); background-repeat: no-repeat; } ตอนนี้ b