6 คำบรรยายภาพสวย ๆ ด้วย CSS3

CSS3 นั้นทรงพลังจริงๆ มันเคยเป็นที่เราต้องการภาพหรือพวงของ codelines JavaScript เพื่อให้ผลการเปลี่ยนแปลงง่าย ทุกวันนี้เราสามารถทำได้ด้วย CSS3 เท่านั้น.

ในบทช่วยสอนนี้เราจะแสดงวิธีสร้างคำบรรยายภาพด้วยการเปลี่ยนภาพต่างๆโดยใช้ CSS3.

• การสาธิต
• แหล่งดาวน์โหลด

รองรับเบราว์เซอร์

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

ต่อไปนี้เป็นเบราว์เซอร์ที่รองรับการแปลงและการเปลี่ยน:

• Internet Explorer 10+ (ยังไม่ออก)
• Firefox 6+
• Chrome 13+
• Safari 3.2+
• Opera 11+

ตอนนี้เรามาเริ่มบทช่วยสอน.

โครงสร้าง HTML

เรามี 6 ภาพ; แต่ละภาพมีสไตล์คำบรรยายที่แตกต่างกัน.

 
 
   
คำบรรยายภาพง่าย ๆ
  
  
   
คำบรรยายภาพเต็ม
 
Loren ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  
  
   
จางคำบรรยาย
 
Loren ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  
  
   
คำบรรยายภาพสไลด์
 
Loren ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  
  
 
   
นี่คือคำบรรยายภาพหมุน
 
Loren ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  
 
  
   
ฟรีสไตล์คำบรรยายภาพ
 
Loren ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  
 
 

CSS พื้นฐาน

ก่อนที่จะจัดแต่งทรงผมองค์ประกอบใด ๆ ก็เป็นการเริ่มต้นที่ดีในการรีเซ็ตคุณสมบัติทั้งหมดโดยใช้การรีเซ็ต CSS นี้และให้ค่าลักษณะเริ่มต้นดังนั้นเบราว์เซอร์ทั้งหมดจะแสดงผลลัพธ์เดียวกัน (ยกเว้นบางที IE6).

สไตล์จะถูกแยกในไฟล์ style.css ดังนั้นไฟล์ HTML ของเราจะดูเรียบร้อย อย่างไรก็ตามอย่าลืมที่จะเพิ่มสไตล์การเชื่อมโยงภายในแท็กหัวเพื่อใช้กฎการจัดแต่งทรงผมในไฟล์.

ตกลงเรามาเริ่มการจัดแต่งทรงผมองค์ประกอบโดยเริ่มจากแท็ก html และ id wrapper หลัก:

 html background-color: #eaeaea;  #mainwrapper font: Arial ปกติ 10pt, sans-serif; ความสูง: อัตโนมัติ; กำไร: 80px อัตโนมัติ 0 อัตโนมัติ; จัดข้อความ: ศูนย์; ความกว้าง: 660px; 

สไตล์กล่องภาพ

เราใช้สไตล์ทั่วไปบางอย่างในกล่องที่มีภาพ กล่องจะปรากฏขึ้นเคียงข้างกันโดยใช้ลอยซ้าย โปรดสังเกตว่าเราได้เพิ่มโอเวอร์โฟลว์: คุณสมบัติที่ซ่อนอยู่; สิ่งนี้จะทำให้วัตถุทั้งหมดภายในที่ผ่าน div ถูกซ่อนอยู่.

นอกจากนี้เรายังประกาศคุณสมบัติการเปลี่ยนภาพทุกภาพภายในกล่องในกรณีที่เราต้องการการเปลี่ยนภาพในภายหลัง.

 #mainwrapper .box border: 5px solid #fff; เคอร์เซอร์: ตัวชี้; ความสูง: 182px; ลอย: ซ้าย; ขอบ: 5px; ตำแหน่ง: ญาติ; ล้น: ซ่อนอยู่; ความกว้าง: 200px; -webkit-box-shadow: 1px 1px 1px 1px #ccc; -moz-box-shadow: 1px 1px 1px 1px #ccc; กล่องเงา: 1px 1px 1px 1px #ccc;  #mainwrapper .box img ตำแหน่ง: สัมบูรณ์; ซ้าย: 0; -webkit-transition: ทุก 300ms ง่ายขึ้น; -moz-transition: 300ms ง่ายขึ้น; -o-transition: 300ms ง่ายขึ้น; -ms-transition: ทั้งหมด 300ms ได้อย่างง่ายดาย ช่วงการเปลี่ยนภาพ: 300ms ทั้งหมดทำให้ง่ายขึ้น 

