CSS เด็ดๆ

[ณัฏฐ์]

 :0712:

[iannnnn]

เจอของดีอีกแล้วมาจาก Smashing Magazine
ดูตัวอย่างเลยดีกว่า แล้วค่อยอธิบาย

input:not([type="submit"]) {
   width: 200px;
   padding: 3px;
   border: 1px solid #000000;
   }

หรือ

.post p:not(.date) {
   font-size: 13px;
   }

ใช่แล้วครับ not แปลว่าไม่
ใช้ในกรณียกเว้นเฉพาะเจาะจงครับ

มีอย่างอื่นอีกเพียบเลยนะ แต่อ่านแล้วไม่รู้จะเอามาใช้ตอนไหนดี

[Layiji]

มันอะไรกันเนี่ย มีใส่สูตรกันด้วย 

[Ou!]

ชักจะงงว่าเมื่อไรใช้วงเล็บแบบไหน

[หนุ่ม]

มีอย่างอื่นอีกเพียบเลยนะ แต่อ่านแล้วไม่รู้จะเอามาใช้ตอนไหนดี

เช่นกัน

[i P i x e l]

... ตัดสินใจมาตั้งคำถามครับ ...
... หลังจากอ่านกระจู๋ 27 หน้านี้จนตาแฉะ (ยังไม่นับกระจู๋ css อื่น ๆ และใน อร่อย/css ของยักษ์แอน) ...
... และงมโข่งด้วยความสามารถอันล้นหลามของตัวเองมาหลายวันแล้ว ก็ยังทำไม่ได้ ...
... โจทย์ผมเป็นแบบนี้น่ะครับ ...



ดูเว็บจริงได้ที่ ชมรมคนรักเกาะสุรินทร์


... ไอ่ด้านซ้าย ทำได้แล้วครับ โดย set ค่า margin-left: -ขนาดรูป ...
... แต่ไอ่ด้านขวา พอใช้เทคนิคแบบเดียวกัน ตำแหน่งมันได้เหมือนกันครับ ...
... แต่ปัญหาของผมคือ มันมี horizontal scrollbar มากวนใจครับ ...
... เพราะมันมองว่า ไอ่ชิ้นที่เกินไปทางขวา เป็น content ของเว็บ ...
... พอจะมีวิธีมั้ยครับ ที่จะทำให้ h-scrollbar หายไป ...

[iannnnn]

อย่าไปแบ่งเป็นตารางๆ แบบ table ครับ
ให้ลืมวิธีแบบนั้นไปเลย

ถ้าเป็น table เนี่ยมันต้องตีกรอบเป็น 9 ช่องก่อน
แล้วค่อยซอยๆๆ เอาภาพฉากหลังไปวางถมให้เต็ม

แต่กับ css เนี่ย ให้ตั้งพื้นหลัง 1 ผืน ใหญ่ๆ ไปเลย
แล้วเอาผืนสีขาวไปวางตรงกลางให้มันลอยเคว้งๆ
(สั่งให้มัน margin:0 มันจะจัดกลางหน้าเองทั้งผืน)



เนี่ย คร่าวๆ แบบนี้ครับ


โอ๊ะ ขอโทษๆ (ปิด ฟตช ไปแล้วด้วย)
เพิ่งเห็นว่าพื้นหลังของด้านบนและด้านล่างเป็นภาพเดียว ไม่ได้ Repeat แนวนอน
ดังนั้นตรงการตั้งค่าภาพฉากหลังของทั้งสองอันให้เป็น

โค้ด เลือกทั้งหมด ขยายเนื้อหา

background:(xxx.jpg) top center no-repeat #5A93EA;

แทนนนะครับ

[i P i x e l]

... ถ้ามันจะเป็นแผ่นเดียว งั้นรูปมันก็ใหญ่บะเฮ้มเลยสิครับ ...
... กลัวจริง ๆ จะมีใครยังใช้เน็ทเต่า ๆ อยู่อีกมั้ยเนี่ย (ผมว่าตามองค์กรรัฐก็ยังมีนะ pc เต่า ๆ เน็ทเน่า ๆ) ...
... แต่ซุปเปอร์ง่ายเลยครับ คิดไม่ถึงเลย  หัวสมองยังคงถูกโลกของตารางครอบงำ เอิ๊ก  ...
... ขอบคุณทั่นป๋าซุ่มแอนมากคับ ...

