CSS เด็ดๆ

[หนุ่ม]

อืม ไม่คิดว่ามันจะง่ายขนาดนี้

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

ไปเจอมาจ้ะ

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

.post img {
    max-width: 500px;
    height: auto;
}


จำกัดความกว้างของภาพ(ที่แปะในหน้าบล็อก) ไม่ให้กว้างเกินที่กำหนดไว้
กันหลุดขอบไง

กรี๊ดด ใช้กับ exteen ได้ใช่ไหมครับ กรี๊ดดด
(หรือว่าต้องแก้ชื่อคลาสอีกทีนึงครับ?)

[iannnnn]

แก้เป็นชื่อคลาสของโพสต์ในเอนทรี่นั้นแหละจ้ะ
(ไทยคำอังกฤษสองคำมากๆ)

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

ขอบคุณครับ บวกพี่แอนเลย

[ยุนเอ]

css ใช้เวลาต้องการเปลี่ยนรูปเวลา mouse ไป rollover ได้รึเปล่าอะครับ

[Zafire06]

ได้ครับ
โดยกำหนดเป็น background

เช่น
HTML:

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

<a id="image"></a>

CSS:

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

a {
display:block;
width:50px; height:50px;
background:url(image.gif) no-repeat;
}
a:hover {
background-image:url(image_rollover.gif);
}


(อย่างไรก็ตาม การทำแบบนี้จะทำให้ตอนเอาเคอร์เซอร์ไปวางแล้วยังต้องรอโหลดอีกแป๊บหนึ่ง
จึงอาจจะรวมทั้งสองภาพไปอยู่ในภาพเดียวกันแล้วให้มันเปลี่ยน background-position แทน)

[โตน]

ลองรวมทั้งสองภาพไปอยู่ในภาพเดียวกันแล้วให้มันเปลี่ยน background-position ดู

ง่อยมาก เอาไปเล่นดูได้
http://www.mediafire.com/download.php?nwyymlogn2y

[ยุนเอ]

ไอรวมทั้งสองภาพไปอยุ่ในภาพเดียวกันนี้เป็นยังไงอะครับ 

ทำยังงี้แสดงว่า ถ้ามีปุ่มซักห้าแบบก็ควรจะมี 5 id เพื่อ :hover 5 รูปรึเปล่าอะครับ

[iannnnn]

แบบนี้ ตัวอย่างนะ
ลองเอาเมาส์ชี้ดู

ทดสอบปุ่มจ้ะ

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

<style type="text/css">
<!--
.test a{
background:#565656 url(http://www.f0nt.com/bg08.gif) repeat-x 0 0;
text-decoration:none; color:#fff; text-align:center;
width:300px; line-height:200px; display:block;
}
.test:hover a{
background:#565656 url(http://www.f0nt.com/bg08.gif) repeat-x 0 -50px ;
}
-->
</style>

<p class="test">
<a>ทดสอบปุ่มจ้ะ</a>
</p>


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

อ้อ ใน css เนี่ย
เวลาเรากำหนดการออกแบบยิบย่ิอย ให้กำหนดใส่ใน .class นะ
ส่วน #id นี่เอาไว้ระบุชิ้นอวัยวะใหญ่ๆ หรือระบุขอบเขตก็พอ
(แต่ตูก็ยังเขียนสลับกันบ่อยๆ อยู่ดี)

[JΛNΣ]

เอ้อ ตกลง class กับ id ใช้ต่างกันยังไงครับ
ตอนนี้ใช้มั่วไปหมด 

[iannnnn]

ตูก็ใช้มั่ว
คือถ้าตามหลักอนามัยมันต้อง ID ไว้บอก "ชิ้น" หรือ "ขอบเขต" ใหญ่ๆ
ส่วน Class เอาไว้บอกดีไซน์ครับ

การกำหนดถ้าตามหลักที่ดีมันจะต้อง
<div id="xxx" class="yyy">...</div>

(ใส่ทั้งคู่ แม้จะเป็นการประกาศแค่ ID ก็ตาม)
แล้วใน css เนี่ย บอกแค่ว่า id นี้มันอะไรยังไงที่ไหน
แต่ใน class ต้องบอกขนาดสีสันฟอนต์เฟิ้น
โดยที่ จะ ต้อง ไม่ ใส่ ดีไซน์ ลง ใน ID นะ ครับ


ซึ่งตูก็ยังใช้มั่วมาตลอด

[ยุนเอ]

อ๋อ เข้าใจเรื่อง position ละ

แต่เว็บเทพเขาคงอยาให hover แล้วเปลี่ยนสีไปเลย

คาดว่าน่าจะใช่แบบ เร่ละครับ

[iannnnn]

เฮ้ย เปลี่ยนสีใช้ภาพเดียวกันก็ได้นะเอ (แนะนำกว่าวิธีใช้ 2 ภาพด้วยแหละ)
ลองเปิด กกรด ก็ได้ แล้วดูพวกไอคอนต่างๆ ละกัน
(ไม่รู้กดดูจากลิงก์นี่ได้เลยไหม)

https://www.google.com/reader/ui/972236033-lhn-sprite.png
https://www.google.com/reader/ui/3728287201-entry-action-icons.png

พี่แกเล่นใช้ภาพเดียวสารพัดประโยชน์กันไปข้างนึงเลย เมพไหมล่ะ

[iannnnn]

มีอีก 2 เทคนิค CSS3 ครับ

การกำหนดค่าสีพร้อมกับความใส

#networks li a:hover,
#networks li a:focus {
   background: rgba(164, 173, 183, .15);
   }

When setting an RGBA color, we must specify the red, blue and green values either with an integer value between 0 and 255 or with percentages. The alpha value should be between 0.0 and 1.0; for example, 0.5 for a 50% opacity.

The difference between RGBA and opacity is that the former applies transparency only to a particular element, whereas the latter affects the element we target and all of its children.

Here is an example of how we would add 80% opacity to a div:

div {
   opacity: 0.8;
   }

Browser support: RGBA is supported by Webkit-based browsers. No Internet Explorer browser supports it. Firefox 2 does't support it either, but Firefox 3 does, as does Opera 9.5. Opacity is supported by Opera and Webkit- and Gecko-based browsers, but is not supported by either IE release.

กับอีกอันคือใส่เงาให้กับข้อความ

The CSS for the website's main navigation shows the following:

.signup_area p {
   text-shadow: rgba(0,0,0,.8) 0 1px 0;
}

Here, we have the shadow color (using RGBA, see above), followed by the right (x coordinate) and bottom (y coordinate) offset, and finally the blur radius.

To apply multiple shadows to a text, separate the shadows with a comma. For example:

p {
   text-shadow: red 4px 4px 2px,
      yellow -4px -4px 2px,
      green -4px 4px 2px;
   }

Browser support: Webkit-based browsers and Opera 9.5 support text-shadow. Internet Explorer doesn't support it, and Firefox will only support it in version 3.5.

ตูเกลียดมัน

แล้วก็อื่นๆ อีกเพียบเลย ที่ http://www.smashingmagazine.com/2009/06/15/take-your-design-to-the-next-level-with-css3/
ดูแล้วน่าตื่นตาตื่นใจระคนสมเพชเวทนาคนใช้ IE มากๆ ครับ

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

กรี๊ดด ตอนนี้เค้าเริ่มใช้กันแล้วใช่ไหมครับ css3 เนี่ย
น่าเล่นมากๆ