คำบรรยายสไตล์ทั่วไป

คำบรรยายภาพจะมีสไตล์ทั่วไปและคุณสมบัติการเปลี่ยนแปลง แทนที่จะใช้คุณสมบัติความทึบเราใช้โหมดสี RGBA กับ 0.8 สำหรับช่องอัลฟาเพื่อให้คำอธิบายภาพดูโปร่งใสโดยไม่ส่งผลต่อข้อความภายใน.

 #mainwrapper .box .caption background-color: rgba (0,0,0,0.8); ตำแหน่ง: สัมบูรณ์; สี: #fff; ดัชนี z: 100; -webkit-transition: ทุก 300ms ง่ายขึ้น; -moz-transition: 300ms ง่ายขึ้น; -o-transition: 300ms ง่ายขึ้น; -ms-transition: ทั้งหมด 300ms ได้อย่างง่ายดาย ช่วงการเปลี่ยนภาพ: 300ms ทั้งหมดทำให้ง่ายขึ้น ซ้าย: 0; 

คำอธิบาย 1

คำบรรยายภาพแรกจะมีเอฟเฟกต์การเปลี่ยนแปลงอย่างง่ายที่มักใช้สำหรับคำบรรยาย คำอธิบายภาพจะขึ้นมาจากด้านล่างเมื่อเราวางเมาส์เหนือภาพ หากต้องการระบุที่อยู่คำอธิบายภาพจะมีความสูงคงที่ 30px และเราใช้ตำแหน่งด้านล่าง -30px เพื่อซ่อนใต้ภาพ.

 #mainwrapper .box .simple-caption height: 30px; ความกว้าง: 200px; จอแสดงผล: บล็อก; ด้านล่าง: -30px; line-height: 25pt; จัดข้อความ: ศูนย์; 

คำอธิบาย 2

ประเภทที่สองมีความกว้างและความสูงเต็มรูปแบบของขนาดภาพ / กล่อง (200x200px) และการเปลี่ยนภาพจะเป็นลักษณะของประตูบานเลื่อนเท่านั้นซึ่งจะเลื่อนจากบนลงล่าง.

 #mainwrapper .box. คำบรรยายแบบเต็ม ความกว้าง: 170px; ความสูง: 170px; ด้านบน: -200px; จัดเรียงข้อความ: ซ้าย; การขยาย: 15px; 

คำอธิบาย 3

คำบรรยายภาพที่สามจะมีผลซีดจาง ดังนั้นเราจึงเพิ่มความทึบ: 0 สำหรับสถานะเริ่มต้น.

 #mainwrapper .box .fade-caption, #mainwrapper .box .scale-caption opacity: 0; ความกว้าง: 170px; ความสูง: 170px; จัดเรียงข้อความ: ซ้าย; การขยาย: 15px; 

คำอธิบาย 4

คำบรรยายภาพที่สี่จะเลื่อนจากซ้ายไปขวาดังนั้นเราจึงกำหนด 200px ไปทางซ้าย (ซ้าย: 200px) เป็นตำแหน่งเริ่มต้น.

 ** คำบรรยายภาพ 4: สไลด์ ** / #mainwrapper .box .slide-caption width: 170px; ความสูง: 170px; จัดเรียงข้อความ: ซ้าย; การขยาย: 15px; ซ้าย: 200px; 

คำอธิบาย 5

คำบรรยายภาพที่ห้าจะมีเอฟเฟกต์หมุน มันไม่ได้เป็นเพียงคำบรรยายภาพที่จะหมุน แต่ยังรวมถึงภาพ มันเหมือนกับการเปลี่ยนตำแหน่งโดยการหมุน.