[iannnnn]

ถ้าย้อนไปหน้าแรกๆ ก็จะพบว่าตูยังคิดแบบตารางเอามาใช้กะ css อยู่เหมือนกันนะ
ก็เพิ่งมาหัดเอาตอนที่สนใจจริงจังนี่แหละครับ

ส่วนเรื่องภาพใหญ่ไม่ใหญ่นั้น ก็ต้องลองหาวิธี Optimize ภาพเอาครับ (เช่นโปรแกรม Roit)
ภาพฉากหลังขนาดไม่เกินร้อยเค ก็น่าจะพอไหวนะสำหรับเน็ตปัจจุบัน

[iannnnn]

เบิ้ลจ้ะ



ดีใจมาก ที่ตะกี้นั่งแกะไอ้นี่มาสำเร็จ

http://www.fremontoktoberfest.com/

สังเกตตรง Sidebar สีเหลืองด้านขวานะครับ
คือตูหาวิธีทำกล่องข้อความที่เป็น(ภาพ)ขอบมนมานานแล้ว
บางวิธีก็โอเคนะ แต่บางวิธีอ่านแล้วงงมาก
จนมาเจออันนี้ เออ ง่ายดีวุ้ย แถมใช้ฉากหลังภาพเดียวเที่ยวรอบโลกด้วย

สังเกตไตเติ้ลของแต่ละกล่อง เป็นชื่อกล่องคนละชื่อกัน
แต่นั่นแหละ ตัดส่วน (Sprite) มาจากภาพเดียวกัน


อ้ะ นี่คือวิธีทำครับ

HTML

โค้ด เลือกทั้งหมด ขยายเนื้อหา


<div id="boxbox">
<div id="twitter" class="boxbox-box">
<h1>Twitter</h1>
<div class="boxbox-content">กล่อง</div>
</div>
</div>



CSS

โค้ด เลือกทั้งหมด ขยายเนื้อหา

body {background:#4D241C; color:#621; font-size:13px;}
/* กำหนดสีกับฟอนต์เฉยๆ */

#boxbox { width: 240px; float:left;}
/* กำหนดขนาดกล่อง และการจัดวาง */

#boxbox .boxbox-box { background: transparent url(box.png) repeat-y center; }
/* กำหนดพื้นหลังเป็นภาพเดียวกันทำซ้ำไปเรื่อยๆ ในแนวตั้ง--สังเกตภาพต้นฉบับว่าคัดมาแค่พิกเซลกลางๆ ที่ความกว้างเท่ากล่อง */

#boxbox .boxbox-content { min-height: 60px; background: transparent url(box.png) no-repeat bottom left; }
/* กำหนดพื้นหลังส่วนล่างของกล่อง สังเกตว่าดึงส่วนซ้ายล่างของภาพมาใช้  */

#boxbox h1 { width: 240px; height: 37px; margin: 0 0 20px 0; text-indent: -9999px; }
/* อันนี้เป็นไตเติ้ลของกล่อง กำหนดแค่ขนาดพื้นที่ของมันเฉยๆ  */

#twitter h1 { background: transparent url(box.png) no-repeat top right; }
/* กำหนดพื้นหลังของไตเติ้ล */

#twitter .boxbox-content { padding: 0 20px 20px 20px; }
/* อันนี้กำหนดระยะห่างจากขอบกล่องถึงเนื้อหา  */



ผลที่ได้ก็ตามไฟล์แนบเลยครับ แกะมาให้สำเร็จละ

[Layiji]

  ขอลอกๆ

[iannnnn]

http://www.barelyfitz.com/screencast/html-training/css/positioning/
อธิบายเรื่อง CSS Position แบบเห็นปุ๊บเข้าใจทันที
มีเรื่อง position แล้วก็ float ด้วยนะจ๊ะ

[Bellbells]

  กรี้ดดดดดดดดด

[กากก่อเกรียนนู้บ]

กรี้ดดดดดดดดด

[iannnnn]

http://webdeveloperplus.com/css/25-incredibly-useful-css-tricks-you-should-know/
25 ทิปน่ารู้ครับ
มีเรื่องที่เราสงสัยๆ กันหลายอย่างเลยนะ