เคล็ดไม่รับกับรูปแบบและต้วอย่างการเริ่มต้นใช้งาน Css


ก่อนหน้านี้มีหนึ่งบทความ “[เด็ด] พื้นฐานการเขียนเว็บด้วย Css มีทั้งปุ่มและลิ้ง” เราเห็นวิธีการที่สามารถสร้างชุดของ Classes  เพื่อช่วยให้กระบวนการออกแบบในการทำเว็บไซต์ วันนี้เราจะได้เห็นวิธีการที่เราสามารถนำเอาไปเป็นต้นแบบการใช้งานของเราได้บ้างอย่างละนิด ๆ อย่างละหน่อย ๆ บางเทคนิคเพื่อเพิ่มเติม

Css ถือเป็นการสร้างคำสั่งและนำมาเรียกใช้งานเพื่อง่ายต้อการใช้งานอย่างเช่นถ้าเราต้องการตัวหนังสือสีฟ้าเราก็เรียกใช้ Css ขึ้นมาแต่เมื่อเราหรือลูกค้าบอกว่าไม่เอาสีฟ้าได้ไหมเปลี่ยนเป็นสีแดงแต่เราไม่ได้กำหนดเป็น Classes ได้ที่นี้จะทำไงมีถ้าเรามีตัวหนังสือแบบนี้ 10-100 จุดเราจะต้องไปนั่งเปลี่ยนทุกจุดแต่ถ้าเรากำหนดเป็น classes ของ Css ได้เราก็สามารถเปลี่ยนที่เดียวในส่วนของ Css ที่เราใช้ที่แรกจากฟ้าเป็นแดง นั้นเอง สรุปคือ Css ไม่ได้ช่วยในเรื่องของการออกแบบเพียงอย่างเดียวแต่สามารถช่วยในส่วนของ font สี link และอื่นที่อยู่ในเว็บเรานั้นเองใครที่ศึกษาหรือลองใช้ Css แบบจริงๆจังๆผมว่าได้เปรียบในเรื่องการทำเว็บไซต์แน่นอนครับ

ก่อนที่เราจะไปให้ฉันบอกคุณว่าผมแบ่งบทความนี้
แบบเรียนชวเลข (Shorthand classes)
เกร็ดเล็กเกร็ดน้อยที่เกี่ยวข้องกับการออกแบบ (Design-related snippets)
เกร็ดเล็กเกร็ดน้อยที่เกี่ยวข้องกับการพัฒนา (Development-related snippets)

แบบเรียนชวเลข (Shorthand classes)

เรามาเริ่มต้นกับการเรียนชวเลขซึ่งเป็นสิ่งที่พบบ่อยมากหลายส่วนคือการช่วยให้การทำงานรวดเร็วมากยิ่งขึ้นโดยการกำหนดเป้าหมายด้วยองค์ประกอบ selectors
ตัวอย่างที่ดีที่สุดน่าจะเป็นหนึ่งที่คุณมีข้อความบางส่วนและภาพที่คุณต้องการให้มันไปอยู่ที่ด้านซ้ายของข้อความ คุณสามารถกำหนดเป้าหมายภาพโดยตรงในบริบท (Class /ID)

1
2
3
4
5
6
.float-left /* Or whatever name you like */ {
float: left;
}
.float-right /* Or whatever name you like */ {
float: right;
}


ไม่ยากใช่ไมครับเรากลับมาที่ตัวอย่างของเราต่อ: เราจะมาสร้างมาร์คอัปที่จะเอาไปใช้สำหรับแทรกภาพ peasy ง่ายๆ

1
2
3
4
5
6
.hide {
display: none;
}
.show {
display: block;
}


โดยถ้าเราต้องการที่จะซ่อนหรือไปต้องการที่จะแสดงและไม่แสดงสิ่งที่คุณต้องการเราก็สามารถใช้คำสั่ง Css ในส่วนนี้ได้ด้วย display: none;


เกร็ดเล็กเกร็ดน้อยที่เกี่ยวข้องกับการออกแบบ


ถ้าคุณได้อ่าน”[เด็ด] พื้นฐานการเขียนเว็บด้วย Css มีทั้งปุ่มและลิ้ง“คุณรู้อยู่แล้วว่าตัวอย่างบางส่วนของตัวอย่างที่เกี่ยวข้องกับการออกแบบ เหล่านี้จะผมจะไม่ขอแนะนำมากครับสามารถตั้งค่ากับองค์ประกอบของตัวโปรแกรมที่คุณใช้เขียนได้ง่ายโดยการเขียน Css ในส่วนนี้เราจะเขี่ยนดพียงไม่กี่ตัวครับเพราะมันเหมือนจะเป็นตัวพื้นฐานว่าเว็บเราจะใช้ Font อะไร ขนาดไหนเราจะมาดูกันเลยดีกว่า
เริ่มต้นด้วย รูปแบบตัวอักษร ที่เราจะสร้างเพื่อใช้ในเว็บไซต์และขนาดโดยสร้างเป็นชุดคำสั่งโดยชุดคำสั่งที่ใช้บ่อยและน่าสนใจคือ font-size, line-height และแบบอักษร

1
2
3
4
5
6
7
8
9
content {
font: 1em/1.4 Segoe, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}
.title {
font: 1.7em/1.2 Baskerville, "Baskerville old face", "Hoefler Text", Garamond, "Times New Roman", serif;
}
.code {
font: 0.8em/1.6 Monaco, Mono-Space, monospace;
}

ตัวอย่างเ การใช้ Css ในการกำหนดพิกัดการทำงาน

1
2
3
4
.disabled {
pointer-events: none;
opacity: 0.5;
}

อีกหนึ่งตัวอย่างที่ง่ายมากการใช้ประโยชน์จากตัวเลือกที่มีประสิทธิภาพ CSS ตัวอย่างที่รู้จักกันดีที่จะให้ตาราง

1
2
3
table tr:nth-child(even) {
background: rgba(0,0,0,0.1);
}

ตัวอย่างการออกแบบการเชื่อมโยง(link)

1
2
3
4
5
6
7
8
9
a {
text-decoration: none;
color: #08C;
transition: all 0.3s ease-out;
position: relative;
padding: .5em;
margin: -.5em;
}
a:hover { color: #0AF; }

เกร็ดเล็กเกร็ดน้อยที่เกี่ยวข้องกับการพัฒนา

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


ตัวอย่างแรกเป็นเรื่องง่ายมาก คุณอาจจะเคยเห็นมาหลายครั้งโดยเฉพาะอย่างยิ่งตั้งแต่พอลไอริชการกระตุ้นให้คนที่จะใช้มัน

1
2
3
4
5
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
1
2
3
4
5
6
7
8
9
10
11
12
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
/* IE6/7 support */
.clearfix {
*zoom: 1;
}

ดาวน์โหลด…..!!!


ขอบคุณข้อมูลจาก tympanus.net/codrops

Comments

comments

Powered by Facebook Comments