ดังนั้นเราจึงเพิ่มคุณสมบัติการแปลงด้วยการหมุน -180 องศาเว้นแต่ว่าคุณต้องการหมุนจอภาพเพื่ออ่านคำบรรยาย.

 #mainwrapper # box-5.box .rotate-caption width: 170px; ความสูง: 170px; จัดเรียงข้อความ: ซ้าย; การขยาย: 15px; ด้านบน: 200px; -moz-transform: หมุน (-180deg); -o-transform: หมุน (-180deg); -webkit-transform: หมุน (-180deg); แปลง: หมุน (-180deg);  #mainwrapper .box .rotate width: 200px; ความสูง: 400px; -webkit-transition: ทุก 300ms ง่ายขึ้น; -moz-transition: 300ms ง่ายขึ้น; -o-transition: 300ms ง่ายขึ้น; -ms-transition: ทั้งหมด 300ms ได้อย่างง่ายดาย ช่วงการเปลี่ยนภาพ: 300ms ทั้งหมดทำให้ง่ายขึ้น 

คำอธิบาย 6

คำบรรยายภาพสุดท้ายจะมีการแปลงสเกล อย่างไรก็ตามในคำบรรยายก่อนหน้านี้ข้อความที่อยู่ในนั้นจะแสดงพร้อมกับกะการเปลี่ยนแปลง. caption ในส่วนนี้เราจะทำให้มันแตกต่างกันเล็กน้อย.

ข้อความจะปรากฏขึ้นหลังจากเปลี่ยนกะเสร็จแล้ว ดังนั้นเราจึงเพิ่มความล่าช้าในการเปลี่ยนแปลงข้อความในกรณีนี้คือแท็ก h3 และ p.

 #mainwrapper .box .scale-caption h3, #mainwrapper .box .scale-caption p ตำแหน่ง: ญาติ; ซ้าย: -200px; ความกว้าง: 170px; -webkit-transition: ทุก 300ms ง่ายขึ้น; -moz-transition: 300ms ง่ายขึ้น; -o-transition: 300ms ง่ายขึ้น; -ms-transition: ทั้งหมด 300ms ได้อย่างง่ายดาย ช่วงการเปลี่ยนภาพ: 300ms ทั้งหมดทำให้ง่ายขึ้น  #mainwrapper .box .scale-caption h3 -webkit-transition-delay: 300ms; -moz-transition-delay: 300ms; -o-transition-delay: 300ms; -ms-transition-delay: 300ms; การเปลี่ยนแปลงล่าช้า: 300ms;  #mainwrapper .box .scale-caption p -webkit-transition-delay: 500ms; -moz-transition-delay: 500ms; -o-transition-delay: 500ms; -ms-transition-delay: 500ms; การเปลี่ยนแปลงล่าช้า: 500ms; 

มาทำให้พวกมันขยับ

ในส่วนต่อไปนี้เราจะกำหนดพฤติกรรมของคำบรรยายภาพเมื่อเราวางเมาส์เหนือภาพหรือกล่อง.

คำบรรยายภาพพฤติกรรม 1: แสดง.

สำหรับคำบรรยายภาพแรกเราต้องการให้แสดง (จากด้านล่าง) เมื่อเราวางเมาส์เหนือช่อง เพื่อจัดการกับการย้ายครั้งนี้เราใช้คุณสมบัติการแปลงและโค้ด CSS ด้านล่างบอกคำบรรยายเพื่อย้าย 100% ของน้ำหนักไปด้านบน.

 #mainwrapper .box: hover .simple-caption -moz-transform: translateY (-100%); -o-transform: translateY (-100%); -webkit-transform: translateY (-100%); แปลงแล้ว: translateY (-100%); 

หากคุณไม่เข้าใจถึงค่าลบสำหรับการแปล Y คุณอาจต้องการอ่านบทแนะนำนี้ก่อนเพื่อรับข้อมูลเชิงลึกเพิ่มเติม.

คำบรรยายภาพพฤติกรรมที่ 2: เลื่อนลง.

ในทางกลับกันคำบรรยายภาพที่สองจะเลื่อนลงจากด้านบน ดังนั้นเราจะมีค่าบวกสำหรับการแปล Y.

 #mainwrapper .box: โฮเวอร์. full-caption -moz-transform: translateY (100%); -o-transform: translateY (100%); -webkit-transform: translateY (100%); แปลงแล้ว: แปล Y (100%);  

คำบรรยายภาพพฤติกรรม 3: จางลง.

