17 เคล็ดลับ CSS ที่ช่วยประหยัดเวลาสำหรับผู้ใช้ WordPress

WordPress เสนอความเป็นไปได้ไม่รู้จบในการออกแบบและปรับแต่งเว็บไซต์ของคุณ ในบทความนี้ เราจะแบ่งปันเคล็ดลับ CSS ที่ใช้งานได้จริงสำหรับผู้ใช้ WordPress โดยเฉพาะ ตั้งแต่การออกแบบส่วนหัวไปจนถึงการปรับแต่งแบบอักษร

แม้ว่า WordPress จะมีธีมและเทมเพลตที่สร้างไว้ล่วงหน้ามากมาย แต่บางครั้งคุณก็ต้องจัดการเองและทำการปรับแต่งด้วย CSS

หากคุณเคยถามคำถามเหล่านี้เมื่อคุณทำงานบนไซต์ WordPress ของคุณ:

• “ฉันจะลบปุ่ม 'อ่านเพิ่มเติม' ได้อย่างไร”
• “ฉันจะเปลี่ยนสีของลิงค์นี้ได้อย่างไร”
• “ฉันจะทำให้ลิงก์นี้คลิกไม่ได้แต่เก็บข้อความไว้ในหน้าได้อย่างไร”

…อ่านต่อเพื่อเรียนรู้เคล็ดลับ CSS ที่มีประโยชน์สำหรับเว็บไซต์ของคุณ

ในบทช่วยสอนนี้ เราจะกล่าวถึง:

• เคล็ดลับ WordPress CSS
  1. จัดองค์ประกอบให้อยู่กึ่งกลางในแนวนอนและแนวตั้ง
  2. เปลี่ยนสีลิงค์
  3. ลบลิงค์
  4. ปิดใช้งานลิงก์ (ลิงก์ยังคงมองเห็นได้ แต่ผู้ใช้ไม่สามารถคลิกได้)
  5. เปลี่ยนสีของลิงก์เมื่อโฮเวอร์
  6. ลิงค์สไตล์
  7. สไตล์ปุ่ม
  8. เปลี่ยนแบบอักษรของส่วน
  9. สร้างส่วนหัวที่เหนียว
  10. สร้างส่วนหัวที่ติดหนึบพร้อมเอฟเฟกต์เงา
  11. เพิ่มสีพื้นหลังให้กับส่วน
  12. เปลี่ยนสีพื้นหลังของร่างกาย
  13. เปลี่ยนสีของคำหรือวลีที่ต้องการ
  14. สร้างเส้นขอบรอบรูปภาพ
  15. สร้างเอฟเฟกต์โฮเวอร์บนรูปภาพ
  16. จัดรูปแบบ
  17. สร้างเค้าโครงที่ตอบสนอง
• ยกระดับทักษะ CSS ของคุณไปอีกขั้น

เคล็ดลับ WordPress CSS

เพียงสองสิ่งที่คุณต้องรู้เพื่อใช้เคล็ดลับเหล่านี้คือ:

• CSS ทำงานอย่างไร
• วิธีเพิ่ม CSS ลงใน WordPress

หมายเหตุ: CSS ไม่มีความเสี่ยง ดังนั้นหากคุณทำผิดพลาด คุณก็แค่ลบโค้ดของคุณหรือแก้ไขมัน... มันจะไม่เสียหายอะไร :)

ข้ามไปที่เคล็ดลับ CSS ที่ใช้งานได้จริงพร้อมตัวอย่างเพื่อให้คุณสามารถลองใช้บนเว็บไซต์ WordPress ของคุณเอง:

จัดองค์ประกอบให้อยู่กึ่งกลางในแนวนอนและแนวตั้ง

หากต้องการจัดองค์ประกอบให้อยู่กึ่งกลาง (เช่น รูปภาพ ข้อความ หรือ div) ทั้งในแนวนอนและแนวตั้ง ให้ใช้โค้ด CSS ต่อไปนี้:

