|
หัวข้อ: ใครเก่ง css ช่วยที เริ่มหัวข้อโดย: pn000000 ที่ 24 ตุลาคม 2013, 22:10:10 (http://image.free.in.th/v/2013/ii/131024100554.png)
โค๊ดรูปหมายเลข 1 ผมใส่แบบนี้ background-image:url('head_oragne25.png'); background-repeat:repeat-x; (http://image.free.in.th/v/2013/iz/131024101017.png) แล้วโค๊ดรูปหมายเลข 2 จะใส่ต่อท้ายดังภาพยังไงครับ หัวข้อ: Re: ใครเก่ง css ช่วยที เริ่มหัวข้อโดย: wasantec ที่ 24 ตุลาคม 2013, 22:55:22 สร้าง class css ขึ้นมาอีกอัน background-image:url('head_orange25_2.png'); background-repeat: no-repeat; หัวข้อ: Re: ใครเก่ง css ช่วยที เริ่มหัวข้อโดย: ballentertain ที่ 24 ตุลาคม 2013, 22:56:46 ถ้าจะใช้รูปทำในส่วนนั้น ก็แนะนำเป็น :after และ content: ครับ
.myclass { background-image:url('head_oragne25.png'); background-repeat:repeat-x; } .myclass:after { content:url('head_oragne25_2.png'); width: px; height: px; /*อื่นๆ เพิ่มเติมตามความเหมาะสม*/ } อ้างอิง - CSS content Property http://www.w3schools.com/cssref/pr_gen_content.asp - CSS Selector Reference http://www.w3schools.com/cssref/css_selectors.asp ถ้าจะใช้ CSS3 ทั้งหมดก็แนะนำเครื่องมือดังนี้ครับ - พื้นหลังไล่สี http://www.colorzilla.com/gradient-editor/ - ขอบโค้งมน http://border-radius.com/ - เครื่องมือ CSS3 อื่นๆ http://css3generator.com/ หัวข้อ: Re: ใครเก่ง css ช่วยที เริ่มหัวข้อโดย: pn000000 ที่ 24 ตุลาคม 2013, 23:52:34 ถ้าจะใช้รูปทำในส่วนนั้น ก็แนะนำเป็น :after และ content: ครับ .myclass { background-image:url('head_oragne25.png'); background-repeat:repeat-x; } .myclass:after { content:url('head_oragne25_2.png'); width: px; height: px; /*อื่นๆ เพิ่มเติมตามความเหมาะสม*/ } อ้างอิง - CSS content Property [url]http://www.w3schools.com/cssref/pr_gen_content.asp[/url] - CSS Selector Reference [url]http://www.w3schools.com/cssref/css_selectors.asp[/url] ถ้าจะใช้ CSS3 ทั้งหมดก็แนะนำเครื่องมือดังนี้ครับ - พื้นหลังไล่สี [url]http://www.colorzilla.com/gradient-editor/[/url] - ขอบโค้งมน [url]http://border-radius.com/[/url] - เครื่องมือ CSS3 อื่นๆ [url]http://css3generator.com/[/url] ผมใส่แบบนี้ครับ แต่รูปที่ 2 ก็ยังไม่ขึ้น ขึ้นเรียงยาวไปแต่รูปที่ 1 .myclass { background-image:url('head_oragne25.png'); background-repeat:repeat-x; width:600px; } .myclass:after { content:url('head_oragne25_2.png'); background-repeat:no-repeat; } หัวข้อ: Re: ใครเก่ง css ช่วยที เริ่มหัวข้อโดย: lungkao ที่ 25 ตุลาคม 2013, 01:06:21 ถ้าใช้ css3
โค๊ด: .myclass {หัวข้อ: Re: ใครเก่ง css ช่วยที เริ่มหัวข้อโดย: pn000000 ที่ 25 ตุลาคม 2013, 07:13:46 ถ้าใช้ css3 โค๊ด: .myclass {งงครับ หัวข้อ: Re: ใครเก่ง css ช่วยที เริ่มหัวข้อโดย: qwert001 ที่ 25 ตุลาคม 2013, 08:56:00 ถ้าเป็นผม..เอาง่ายๆก็เปลี่ยนรูป head_orange25.png ให้เป็น (http://www.thaihomeads.com/images/Untitled-2.jpg) background-image:url('head_oragne25.png') bottom right; padding-right:25px; ประมาณนี้ครับ หัวข้อ: Re: ใครเก่ง css ช่วยที เริ่มหัวข้อโดย: sys2528 ที่ 25 ตุลาคม 2013, 09:16:30 ถ้าเป็นผม..เอาง่ายๆก็เปลี่ยนรูป head_orange25.png ให้เป็น ([url]http://www.thaihomeads.com/images/Untitled-2.jpg[/url]) background-image:url('head_oragne25.png') bottom right; padding-right:25px; ประมาณนี้ครับ ถ้ามีการกำหนดตายตัวว่าต้องสูงและยาวเท่านี้ก็ใช้แบบนี้ได้ครับผม แต่ถ้ายืดหยุ่นตาม Text ก็ต้องให้ Box ตัวหนังสือเป็น bg รูปหนึ่ง และ ที่โค้งๆ อีกรูปหนึ่งครับ หัวข้อ: Re: ใครเก่ง css ช่วยที เริ่มหัวข้อโดย: qwert001 ที่ 25 ตุลาคม 2013, 09:22:12 ถ้าเป็นผม..เอาง่ายๆก็เปลี่ยนรูป head_orange25.png ให้เป็น ([url]http://www.thaihomeads.com/images/Untitled-2.jpg[/url]) background-image:url('head_oragne25.png') bottom right; padding-right:25px; ประมาณนี้ครับ ถ้ามีการกำหนดตายตัวว่าต้องสูงและยาวเท่านี้ก็ใช้แบบนี้ได้ครับผม แต่ถ้ายืดหยุ่นตาม Text ก็ต้องให้ Box ตัวหนังสือเป็น bg รูปหนึ่ง และ ที่โค้งๆ อีกรูปหนึ่งครับ อันนี้ก็ยืดหยุ่นนะครับ ผมใช้ประจำ แต่ต้องทำรูปให้ยาวๆเผื่อไว้หน่อย รูปพื้นหลังจะชิดขวาตลอด ดังนั้นไม่ว่าจะยืดหรือหดก็จะเห็นมุมโค้งตลอดครับ :P หัวข้อ: Re: ใครเก่ง css ช่วยที เริ่มหัวข้อโดย: ttong ที่ 25 ตุลาคม 2013, 10:29:36 ลองแบบนี้ดูครับ
โค๊ด: <style type="text/css"> หัวข้อ: Re: ใครเก่ง css ช่วยที เริ่มหัวข้อโดย: MD.18 ที่ 25 ตุลาคม 2013, 10:48:35 จับให้มันโค้งขวาบน น่าจะง่ายกว่า
.title-bg{ color:#151515; min-width:200px; min-hight:60px; text-align:left padding:10px; background-image: url('head_oragne25.png')repeat-x left top; border-top-right-radius:2em; float:left; } :wanwan019: น่าจะประมาณนี้ แนะนำทำรูปแบบ css sprite จะมีผลดีมากกว่าทำรูปออกมาเป็นหลาย ๆ ไฟล์ ครับ โหลดครั้งเดียวเสร็จทั้งเว็บ หัวข้อ: Re: ใครเก่ง css ช่วยที เริ่มหัวข้อโดย: ballentertain ที่ 25 ตุลาคม 2013, 14:48:01 ถ้าจะใช้รูปทำในส่วนนั้น ก็แนะนำเป็น :after และ content: ครับ .myclass { background-image:url('head_oragne25.png'); background-repeat:repeat-x; } .myclass:after { content:url('head_oragne25_2.png'); width: px; height: px; /*อื่นๆ เพิ่มเติมตามความเหมาะสม*/ } อ้างอิง - CSS content Property [url]http://www.w3schools.com/cssref/pr_gen_content.asp[/url] - CSS Selector Reference [url]http://www.w3schools.com/cssref/css_selectors.asp[/url] ถ้าจะใช้ CSS3 ทั้งหมดก็แนะนำเครื่องมือดังนี้ครับ - พื้นหลังไล่สี [url]http://www.colorzilla.com/gradient-editor/[/url] - ขอบโค้งมน [url]http://border-radius.com/[/url] - เครื่องมือ CSS3 อื่นๆ [url]http://css3generator.com/[/url] ผมใส่แบบนี้ครับ แต่รูปที่ 2 ก็ยังไม่ขึ้น ขึ้นเรียงยาวไปแต่รูปที่ 1 .myclass { background-image:url('head_oragne25.png'); background-repeat:repeat-x; width:600px; } .myclass:after { content:url('head_oragne25_2.png'); background-repeat:no-repeat; } จะขึ้นให้ได้ไงละครับ เนื่องจากคุณไม่ได้ระบุ ความกว้าง กับ ความสูง ลงไปเลยครับผม .myclass:after กำหนด ค่านี้ด้วยครับ width: ความกว้างของรูปpx; height: ความสูงของรูปpx; background-repeat:no-repeat; เอาออกก่อนครับ หัวข้อ: Re: ใครเก่ง css ช่วยที เริ่มหัวข้อโดย: ballentertain ที่ 25 ตุลาคม 2013, 14:59:35 ถ้าใช้ css3 โค๊ด: .myclass {งงครับ จากโค้ดข้างต้น ถ้ากำหนด width และ height เข้าไป มันก็จะแสดงพื้นหลังไล่สี ออกมาครับ ตัวอย่าง HTML <div class="myclass">ใส่ข้อมูลตามความต้องการ</div> CSS .myclass { background: rgb(253,169,45); background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…IgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=); background: -moz-linear-gradient(top, rgba(253,169,45,1) 0%, rgba(253,169,45,1) 48%, rgba(230,144,16,1) 89%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(253,169,45,1)), color-stop(48%,rgba(253,169,45,1)), color-stop(89%,rgba(230,144,16,1))); background: -webkit-linear-gradient(top, rgba(253,169,45,1) 0%,rgba(253,169,45,1) 48%,rgba(230,144,16,1) 89%); background: -o-linear-gradient(top, rgba(253,169,45,1) 0%,rgba(253,169,45,1) 48%,rgba(230,144,16,1) 89%); background: -ms-linear-gradient(top, rgba(253,169,45,1) 0%,rgba(253,169,45,1) 48%,rgba(230,144,16,1) 89%); background: linear-gradient(to bottom, rgba(253,169,45,1) 0%,rgba(253,169,45,1) 48%,rgba(230,144,16,1) 89%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fda92d', endColorstr='#e69010',GradientType=0 ); -webkit-border-top-right-radius: 30px; -moz-border-radius-topright: 30px; border-top-right-radius: 30px; height: 30px; width: 100%; } หมายเหตุ ต้องขออภัยคุณ lungkao ด้วยนะครับ ที่ผมตอบตัดหน้าคุณไป ผมลืมดูครับ ว่าเป็นคำแนะนำของคุณ ตอนแรกผมคิดว่าเจ้าของกระทู้เขาใส่โค้ดมาแบบนั้นแล้วมันไม่แสดงผลครับ ผมเลยต่อให้ครับ ขอโทษด้วยครับ |