คำบรรยายภาพที่สามเป็นภาพที่ง่ายที่สุด เมื่อกล่องเลื่อนอยู่ความทึบของคำบรรยายจะเปลี่ยนเป็น 1 ทำให้มองเห็นได้และเนื่องจากเราได้เพิ่มคุณสมบัติการเปลี่ยนภาพในคลาสคำบรรยายภาพการเปลี่ยนภาพควรจะทำงานได้อย่างราบรื่น.

 #mainwrapper .box: hover .fade-caption opacity: 1; 

คำบรรยายภาพพฤติกรรมที่ 4: เลื่อนไปทางซ้าย.

ดังที่เรากล่าวถึงก่อนหน้านี้คำบรรยายภาพนี้จะเลื่อนไปทางซ้ายอย่างไรก็ตามภาพจะเลื่อนออกไปทางขวา ดังนั้นที่นี่เรามี 2 ประกาศ CSS.

รหัส CSS ด้านล่างระบุว่าเมื่อเราวางเมาส์เหนือช่องคำอธิบายภาพจะเลื่อน 100% ของความกว้างไปทางซ้าย โปรดสังเกตว่าตอนนี้เราใช้ translateX เพราะเราต้องการให้สไลด์เลื่อนในแนวนอนจากขวาไปซ้าย.

 #mainwrapper .box: hover .slide-caption background-color: rgba (0,0,0,1) สำคัญ! -moz-transform: translateX (-100%); -o-transform: translateX (-100%); -webkit-transform: translateX (-100%); ความทึบ: 1; แปลง: translateX (-100%); 

เมื่อเราวางเมาส์เหนือช่องภาพจะเลื่อนออกไปทางซ้าย.

 #mainwrapper .box: โฮเวอร์ img # image-4 -moz-transform: translateX (-100%); -o-transform: translateX (-100%); -webkit-transform: translateX (-100%); แปลง: translateX (-100%);  

คำบรรยายใต้ภาพ 5: หมุนภาพ.

คำบรรยายภาพนี้แตกต่างจากส่วนที่เหลือเนื่องจากจะไม่ย้ายจากทางขวาหรือซ้าย แต่จะหมุน เมื่อกล่องเลื่อนอยู่ div ที่มีรูปภาพและคำอธิบายจะหมุน -180 ทวนเข็มนาฬิกาเพื่อซ่อนภาพและแสดงคำบรรยาย.

 / ** หมุนคำบรรยาย: พฤติกรรมโฮเวอร์ ** / #mainwrapper .box: โฮเวอร์. หมุน พื้นหลังสี: rgba (0,0,0,1)! สำคัญ; -moz-transform: หมุน (-180deg); -o-transform: หมุน (-180deg); -webkit-transform: หมุน (-180deg); แปลง: หมุน (-180deg);  

คำบรรยายภาพพฤติกรรมที่ 6: ไต่ระดับขึ้น.

คำบรรยายภาพนี้จะรวมผลการแปลงหลายอย่าง เมื่อกล่องเลื่อนอยู่ภาพจะขยายขึ้น 140% (1.4) จากมิติเริ่มต้น.

 #mainwrapper .box: hover # image-6 -moz-transform: scale (1.4); -o-transform: scale (1.4); -webkit-transform: scale (1.4); แปลง: ขนาด (1.4); 

และถ้าคุณเห็น CSS ด้านบนใต้ คำอธิบาย 6 ส่วนหัวเราได้ซ่อนข้อความทางซ้าย 200px โค้ด CSS ด้านล่างนี้บอกให้ข้อความเลื่อนไปยังตำแหน่งเริ่มต้น ดังนั้นข้อความจะเลื่อนจากซ้ายไปขวาพร้อมกัน.

 #mainwrapper .box: hover .scale-caption h3, #mainwrapper .box: hover .scale-caption p -moz-transform: translateX (200px); -o-transform: translateX (200px); -webkit-transform: translateX (200px); แปลง: translateX (200px);  

• การสาธิต
• แหล่งดาวน์โหลด

สรุป

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

เครดิต

รูปขนาดย่อของรูปภาพในบทช่วยสอนนำมาจากเว็บไซต์ต่อไปนี้ (ภาพหน้าจอ):

• หนังสือแยก
• Archiduchesse
• vlog
• Hongkiat
• ฟาร์มอวยพร
• มาร์คเอคโค