.element {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

ในรหัสนี้ position: relative จะถูกใช้เพื่อวางตำแหน่งองค์ประกอบที่สัมพันธ์กับบรรพบุรุษตำแหน่งที่ใกล้ที่สุด top: 50% และ left: 50% จะย้ายองค์ประกอบไปที่กึ่งกลางของคอนเทนเนอร์ สุดท้าย transform: translate(-50%, -50%) จัดองค์ประกอบให้อยู่กึ่งกลางทั้งในแนวนอนและแนวตั้งโดยเลื่อนกลับ 50% ของความกว้างและความสูงของตัวเอง

เปลี่ยนสีลิงค์

.item-class{
color : blue;
}

คุณสามารถใช้สีต่างๆ เช่น ขาว ดำ น้ำเงิน แดง… แต่คุณอาจต้องการใช้สีเฉพาะ

ในกรณีนี้ คุณสามารถทำได้ดังนี้:

.item-class{
color : #F7F7F7;
}

หากคุณต้องการสร้างจานสีสำหรับการออกแบบเว็บไซต์ของคุณ ให้ลองใช้เครื่องมือ Paletton มันมีประโยชน์มาก!

หมายเหตุ: ถ้าคุณต้องการรวมองค์ประกอบเข้าด้วยกัน มันค่อนข้างง่าย

ตัวอย่างเช่น สมมติว่าคุณต้องการปิดใช้งานการคลิกและทำให้ลิงก์กลับเป็นสีดำ

คุณสามารถใช้รหัสนี้:

.item-class{
pointer-events : none;
color : black;
}

ลบลิงค์

.item-class{
display : none;
}

หมายเหตุ: บางครั้งคุณอาจต้องใส่ a หลังเลิกเรียนเพื่อให้ใช้งานได้ เช่นนี้

.item-class a{
display : none;
}

ลองเพิ่ม a หรือทดลองโดยไม่ใช้เพื่อดูว่าโค้ดของคุณใช้งานได้หรือไม่ เพียงเพิ่ม CSS บันทึก และตรวจสอบส่วนหน้าของคุณ

ปิดใช้งานลิงก์ (ลิงก์ยังคงมองเห็นได้ แต่ผู้ใช้ไม่สามารถคลิกได้)

หมายเหตุ: การแก้ไข HTML จะดีกว่าเสมอเพื่อดำเนินการนี้ แต่ถ้า CSS อาจง่ายกว่าหรือเป็นวิธีแก้ปัญหาเดียวที่เป็นไปได้ ให้ใช้รหัสนี้:

.item-class{
pointer-events: none;
}

เปลี่ยนสีของลิงก์เมื่อโฮเวอร์

คุณสามารถทำให้ลิงก์เปลี่ยนสีได้เมื่อผู้ใช้วางเมาส์เหนือลิงก์โดยใช้โค้ด CSS ต่อไปนี้:

a:hover {
color: red;
}

ในโค้ดนี้ ตัวเลือก a:hover จะกำหนดเป้าหมายลิงก์ทั้งหมดในหน้าที่ผู้ใช้กำลังวางเมาส์เหนืออยู่ คุณสมบัติ color: red เปลี่ยนสีของข้อความเป็นสีแดง

ลิงค์สไตล์

หากต้องการจัดรูปแบบลิงก์บนเว็บไซต์ของคุณ ให้ใช้โค้ด CSS ต่อไปนี้:

a {
color: #0077cc;
text-decoration: none;
border-bottom: 1px solid #0077cc;
transition: all 0.2s ease-in-out;
}

a:hover {
color: #005299;
border-bottom: 1px solid #005299;
}

ในโค้ดนี้ a เลือกจะใช้เพื่อจัดรูปแบบลิงก์ทั้งหมดในหน้า คุณสมบัติ color กำหนดสีของลิงก์ และคุณสมบัติ text-decoration จะลบการขีดเส้นใต้เริ่มต้น คุณสมบัติ border-bottom เพิ่มเอฟเฟกต์การขีดเส้นใต้เล็กน้อย คุณสมบัติ transition จะสร้างเอฟเฟกต์การเปลี่ยนที่ราบรื่นเมื่อผู้ใช้วางเมาส์เหนือลิงก์ ตัวเลือก a:hover ใช้เพื่อจัดรูปแบบลิงก์เมื่อผู้ใช้วางเมาส์เหนือลิงก์

สไตล์ปุ่ม

ใช้รหัสต่อไปนี้เพื่อจัดรูปแบบปุ่ม:

.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}

