5 เทคนิค css ที่นักพัฒนาควรรู้

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

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

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

1 – ใส่ “…“ ต่อท้ายคำที่ยาวเกิน

ในบ้างสถานการณ์ข้อความที่ได้มาอาจยาวเกินกว่ารูปแบบที่เราต้องการ ตัวอย่างทั่วไปของผลิตภัณฑ์ที่มีชื่อยาวในร้านค้าอีคอมเมิร์ซ การมีข้อความมากกว่าสองบรรทัดจะไม่สอดคล้องกับการออกแบบเสมอไป เนื่องจากจะทำให้เราไม่มีพื้นที่สำหรับคำอธิบาย ตรวจสอบตัวอย่างในภาพด้านล่าง:

โดยส่วนใหญ่จะชอบการออกแบบที่แสดงด้านล่างมากกว่า เราจะมีพื้นที่เพียงพอสำหรับใส่คำอธิบายสั้นๆ หรือแม้แต่ปุ่มซื้อ

เพื่อให้บรรลุเป้าหมายนี้ เราจำเป็นต้องกำหนดค่า 3 อย่างนี้:

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

ตัวอย่าง

.shopping-item > .shopping-title {
    color: #017ADB;
    font-weight: bold;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

2 – เพิ่มเงา

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

หนึ่งในเอฟเฟกต์ที่เรียบง่ายแต่ทรงพลังที่สุดคือ box-shadow ตรวจสอบตัวอย่างด้านล่างเพื่อดูว่ามีประสิทธิภาพเพียงใด:

ตัวอย่างการใช้งาน

/* Box shadow properties */
box-shadow: h-offset v-offset blur color;
/* Box shadow example */
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);

4 – Buttons ที่สวยงาม

มีหลายวิธีในการบรรลุผลลัพธ์เดียวกันใน CSS เช่นเดียวกับในกรณีของภาษาการเขียนโปรแกรมใดๆ ซึ่งหมายความว่าอาจมีวิธีที่ดีกว่าในการทำสิ่งเดียวกันและบรรลุผลลัพธ์ที่เท่าเทียมกัน

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

จากบริบทของปุ่มนี้ มาดูกันว่าเราจะทำอะไรได้บ้างเพื่อทำให้ปุ่มของเราน่าดึงดูดยิ่งขึ้น:

• Size: หากต้องการให้ปุ่มคลิกได้บนอุปกรณ์มือถือ ควรมีขนาด 40×40 pixel
• Box-shadow: เราสามารถเพิ่ม box-shadow เพื่อสร้างเอฟเฟกต์ความลึกให้กับปุ่มได้
• Min-Width: เมื่อข้อความสั้นเกินไปในปุ่ม เราสามารถเพิ่ม min-width เพื่อให้มีขนาดต่ำสุดสำหรับปุ่ม นอกจากนี้ อย่าลืมใช้ text-align เพื่อจัดข้อความให้อยู่ตรงกลาง
• Hover: โฮเวอร์ทำให้ปุ่มของคุณโต้ตอบได้ เมื่อคุณเปลี่ยนสีของปุ่มบนเมาส์ คุณสามารถดึงดูดความสนใจของผู้ใช้ได้อย่างง่ายดาย
• Transitions: Transitions เพิ่มสัมผัสพิเศษเล็กๆ น้อยๆ ที่บ่งบอกว่าคุณเป็นมืออาชีพ โดยการเพิ่มการเปลี่ยนสี
• Round Corners: การเพิ่มมุมโค้งมนเล็กน้อยจะทำให้ปุ่มของคุณดูเป็นมิตรมากขึ้น (ตรวจสอบว่าสิ่งนี้สอดคล้องกับแนวทางแบรนด์ของคุณหรือไม่)
• Line-height: คุณเบื่อกับการพยายามจัดข้อความให้อยู่กึ่งกลางในแนวตั้งโดยใช้ปุ่มที่มีช่องว่างภายในหรือไม่ คุณควรลองใช้ความสูงของเส้น Line-height จะกำหนดช่องว่างระหว่างบรรทัด แต่ในกรณีของบรรทัดเดียวและองค์ประกอบที่มี display: block หรือ inline-block จะเป็นความสูงขององค์ประกอบ

ลองมาดูกันว่าโค้ดเป็นแบบไหน

button {
 margin: 20px;
 line-height: 50px;
 min-width: 150px;
 text-align: center;
 font-family: Arial, sans-serif;
 background-color: #FD310F;
 border-radius: 5px;
 color: #fff;
 border: 0;
 cursor: pointer;
 box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
 transition: background-color 0.3s ease-in-out;
}

button:hover {
 background-color: #FE712A;
}

5 – Button Bars

Button bars คือแถบที่เราจัดกลุ่มปุ่มด้วยการกระทำที่แตกต่างกัน โดยพื้นฐานแล้ว สิ่งเหล่านี้มีความสำคัญต่อการมีปฏิสัมพันธ์ แถบเหล่านี้มีหลายปุ่ม และโดยส่วนใหญ่ เราไม่แน่ใจเกี่ยวกับจำนวนปุ่มทั้งหมดหรือขนาดของแต่ละปุ่ม สิ่งสำคัญคือต้องยืดหยุ่นให้มากที่สุดในขณะที่เขียน CSS เพื่อให้คุณมีรูปแบบต่างๆ ได้มากที่สุด

ตอนนี้ เราต้องหาวิธีทำให้ปุ่มทำงานเป็นอิสระจากการจัดตำแหน่ง (กลาง ซ้าย ขวา) จำนวนปุ่ม และขนาดของแต่ละปุ่ม การวางแผน CSS ของคุณล่วงหน้าเป็นกุญแจสำคัญในการดึงความยืดหยุ่นประเภทนี้

ตัวอย่าง

<!--HTML-->
<div class="button-bar">
<button>Add to Cart</button>
<button>Buy Now</button>
</div>

// CSS
.button-bar {
text-align: right;
background-color: #000;
padding: 0 5px;
}
.button-bar button {
margin: 10px 5px;
display: inline-block;
}

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