ในการปรับปรุงรูปภาพเราสามารถเลือกที่จะทำด้วย Photoshop แล้วติดตั้งบนหน้าเว็บหรือเราสามารถเลือกตัวเลือก B: โดยใช้เทคนิค HTML, CSS และ Javascript ที่พร้อมใช้งาน
หลังจากการกระโดดมีเทคนิคมากมายในการปรับปรุงภาพเกือบทั้งหมดทำด้วย jQuery เป็นฐานหลักหรือใช้ CSS3 ใช้ประโยชน์จากมาตรฐานเว็บล่าสุดแม้ว่าฉันจะเตือนคุณว่าในกรณีนี้เราสูญเสียความเข้ากันได้กับเบราว์เซอร์บางตัว
พวกเขาเป็นภาษาอังกฤษ แต่พวกเขาถูกจับได้ทันทีสัญญา :)
ที่มา | 1WD
CSS3 ปัดเศษภาพด้วย jQuery
เรียนรู้การห่อแท็กช่วงรอบองค์ประกอบภาพเพื่อให้ได้ภาพที่โค้งมนซึ่งจะแสดงในเบราว์เซอร์สมัยใหม่ทั้งหมด
2.
พื้นหลังและเส้นขอบหลายแบบด้วย CSS 2.1
เรียนรู้วิธีใช้องค์ประกอบหลอก CSS 2.1 เพื่อจัดเตรียมผืนผ้าใบพื้นหลังได้สูงสุด 3 ภาพภาพนำเสนอขนาดคงที่ 2 ภาพและเส้นขอบที่ซับซ้อนหลายเส้นสำหรับองค์ประกอบ HTML เดียว
3.
เคล็ดลับง่ายๆ: หลายพรมแดนด้วย Simple CSS
การแคสต์หน้าจอด่วนแสดงให้คุณเห็นถึงวิธีการบรรลุเส้นขอบที่หลากหลายด้วย CSS ง่ายๆซึ่งช่วยเพิ่มความลึกให้กับการออกแบบของคุณมากขึ้น บทช่วยสอนก่อนหน้านี้ที่ง่ายกว่ามาก
4.
เส้นขอบหลายเส้นบนองค์ประกอบที่ปรับขนาดแบบไดนามิกด้วย CSS2
รุ่นที่สามของ นิโคลัส กัลลาเกอร์ แสดงสิ่งที่ต้องทำหากคุณไม่มีขนาดขององค์ประกอบ
5.
สนุกไปกับพรมแดน - เอียงกดและอื่น ๆ !
เรียนรู้วิธีบรรลุเอฟเฟกต์กดด้วย CSS และเคล็ดลับสไตล์เส้นขอบง่ายๆเพื่อรับเอฟเฟกต์ต่างๆ
6.
Polaroids ด้วย CSS3
เรียนรู้วิธีใช้ CSS2 และ CSS3 ที่ยอดเยี่ยมเพื่อเปลี่ยนรายการรูปภาพที่ไม่น่าเชื่อให้เป็นชุดรูปภาพโพลารอยด์
7.
ภาพพื้นหลังเต็มหน้าสมบูรณ์แบบ
เรียนรู้วิธีการเพิ่มภาพพื้นหลังด้วย CSS ที่เติมรูปภาพทั้งหน้าไม่มีช่องว่างปรับขนาดภาพตามต้องการไม่ทำให้แถบเลื่อนและอื่น ๆ อีกมากมาย
8.
CSS3 Box Shadow และ Image Hover Effects
สำรวจวิธีใหม่ในการเพิ่มเอฟเฟกต์เงาตกกระทบเพียงแค่แก้ไขสไตล์ชีต
9.
แฟนซี Thumbnail Hover Effect w / jQuery
สร้างเอฟเฟกต์รูปแบบแฟลชด้วย CSS และ jQuery
10.
วิธีการสร้างเอฟเฟกต์การโรลโอเวอร์รูปภาพ CSS
ในบทช่วยสอนนี้คุณจะได้เรียนรู้วิธีสร้างเอฟเฟกต์ภาพแบบโรลโอเวอร์ CSS แบบง่ายๆด้วยสไตล์ HTML และ CSS พื้นฐาน
11.
กวดวิชา
Floatutorial จะนำคุณไปสู่พื้นฐานขององค์ประกอบแบบลอยเช่นรูปภาพดร็อปแคปปุ่มถัดไปและย้อนกลับแกลเลอรีรูปภาพรายการอินไลน์และเลย์เอาต์แบบหลายคอลัมน์ ดู 4 บทช่วยสอนสำหรับภาพลอย
12.
Snazzy Hover Effects โดยใช้ CSS
ในบทช่วยสอนนี้คุณจะได้เรียนรู้การสร้างเทคนิคการวางเมาส์ขั้นสูงที่ยืดหยุ่นโดยใช้คุณสมบัติ CSS2.1
13.
โรลโอเวอร์อย่างรวดเร็วโดยไม่ต้อง
โหลดล่วงหน้า
เมื่อใช้การโรลโอเวอร์รูปภาพ CSS ต้องโหลดรูปภาพสองสามภาพขึ้นไป (และมักจะโหลดไว้ล่วงหน้าเพื่อผลลัพธ์ที่ดีที่สุด) เรียนรู้วิธีใส่สถานะทั้งหมดลงในภาพเดียวทำให้การเปลี่ยนแปลงแบบไดนามิกเร็วขึ้นและไม่ต้องโหลดล่วงหน้า
14.
jQuery มุมมน
เอฟเฟกต์ jQuery มากมายสำหรับมุมโค้งมนและลวดลายอื่น ๆ อีกมากมาย
15.
คำแนะนำเครื่องมือและภาพตัวอย่างที่ง่ายที่สุดโดยใช้ jQuery
ดู 3 ตัวอย่างของการใช้สคริปต์ตัวอย่าง jQuery rollover สคริปต์ง่ายๆนี้สามารถนำไปใช้เพื่อวัตถุประสงค์ที่หลากหลาย
16.
Supersized - พื้นหลังเต็มหน้าจอ /
สไลด์โชว์
jQuery ปลั๊กอิน
Superzided เป็นปลั๊กอิน jQuery ที่ปรับขนาดรูปภาพเพื่อเติมเบราว์เซอร์ในขณะที่รักษาอัตราส่วนขนาดภาพและวนรอบรูปภาพ / พื้นหลังผ่านสไลด์โชว์พร้อมการเปลี่ยนและการโหลดล่วงหน้า
17.
ภาพซ้อนทับ PNG
คุณเคยประสบปัญหาในการสร้างไซต์ด้วยรูปภาพที่ลูกค้ามอบให้ แต่จะพบในภายหลังหลังจากที่พวกเขาอัปเดตรูปภาพแล้วรูปลักษณ์และความรู้สึกดั้งเดิมจะไม่คงอยู่หรือไม่? โซลูชันนี้เกี่ยวข้องกับการสร้างภาพซ้อนทับ PNG แบบโปร่งใสซึ่งสามารถใช้เป็นมาสก์ / เฟรมรอบ JPEG หรือ GIF ปกติได้ ด้วยวิธีนี้สามารถกำหนดค่าการติดตั้ง CMS โดยทั่วไปเพื่อให้ผู้ใช้สามารถอัปโหลดภาพถ่ายได้โดยไม่ต้องกังวลกับการใช้โปรแกรมกราฟิกใด ๆ เพื่อใช้ตัวกรอง
18.
บีซูม
น้ำหนักเบา
JQuery
ปลั๊กอินซูม
BeZoom เป็นทางเลือกที่เรียบง่ายและน้ำหนักเบาสำหรับ เจคิวซูม. เบากว่าและใช้งานง่ายกว่า
19.
ใช้ jQuery สำหรับภาพเคลื่อนไหวพื้นหลัง
เล่นกับ jQuery และเปลี่ยนตำแหน่งของภาพพื้นหลังเพื่อสร้างเอฟเฟกต์ที่คุณต้องการ มีบทความใหม่ที่ตอบเรื่อง "ฉันจะจัดการสถานะที่ใช้งานได้อย่างไร" - การจัดการ Active State สำหรับ jQuery Animated Backgrounds.
20.
5 วิธีในการเพิ่มสีสันให้รูปภาพของคุณด้วย CSS
ต่อไปนี้เป็นเคล็ดลับง่ายๆในการเพิ่มรสชาติให้กับภาพธรรมดาของคุณ การใช้ Photoshop เพื่อจัดรูปแบบแต่ละภาพอาจเป็นเรื่องที่น่าเบื่อและยากต่อการดูแลรักษาในระยะยาว เทคนิค CSS ต่อไปนี้จะช่วยให้คุณคลายความเจ็บปวดนั้นได้
21.
ทำอย่างไร:
resizeable
ภาพพื้นหลัง
เรียนรู้วิธีตั้งค่าภาพพื้นหลังที่ปรับขนาดได้ด้วย CSS คุณมี 3 ตัวเลือกให้เลือก
22.
สไตล์ลิงค์รูปภาพของคุณ
การแจ้งให้ผู้ใช้ทราบว่าส่วนใดส่วนหนึ่งของเว็บไซต์ของเรามีไว้เพื่อให้คลิกทำได้ดีที่สุดโดยใช้เอฟเฟกต์วางเมาส์เหนือ ส่วนที่ "คลิกได้" เหล่านี้มีรูปภาพเนื้อหาอย่างแน่นอน Image Link เป็นสคริปต์ที่ช่วยให้คุณสามารถใช้สไตล์เพิ่มเติมกับลิงก์รูปภาพของคุณได้
23.
ภาพพื้นหลังหลายภาพพร้อม CSS
ในบางครั้งการใช้ภาพพื้นหลังจะเหมาะสมกว่าการแทรกลงในหน้าโดยตรง และในขณะที่แต่ละองค์ประกอบเช่นแท็กร่างกายของคุณสามารถเก็บภาพพื้นหลังได้เพียงภาพเดียว แต่ก็สามารถนำไปใช้กับองค์ประกอบต่างๆได้
24.
ขอบภาพด้วย CSS
บทช่วยสอนที่ง่ายมากแสดงวิธีเพิ่มเส้นขอบทึบให้กับรูปภาพโดยใช้ CSS
25.
CSS Sprites โดยไม่ต้องใช้ภาพพื้นหลัง
เรียนรู้วิธีใช้เอฟเฟกต์โฮเวอร์โดยไม่ต้องมีความรู้มากมายเกี่ยวกับสไปรต์ CSS