ในโค้ดนี้ คุณสมบัติต่างๆ จะถูกใช้เพื่อจัดรูปแบบปุ่ม รวมถึงคุณสมบัติ background-color และ color สำหรับรูปลักษณ์ของปุ่ม คุณสมบัติ padding สำหรับขนาดของปุ่ม และคุณสมบัติ cursor เพื่อเปลี่ยนตัวชี้เมาส์เมื่อวางเมาส์เหนือปุ่ม

เปลี่ยนแบบอักษรของส่วน

เปลี่ยนแบบอักษรของส่วนเว็บไซต์ของคุณโดยใช้รหัส CSS ต่อไปนี้:

.section {
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
}

ในโค้ดนี้ คุณสมบัติ font-family จะตั้งค่าฟอนต์เป็น Arial หรือฟอนต์ sans-serif ที่คล้ายกัน คุณสมบัติ font-size จะกำหนดขนาดฟอนต์เป็น 16 พิกเซล และคุณสมบัติ line-height จะกำหนดระยะห่างระหว่างบรรทัดข้อความเป็น 1.5 เท่าของขนาดตัวอักษร

สร้างส่วนหัวที่เหนียว

หากคุณต้องการสร้างส่วนหัวที่คงที่ด้านบนของหน้าขณะที่ผู้ใช้เลื่อน คุณสามารถใช้รหัส CSS ต่อไปนี้:

.header {
position: fixed;
top: 0;
left:0;
width: 100%;
background-color: #333;
color: #fff;
z-index: 9999;
}

ในโค้ดนี้ คุณสมบัติ position: fixed จะแก้ไขส่วนหัวไปที่ด้านบนสุดของวิวพอร์ต และคุณสมบัติ top: 0 จะวางตำแหน่งไว้ที่ด้านบนสุดของหน้า width: 100% ช่วยให้มั่นใจได้ว่าส่วนหัวครอบคลุมความกว้างทั้งหมดของวิวพอร์ต background-color , color ใช้เพื่อจัดรูปแบบส่วนหัว และคุณสมบัติ z-index: 9999 ช่วยให้มั่นใจได้ว่าส่วนหัวจะปรากฏเหนือองค์ประกอบอื่นๆ ทั้งหมดในหน้า

สร้างส่วนหัวที่ติดหนึบพร้อมเอฟเฟกต์เงา

หากต้องการสร้างส่วนหัวแบบติดหนึบพร้อมเอฟเฟกต์เงาที่ตรึงไว้ที่ด้านบนของหน้าขณะที่ผู้ใช้เลื่อน ให้ใช้โค้ด CSS นี้:

header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #fff;
z-index: 999;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.content {
padding-top: 100px;
}

ในโค้ดนี้ position: fixed ที่จะใช้เพื่อกำหนดส่วนหัวให้อยู่ด้านบนสุดของหน้า คุณสมบัติ top: 0 และ left: 0 วางส่วนหัวที่มุมบนซ้ายของหน้า คุณสมบัติ width: 100% กำหนดความกว้างของส่วนหัวให้เป็นความกว้างเต็มของหน้า คุณสมบัติ background-color กำหนดสีพื้นหลังของส่วนหัว และคุณสมบัติ z-index ช่วยให้มั่นใจได้ว่าส่วนหัวจะปรากฏเหนือองค์ประกอบอื่นๆ ในหน้า สุดท้าย คุณสมบัติ box-shadow จะเพิ่มเอฟเฟกต์เงาเล็กน้อยให้กับส่วนหัว ตัวเลือก .content ใช้เพื่อเพิ่มช่องว่างภายในด้านบนของหน้า เพื่อไม่ให้เนื้อหาครอบคลุมโดยส่วนหัวที่ตายตัว

เพิ่มสีพื้นหลังให้กับส่วน

คุณต้องการเพิ่มสีพื้นหลังในส่วนของเว็บไซต์ของคุณหรือไม่? จากนั้นใช้รหัส CSS ต่อไปนี้:

.section {
background-color: #f2f2f2;
padding: 20px;
}

ในโค้ดนี้ คุณสมบัติ background-color: #f2f2f2 จะตั้งค่าสีพื้นหลังเป็นสีเทาอ่อน และคุณสมบัติ padding: 20px จะเพิ่มพื้นที่ 20 พิกเซลรอบๆ เนื้อหาภายในส่วน

เปลี่ยนสีพื้นหลังของร่างกาย

เพิ่มรหัสนี้เพื่อเปลี่ยนสีพื้นหลังของเนื้อหาเว็บไซต์ของคุณ:

body {
background-color: #f5f5f5;
}

ในโค้ดนี้ คุณสมบัติ background-color จะกำหนดสีพื้นหลังเป็นสีเทาอ่อน

เปลี่ยนสีของคำหรือวลีที่ต้องการ

หากต้องการเปลี่ยนสีของคำหรือวลีเฉพาะภายในกลุ่มข้อความ คุณสามารถใช้โค้ด CSS ต่อไปนี้:

p span {
color: red;
}

ในรหัสนี้ ตัวเลือก p span กำหนดเป้าหมายองค์ประกอบ span ใด ๆ ที่ปรากฏภายในองค์ประกอบ p จากนั้น คุณสามารถรวมคำหรือวลีที่คุณต้องการกำหนดเป้าหมายด้วยองค์ประกอบ span ใน HTML ของคุณได้ดังนี้:

<p>Lorem ipsum dolor sit amet, <span>consectetur adipiscing elit</span>. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

สิ่งนี้จะทำให้วลี “consectetur adipiscing elit” ปรากฏเป็นสีแดง

สร้างเส้นขอบรอบรูปภาพ

วิธีเพิ่มเส้นขอบรอบรูปภาพมีดังนี้

img {
border: 2px solid #ccc;
}

ในโค้ดนี้ คุณสมบัติ border จะกำหนดความกว้าง รูปแบบ และสีของเส้นขอบ ค่า 2px กำหนดความกว้างของเส้นขอบเป็น 2 พิกเซล solid กำหนดรูปแบบเป็นเส้นทึบ และ #ccc กำหนดสีเป็นสีเทาอ่อน

สร้างเอฟเฟกต์โฮเวอร์บนรูปภาพ

ใช้ข้อมูลโค้ดนี้เพื่อสร้างเอฟเฟ็กต์โฮเวอร์บนรูปภาพ:

img:hover {
opacity: 0.8;
}

ในโค้ดนี้ ตัวเลือก img:hover จะกำหนดเป้าหมายรูปภาพเมื่อผู้ใช้วางเมาส์เหนือรูปภาพ คุณสมบัติ opacity กำหนดความโปร่งใสของภาพ ในกรณีนี้ ค่านี้ตั้งไว้ที่ 0.8 ทำให้รูปภาพโปร่งใสเล็กน้อยเมื่อผู้ใช้วางเมาส์เหนือรูปภาพ

จัดรูปแบบ

กำหนดรูปแบบบนเว็บไซต์ของคุณด้วยรหัส CSS ต่อไปนี้:

form {
background-color: #f2f2f2;
padding: 20px;
border-radius: 5px;
}

form label {
display: block;
margin-bottom: 10px;
}

form input[type="text"], form input[type="email"], form textarea {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: none;
border-radius: 3px;
box-shadow: 0 0 5px #ccc;
}

form input[type="submit"] {
background-color: #4CAF50;
border: none;
color: #fff;
padding: 10px 20px;
border-radius: 3px;
cursor: pointer;
}

ในโค้ดนี้ คุณสมบัติต่างๆ จะถูกใช้เพื่อจัดรูปแบบฟอร์ม รวมถึงคุณสมบัติ background-color padding และ border-radius สำหรับลักษณะโดยรวมของฟอร์ม ตัวเลือก form label ใช้เพื่อจัดรูปแบบป้ายชื่อที่เกี่ยวข้องกับฟิลด์แบบฟอร์มแต่ละช่อง form input[type="text"], form input[type="email"], form textarea ใช้เพื่อจัดรูปแบบฟิลด์อินพุตต่างๆ ในฟอร์ม ตัว form input[type="submit"] ใช้เพื่อจัดรูปแบบปุ่มส่ง

สร้างเค้าโครงที่ตอบสนอง

หากคุณต้องการสร้างเลย์เอาต์ที่ตอบสนองตามขนาดหน้าจอต่างๆ ให้ใช้โค้ด CSS ต่อไปนี้:

@media (max-width: 768px) {
/* Styles for screens smaller than 768px */
.container {
width: 100%;
}

.menu {
display: none;
}

.mobile-menu {
display: block;
}
}

@media (min-width: 769px) {
/* Styles for screens larger than 768px */
.container {
width: 768px;
margin: 0 auto;
}

.menu {
display: block;
}

.mobile-menu {
display: none;
}
}

ในโค้ดนี้ กฎ @media ใช้เพื่อระบุสไตล์ต่างๆ สำหรับขนาดหน้าจอต่างๆ กฎ @media แรกกำหนดเป้าหมายหน้าจอที่มีความกว้างสูงสุด 768px และกฎ @media ที่สองกำหนดเป้าหมายหน้าจอที่มีความกว้างขั้นต่ำ 769px ตัวเลือกต่างๆ ภายในกฎ @media แต่ละข้อใช้เพื่อปรับเค้าโครงและลักษณะที่ปรากฏของหน้าตามขนาดหน้าจอ

อีกหนึ่งเคล็ดลับ CSS...

คุณอาจพบว่ารหัสของคุณใช้งานไม่ได้แม้ว่าคุณจะทำทุกอย่างถูกต้องแล้วก็ตาม อาจเป็นเพราะมีโค้ด CSS อยู่แล้วที่บอกบางอย่างที่แตกต่างจากโค้ดของคุณ

หากต้องการลบล้างสิ่งนี้ ให้เพิ่ม !important ดังนี้:

.item-class{
pointer-events: none !important;
}

นี่เป็นเพียงตัวอย่างเล็ก ๆ น้อย ๆ ของวิธีปฏิบัติที่คุณสามารถใช้ CSS เพื่อปรับปรุงเว็บไซต์ WordPress ของคุณ

ด้วย CSS ความเป็นไปได้ในการปรับแต่งรูปลักษณ์เว็บไซต์ของคุณนั้นไม่มีที่สิ้นสุด เมื่อเรียนรู้และใช้เคล็ดลับเหล่านี้ คุณจะสามารถสร้างเว็บไซต์ที่ไม่เพียงแต่ดึงดูดสายตาเท่านั้น แต่ยังปรับแต่งเพื่อประสบการณ์การใช้งานที่ดีขึ้นอีกด้วย

ยกระดับทักษะ CSS ของคุณไปอีกขั้น

ไม่ว่าคุณจะเป็นมือใหม่หรือนักพัฒนาเว็บหรือนักออกแบบเว็บไซต์มืออาชีพที่ช่ำชอง หากคุณต้องการเจาะลึกการใช้ CSS กับ WordPress แบบฝึกหัด CSS เพิ่มเติมเหล่านี้จะช่วยเพิ่มพูนความรู้และทักษะของคุณ:

• 10 เคล็ดลับง่ายๆ ในการเรียนรู้ CSS สำหรับ WordPress – เคล็ดลับที่ใช้ได้จริงสำหรับผู้เริ่มต้นที่ต้องการเรียนรู้ CSS เพื่อใช้กับ WordPress โดยเฉพาะ ครอบคลุมทุกอย่างตั้งแต่การทำความเข้าใจไวยากรณ์ CSS ไปจนถึงการใช้กรอบงาน CSS
• การเรียนรู้และการอ้างอิง CSS สำหรับ WordPress – คำแนะนำที่ครอบคลุมเกี่ยวกับการเรียนรู้และการอ้างอิง CSS สำหรับใช้กับ WordPress โดยเฉพาะ ครอบคลุมหัวข้อต่างๆ เช่น การใช้ WordPress Customizer, การทำความเข้าใจตัวเลือก CSS และการทำงานกับธีมย่อย
• 7 ไซต์ที่ดีที่สุดในการค้นหา CSS Snippets และแรงบันดาลใจ – กำลังมองหาแรงบันดาลใจสำหรับโค้ด CSS ของคุณอยู่หรือเปล่า? บทความนี้แสดงรายชื่อเว็บไซต์เจ็ดแห่งที่มีตัวอย่าง CSS และตัวอย่างที่คุณสามารถใช้ในเว็บไซต์ WordPress ของคุณเองได้
• วิธีจัดรูปแบบรูปภาพบนเว็บไซต์ WordPress ด้วย CSS – รูปภาพเป็นส่วนสำคัญของทุกเว็บไซต์ และบทความนี้มีคำแนะนำเกี่ยวกับวิธีจัดรูปแบบโดยใช้ CSS คุณจะได้เรียนรู้วิธีเพิ่มเส้นขอบ เปลี่ยนขนาดและการจัดแนวรูปภาพ และอื่นๆ
• วิธีเพิ่ม CSS แบบกำหนดเองไปยังไซต์ WordPress ของคุณ – บทความนี้จะแนะนำคุณตลอดกระบวนการเพิ่ม CSS แบบกำหนดเองไปยังเว็บไซต์ WordPress ของคุณ โดยใช้ทั้ง Customizer และปลั๊กอินในตัว
• ปลั๊กอิน CSS ฟรีสำหรับการแก้ไขเว็บไซต์ WordPress แบบสด – บทความนี้แสดงรายการปลั๊กอิน CSS ฟรีบางส่วนที่ช่วยให้คุณสามารถแก้ไขเว็บไซต์ WordPress แบบสดได้ ทำให้ง่ายต่อการเห็นผลการเปลี่ยนแปลง CSS ของคุณแบบเรียลไทม์
• 14 เครื่องมือแอนิเมชั่น CSS ที่ยอดเยี่ยมสำหรับ WordPress – หากคุณต้องการเพิ่มแอนิเมชั่นให้กับเว็บไซต์ WordPress ของคุณโดยใช้ CSS บทความนี้จะแสดงรายการเครื่องมือเจ๋ง ๆ ที่คุณสามารถใช้ทำมันได้
• เพิ่มเค้าโครงอิฐและกริดไปยังไซต์ WordPress ของคุณโดยใช้ CSS – บทความนี้จะอธิบายวิธีใช้ CSS เพื่อเพิ่มเค้าโครงก่ออิฐและกริดให้กับเว็บไซต์ WordPress ของคุณ สร้างการออกแบบที่ดึงดูดสายตามากขึ้น
• คำแนะนำจากผู้เชี่ยวชาญ 25 ข้อสำหรับการเขียนโค้ด CSS ที่สะอาดขึ้นสำหรับ WordPress – หากคุณต้องการปรับปรุงความสะอาดและการอ่านโค้ด CSS ของคุณ บทความนี้มีคำแนะนำจากผู้เชี่ยวชาญ 25 ข้อในการทำเช่นนั้น
• 25 เคล็ดลับระดับมืออาชีพสำหรับการปรับปรุงเวิร์กโฟลว์ CSS ของคุณ – เคล็ดลับในการปรับปรุงเวิร์กโฟลว์ CSS ของคุณ ตั้งแต่การใช้ตัวประมวลผลล่วงหน้าของ CSS ไปจนถึงการใช้เครื่องมือสำหรับนักพัฒนาเบราว์เซอร์เพื่อดีบักโค้ดของคุณ

คลิกที่ลิงก์เพื่อเรียนรู้เพิ่มเติมและเริ่มปรับปรุงเว็บไซต์ WordPress ของคุณวันนี้

ผู้ร่วมให้ข้อมูล

ขอขอบคุณสมาชิก WPMU DEV Antoine จาก Incense สำหรับแนวคิดสำหรับโพสต์นี้และตัวอย่าง CSS หลายตัวอย่างที่ใช้ด้านบน ตรวจสอบโปรไฟล์พันธมิตรตัวแทนของ Incense สำหรับรายละเอียดเพิ่มเติม

***

หมายเหตุ: เราไม่ยอมรับบทความจากแหล่งภายนอก อย่างไรก็ตาม สมาชิก WPMU DEV อาจให้แนวคิดและคำแนะนำสำหรับบทช่วยสอนและบทความในบล็อกของเราผ่านทาง Blog XChange

เราพลาดเทคนิค CSS ดีๆ ที่คุณได้หยิบยกขึ้นมาหรือไม่? เราชอบที่จะเรียนรู้เกี่ยวกับพวกเขาในความคิดเห็น!