เอฟเฟ็กต์โฮเวอร์ jquery เอฟเฟ็กต์โฮเวอร์สำหรับรูปภาพใน Pure CSS3 ตัวอย่างง่ายๆสำหรับปุ่ม

การใช้เอฟเฟ็กต์โฮเวอร์ CSS ต่างๆ เมื่อวางเมาส์เหนือรูปภาพ ลิงก์ หรือข้อความเป็นหนึ่งในเทคนิค CSS ที่ใช้กันมากที่สุด

ในบทความนี้ ฉันได้รวบรวมเอฟเฟ็กต์โฮเวอร์ CSS3 เจ๋งๆ ไว้มากมาย คุณสามารถนำไปใช้กับไซต์ของคุณหรือโครงการเว็บอื่นๆ ได้อย่างง่ายดาย มาดูกันว่าฉันเตรียมอะไรไว้ให้คุณบ้าง

1. 10 เอฟเฟ็กต์โฮเวอร์ที่มีสไตล์

นี่คือชุดของเอฟเฟ็กต์โฮเวอร์ที่มีสไตล์อย่างไม่น่าเชื่อ 10 แบบตามชื่อ

แหล่งที่มา

2. เอฟเฟกต์โฮเวอร์ที่รับรู้ทิศทาง

เมื่อคุณวางเมาส์เหนือ องค์ประกอบต่างๆ, css เลื่อนเอฟเฟกต์โฮเวอร์ตามเคอร์เซอร์และสร้างงานนำเสนอ 3 มิติที่น่าทึ่ง

แหล่งที่มา

3. เอฟเฟกต์โฮเวอร์ของ Wacom

นี่เป็นเอฟเฟกต์ที่ค่อนข้างแฮ็คอยู่แล้ว แต่หลายคนยังคงสนุกกับการใช้มัน การนำเสนอที่เรียบง่ายแต่มีเสน่ห์

แหล่งที่มา

4. เอฟเฟ็กต์โฮเวอร์ CSS3

หากคุณกำลังมองหาเอฟเฟกต์โฮเวอร์แบบวงกลม คุณจะพบเอฟเฟกต์ที่น่าสนใจที่นี่ มีทั้งหมด 12 รายการ CSS ที่แตกต่างกันเอฟเฟ็กต์กรอบโฮเวอร์

แหล่งที่มา

5. โฮเวอร์แอนิเมชันจาก UNIQLO

นี่เป็นอีกหนึ่งเอฟเฟกต์โฮเวอร์ที่น่าสนใจ เหมาะอย่างยิ่งสำหรับภาพขนาดย่อหรือรูปภาพประเภทอื่นๆ

แหล่งที่มา

6.ปุ่มเลื่อนเอฟเฟกต์

และนี่คือเอฟเฟกต์โฮเวอร์ที่น่าประทับใจสำหรับปุ่มต่างๆ ทั้งหมดนี้เหมาะสำหรับไซต์ทุกประเภท

แหล่งที่มา

7. 10 เอฟเฟกต์เลื่อนอันน่าทึ่ง

เอฟเฟ็กต์โฮเวอร์ CSS อีก 10 ชุดสำหรับปุ่ม ส่วนใหญ่ค่อนข้างน่าประทับใจ

แหล่งที่มา

8. เอฟเฟ็กต์โฮเวอร์ CSS3 2

นี่คือชุดเอฟเฟกต์โฮเวอร์ที่แตกต่างกันสี่แบบ ชื่อและคำอธิบายจะแสดงพร้อมกับเอฟเฟ็กต์

แหล่งที่มา

9. ตีกลับเมื่อโฮเวอร์

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

แหล่งที่มา

10. โฮเวอร์ 8 บิต

โฉบวินเทจมีสไตล์นี้ เอฟเฟ็กต์ cssจะทำให้คุณรู้สึกคิดถึง คุณสามารถใช้เพื่อสร้าง สไตล์ย้อนยุคสำหรับเว็บไซต์

แหล่งที่มา

11. เอฟเฟกต์การเลื่อนชื่อเรื่องอย่างง่าย

เมื่อคุณวางเมาส์เหนือรูปภาพ เอฟเฟ็กต์นี้จะวาดชื่อเรื่องบนพื้นหลังที่มีความทึบต่ำ

แหล่งที่มา

12. เอฟเฟกต์พลิกลง

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

แหล่งที่มา

13. รางวัลความอยากรู้อยากเห็น

คุณจะไม่เข้าใจความสวยงามของเอฟเฟ็กต์นี้จนกว่าคุณจะวางเมาส์เหนือภาพ เส้นสุ่มกลายเป็นโลโก้อย่างสวยงามแล้วทาสีด้วยสี

แหล่งที่มา

14. ผลการโฮเวอร์ภาพ

นี่คือเอฟเฟ็กต์เส้นขอบโฮเวอร์ CSS ที่น่าทึ่งสำหรับรูปภาพ วิธีที่ภาพหนึ่งปรากฏบนพื้นหลังของอีกภาพหนึ่งนั้นเหลือเชื่อมาก!

แหล่งที่มา

15. โฮเวอร์นิเมชั่น

การโฮเวอร์เหนือรูปภาพจะเป็นการลดความทึบ โดยเน้นที่ลิงก์

แหล่งที่มา

16. เลื่อนฉันพี่ชาย

นี่อาจไม่ใช่เอฟเฟ็กต์โฮเวอร์ CSS ที่มีประโยชน์มากนัก แต่ก็สนุกดี เพียงเลื่อนเมาส์ไปเหนือแว่นกันแดดและเวทมนตร์ก็จะเริ่มขึ้น

แหล่งที่มา

17. เอฟเฟกต์การเลื่อน Nautilus SCSS HAML

นี่คือเอฟเฟ็กต์โฮเวอร์ที่สร้างสรรค์ซึ่งมีให้เลือกหลายรูปแบบ พวกเขาเสนอความเป็นไปได้ที่ไม่เหมือนใครในการออกแบบรูปภาพ

แหล่งที่มา

18. เอฟเฟกต์เลื่อนเส้นขอบ SVG 1

เหมาะสำหรับข้อความ ปุ่ม หรือรูปภาพ การสร้างเฟรมใหม่อย่างค่อยเป็นค่อยไปเป็นผลที่น่าสนใจจริงๆ

แหล่งที่มา

19. เลื่อนไอคอนแผนที่ค้นหา

คุณต้องการเอฟเฟ็กต์โฮเวอร์ CSS สำหรับแถบค้นหาหรือไอคอนแผนที่หรือไม่ มันคือตัวเขานั่นเอง การเปลี่ยนแปลงที่ไร้รอยต่อของมันถือเป็นการรักษาดวงตา

แหล่งที่มา

20. บานหน้าต่างไอคอนโซเชียล

สามารถใช้เอฟเฟ็กต์โฮเวอร์นี้เพื่อซ่อนไอคอนในตอนเริ่มต้นได้ สื่อสังคมแล้วแสดงเมื่อผู้ใช้วางเมาส์ไว้เหนือรายการเหล่านั้น

แหล่งที่มา

21. ข้อมูลการเพิ่มรายการสินค้า

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

แหล่งที่มา

22. ซองจดหมายเคลื่อนไหว

เอฟเฟ็กต์โฮเวอร์ CSS ที่สมบูรณ์แบบสำหรับ " เชื่อมต่อกับเรา". มันแสดง ข้อมูลติดต่อในซองจดหมายแบบเลื่อนลง แต่หลังจากที่ผู้ใช้วางเมาส์เหนือรูปภาพแล้วเท่านั้น

แหล่งที่มา

23. กลับไปด้านบน

เอฟเฟ็กต์การโฮเวอร์ที่ไม่เหมือนใครสำหรับปุ่ม Back To Top ช่วยให้คุณสามารถแสดงตัวชี้ภาพเคลื่อนไหวที่สวยงามแก่ผู้เข้าชมได้

แหล่งที่มา

24. แฟนซีโฮเวอร์

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

แหล่งที่มา

25. เอฟเฟกต์โฮเวอร์ไอคอนเตือนความจำ

เอฟเฟ็กต์โฮเวอร์ CSS นี้จะเพิ่มสไตล์ที่สวยงามให้กับรูปภาพ

แหล่งที่มา

26. เลื่อนภาพวงกลม

เอฟเฟ็กต์โฮเวอร์สำหรับภาพวงกลม เอฟเฟกต์โฮเวอร์มีสี่สไตล์ที่แตกต่างกันในคอลเลกชัน

แหล่งที่มา

27.เอฟเฟกต์การเลื่อนไอคอน Safari

เอฟเฟ็กต์โฮเวอร์ CSS นี้จะสร้างภาพเคลื่อนไหวของไอคอน Safari ขึ้นมาใหม่ คุณสามารถแทนที่ไอคอน ภาพของตัวเองหรือโลโก้.

บ่อยครั้งบนเว็บไซต์ คุณอาจเห็นการเปลี่ยนแปลงหรือปุ่มต่างๆ pseudo-class พิเศษ: โฮเวอร์ใน CSS ช่วยให้คุณสามารถใช้งาน วันนี้เราจะพิจารณาเคล็ดลับบางอย่างที่ช่วยให้คุณสร้างคุณลักษณะนี้ได้ และด้านล่างเราจะเผยแพร่รายการสิ่งที่น่าสนใจที่สุด (พร้อมคำอธิบายสั้น ๆ / คำอธิบาย) ตัวเลือกทั้งหมดแบ่งออกเป็น:

กลุ่มเหล่านี้มีเงื่อนไขมากเพราะ ตัวอย่างมากมายตัดกันและเป็นสากล กล่าวคือ สามารถเกิดขึ้นได้เมื่อออกแบบวัตถุต่างๆ

เอฟเฟ็กต์โฮเวอร์ในรูปแบบ CSS ถูกเพิ่มทางด้านขวาขององค์ประกอบดังนี้:

a: โฮเวอร์ ( สี : แดง ; )

a:hover ( สี: สีแดง; )

บ่อยครั้งที่กลไกนี้ใช้สำหรับลิงก์โดยเฉพาะเพื่อเปลี่ยนสีหรือเพิ่ม / ลบการขีดเส้นใต้ อย่างไรก็ตาม สามารถตั้งค่าเป็นบล็อก ปุ่ม ข้อความ หรือใช้เมื่อสร้าง

ปุ่ม : hover ( พื้นหลัง : rgba (0 , 0 , 0 , 0 ) ; color : red ; ) .my-picture : hover ( ความทึบ : 0.5 ; filter : alpha(opacity= 50 ) ; )

ปุ่ม:โฮเวอร์ ( พื้นหลัง: rgba(0,0,0,0); สี: สีแดง; ) .my-picture:hover ( ความทึบ: 0.5; ตัวกรอง: อัลฟา(ความทึบ=50); )

เบราว์เซอร์สมัยใหม่จัดการกับเอฟเฟ็กต์โฮเวอร์ CSS ได้ดีพอๆ กัน แม้ว่าเวอร์ชันเก่าของ IE 6 และต่ำกว่าจะทำงานบนลิงก์เท่านั้น นอกจากนี้บางแหล่งกล่าวว่าต้องระบุสิ่งนี้ในรหัส.

อย่างไรก็ตาม เมื่อตั้งค่ารูปแบบลิงก์ สามารถใช้ตัวเลือกเพิ่มเติมได้: ลิงก์ - สำหรับหน้าเว็บที่ยังไม่ได้เยี่ยมชม : เข้าชม - ที่คุณเคยไปแล้ว + : ใช้งานอยู่ กำหนดที่อยู่ที่ใช้งานอยู่ในปัจจุบัน สิ่งสำคัญคือต้องวางเอฟเฟกต์โฮเวอร์ใน CSS หลัง :link และ :visited หากมีอยู่

ย้ายจากทฤษฎีไปสู่การปฏิบัติกันเถอะ ด้านล่างนี้เป็นรายการ วัสดุที่มีประโยชน์และตัวอย่าง - ไปตามลิงก์เพื่อดูแหล่งที่มา

เอฟเฟ็กต์โฮเวอร์สำหรับปุ่มและลิงก์

ดังที่เราได้กล่าวไว้ข้างต้น นี่เป็นหมวดหมู่วัตถุที่ได้รับความนิยมมากที่สุดในไซต์ที่พบเทคนิคนี้ นี่คือตัวเลือกบางอย่างสำหรับคุณ

ตัวอย่างง่ายๆสำหรับปุ่ม

ปุ่มซัลลิแวน

เคล็ดลับคือเมื่อคุณวางเมาส์เหนือปุ่มต่างๆ นอกเหนือจากการเปลี่ยนสีพื้นหลังแล้ว ภาพเคลื่อนไหวขนาดเล็กพร้อมไอคอนยังเปิดขึ้น (แต่ละปุ่มมีของตัวเอง)

ไอคอน CSS เมื่อโฮเวอร์

การรวบรวม 5 ตัวเลือกง่ายๆการปฏิบัติงาน ในทุกกรณี เกี่ยวข้องกับไอคอนเพิ่มเติมที่ปรากฏทางด้านขวา / ซ้ายของข้อความหรือแทนที่

เอฟเฟ็กต์การเลื่อนปุ่ม

เมื่อเทียบกับตัวอย่างก่อนหน้านี้ ทริกเกอร์ทั้ง 12 ฟังก์ชันดูน่าสนใจกว่ามาก ทั้งในเชิงภาพและในแง่ของโค้ด ไม่ใช่หากไม่มี JS

Nav โฮเวอร์

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

ข้อมูลเกี่ยวกับโฮเวอร์

ขณะนี้ฟังก์ชันคำแนะนำเครื่องมือได้รับการสนับสนุนในทุกเบราว์เซอร์ แต่คุณสามารถปรับแต่งให้เหมาะกับความต้องการของคุณได้ ในตัวอย่างปัจจุบัน pseudo-class ถูกเรียกใช้สำหรับแท็ก dfn และดูมีสไตล์ รหัสเป็น HTML + CSS ที่ค่อนข้างกะทัดรัด

ปุ่มมานา

เอฟเฟ็กต์โฮเวอร์ในรูปแบบดั้งเดิมที่สุดรุ่นหนึ่ง - เมื่อโฉบลง จะเหมือนกับการเติมของเหลว การใช้งานใช้ CSS, HTML และ SVG ในบางธีมของไซต์ ข้อมูลโค้ดนี้จะเป็นสิ่งที่มาจากสวรรค์อย่างแน่นอน

เอฟเฟกต์โฮเวอร์สำหรับรูปภาพ

15 ทริคพื้นฐาน

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

ภาพเอฟเฟกต์โฮเวอร์ที่สวยงาม

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

แอนิเมชั่น Barberpole Hover

ไม่ซับซ้อนในตอนแรกแอนิเมชั่นซึ่งในตอนท้ายดูเท่และไม่ได้มาตรฐาน

เอฟเฟ็กต์โฮเวอร์ CSS พร้อมการตรวจจับทิศทาง

ส่วนย่อยและโค้ดที่คัดสรรมาอย่างดีเกี่ยวกับหัวข้อนี้สามารถพบได้ในบทความจาก css-tricks.com ตัวอย่างทั้งหมดเหล่านี้รวมกันโดยความจริงที่ว่าในระหว่างการทำงานตำแหน่งและทิศทางของการเคลื่อนที่ของเคอร์เซอร์จะถูกกำหนด ในทางกลับกัน วิธีนี้ช่วยให้คุณสร้างปฏิกิริยาที่ค่อนข้างแปลกใหม่เมื่อวางเมาส์เหนือองค์ประกอบของหน้า:

ในหลาย การตัดสินใจที่ยากลำบาก Javascript และ jQuery สำหรับเอฟเฟกต์โฮเวอร์ช่วยให้คุณกระจายและปรับปรุงผลลัพธ์ได้อย่างมาก

ทิศทางตระหนักโฉบความดี

ทิศทาง Aware ไทล์โดยใช้คลิปพา ธ Pure CSS

ค้นหาชิปที่เหลือในบทความต้นฉบับ

แอนิเมชั่น

ในการพัฒนานี้มากกว่า 100 วิธีง่ายๆ"เคลื่อนไหว" ภาพหรือวัตถุที่โฮเวอร์ ด้วยคุณสมบัติเหล่านี้ คุณสามารถดำเนินการได้ ลักษณะที่แตกต่างกันปุ่ม, หัวเรื่อง, ข้อความ, ไอคอนทางสังคมและอื่น ๆ มีตัวเลือกสำหรับเปลี่ยนการแสดงรูปภาพ การซ้อนทับพื้นหลังโปร่งแสง

ลิงก์มีเอฟเฟ็กต์การเลื่อนส่วนหัว CSS3 7 แบบ - เมื่อวางเมาส์เหนือรูปภาพ ผู้ใช้จะเห็น บล็อกข้อมูลพร้อมชื่อเรื่อง คำอธิบายสั้น ๆและลิงค์ที่จะไป ไม่สามารถพูดได้ว่าตัวอย่างเหล่านี้เป็นต้นฉบับมาก แต่จะช่วยกระจายโครงการเนื้อหาแบบคงที่ได้อย่างแน่นอน

CSS โฮเวอร์ไลบรารี

hover.css

โปรเจ็กต์ Hover.css ที่มีชื่อไม่ซับซ้อนประกอบด้วยชุดเอฟเฟกต์ CSS3 สำหรับลิงก์ ปุ่ม บล็อก และอื่นๆ คุณสามารถใช้รหัสสำเร็จรูปและ / หรือเพิ่มการแก้ไขของคุณเองได้ มีสิ่งที่น่าสนใจมากมายที่นี่: การแปลง 2D/3D, การทำงานกับพื้นหลังและเฟรม, เงา, ไอคอน โซลูชันนี้มีให้ในรูปแบบ CSS, LESS และ Sass

Imagehover.css

ห้องสมุดอื่นที่กำหนด เอฟเฟกต์โฮเวอร์รูปภาพ - ใน รุ่นฟรีคุณจะพบตัวเลือกการแปลงร่าง 44 แบบ (ชุดพรีเมี่ยมมีมากกว่า 5 เท่า) รองรับ LESS และ SCSS ที่นี่ด้วย เคสนี้มีน้ำหนักเพียง 19kb เว็บไซต์มีหน้าที่มีการสาธิตตัวอย่างการทำงานทั้งหมด มันมีคุณสมบัติพิเศษมากมายที่ไม่เคยมีมาก่อน

โครงการมีมากกว่า 30 เทคนิคที่แตกต่างกันสำหรับวัตถุทรงกลมและสี่เหลี่ยม ทั้งหมดนี้ค่อนข้างเป็นต้นฉบับไม่มีการกระทำ "องค์ประกอบเดียว" ง่ายๆในรูปแบบของการซูม / บินออกปกติ งานนี้ดำเนินการใน CSS3 + HTML บริสุทธิ์ (รวมถึงไฟล์ Scss รวมอยู่ด้วย) เข้ากันได้ดีกับ Bootstrap 3 มีเอกสารประกอบ

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

หากคุณรู้จักฟีเจอร์และส่วนย่อยอื่นๆ ที่น่าสนใจ โปรดส่ง URL ไปให้พวกเขาในความคิดเห็น และเราจะอัปเดตบทความในอนาคต

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

ที่กำหนดไว้ใน วัสดุนี้เอฟเฟกต์ทำงานในเบราว์เซอร์สมัยใหม่ การสนับสนุน IE ขึ้นอยู่กับเวอร์ชันและก่อนสมัคร โครงการจริงจำเป็นต้องได้รับการทดสอบอย่างละเอียด

กระตุกขึ้น

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

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

ที่นี่ใช้คุณสมบัติการเปลี่ยนผ่านเป็นส่วนเสริม เนื่องจากเอฟเฟกต์จะดูดีหากไม่มีคุณสมบัตินี้ มันให้ผลที่ราบรื่น

css

ex1 img( border: 5px solid #ccc; float: left; margin: 15px; -webkit-transition: margin 0.5s easy-out; -moz-transition: margin 0.5s easy-out; -o-transition: margin 0.5s easy-out; ) .ex1 img:hover ( margin-top: 2px; )

เมื่อเลื่อนเมาส์ไปเหนือ ภาพแต่ละภาพจะค่อยๆ ขยายขนาด และเมื่อโฟกัสหายไป ภาพจะกลับไปเป็นขนาดเดิม

สำหรับ เอฟเฟกต์นี้ใช้ชุดภาพขนาด 400x133 px จากนั้นจะลดขนาดในโค้ด CSS เป็น 300x100px และขยายเมื่อโฮเวอร์ ใช้การจัดกึ่งกลางในแนวนอน และรูปภาพที่ปรับขนาดอาจทำให้สิ่งต่างๆ ยุ่งเหยิงได้ ดังนั้นจึงใช้ค่าระยะขอบติดลบที่ครึ่งหนึ่งของความกว้าง

css

#container ( width: 300px; margin: 0 auto; ) #ex2 img( ความสูง: 100px; width: 300px; margin: 15px 0; -webkit-transition: all 1s easy; -moz-transition: all 1s easy; -o-transition: all 1s easy; ) #ex2 img:hover ( ความสูง: 133px; width: 400px; margin-left : -50px; )

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

ในการทำให้ข้อความปรากฏบนโฮเวอร์ เราเพียงเปลี่ยนสีและความสูงของเส้น สิ่งนี้สร้างผลกระทบของการสำแดงขนาดของข้อความ

css

#ex3 ( width: 730px; height: 133px; line-height: 0px; color: transparent; font-size: 50px; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; text-transform: uppercase; -webkit-transition: all 0.5 s easy; -moz-transition: ความง่าย 0.5s ทั้งหมด; -o-transition: ความง่ายดาย 0.5s ทั้งหมด; ) #ex3:hover ( line-height: 133px; color: #575858; ) #ex3 img( float: left; margin: 0 15px; )

นี่เป็นหนึ่งในเอฟเฟ็กต์แกลเลอรีภาพขนาดย่อที่เรียบง่ายแต่น่าสนใจมาก ขึ้นอยู่กับการสร้างอาร์เรย์ของรูปภาพและหมุนรูปภาพเมื่อเคอร์เซอร์ของเมาส์อยู่เหนือ

สำหรับเอฟเฟกต์ใหม่ ๆ มากมายเฉพาะสำหรับ เบราว์เซอร์เฉพาะ คุณสมบัติ CSSดังนั้นเบราว์เซอร์รุ่นเก่าจะไม่ทำงาน แกลเลอรีใช้เงา การเปลี่ยน และการแปลง

หากคุณต้องการกระจายเอฟเฟ็กต์ให้หลากหลายยิ่งขึ้น คุณสามารถใช้หลอกตัวเลือกเพื่อหมุนภาพในมุมต่างๆ และในทิศทางต่างๆ

css

#ex4 ( width: 800px; margin: 0 auto; ) #ex4 img ( margin: 20px; border: 5px solid #eee; -webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2); -moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2); box-shadow: 4px 4px 4px r gba(0,0,0,0.2); -webkit-transition: ทั้งหมด 0.5s easy-out; -moz-transition: all 0.5s easy; -o-transition: all 0.5s easy- ) #ex4 img:hover ( -webkit-transform: หมุน(-7deg); -moz-transform: หมุน(-7deg); -o-transform: หมุน(-7deg); )

นี่เป็นเอฟเฟกต์ที่ยอดเยี่ยมและซับซ้อน เริ่มแรก ภาพจะมีความโปร่งใสเล็กน้อย จากนั้น เมื่อเมาส์วางเหนือภาพ ความโปร่งใสจะถูกลบออกทั้งหมด มีแสงรอบๆ และแสงสะท้อน (สำหรับเบราว์เซอร์ Webkit เท่านั้น)

css

#ex5 ( width: 700px; margin: 0 auto; min-height: 300px; ) #ex5 img ( margin: 25px; opacity: 0.8; border: 10px solid #eee; /*Transform*/ -webkit-transition: all 0.5s easy; -moz-transition: all 0.5s easy; -o-transition: all 0.5s easy; /*Reflection* / -webkit-box-reflect: ต่ำกว่า 0px -webkit-gradient(เชิงเส้น, บนซ้าย, ล่างซ้าย, จาก (โปร่งใส), color-stop(.7, โปร่งใส), ถึง (rgba(0,0,0,0.1))); ) #ex5 img:hover ( ความทึบ: 1; /*Reflection*/ -webkit-box-reflect: ต่ำกว่า 0px -webkit-gradient(เชิงเส้น, บนซ้าย, ล่างซ้าย, จาก (โปร่งใส ), color-stop(.7, โปร่งใส), ถึง(rgba(0,0,0,0.4))); /*Glow*/ -webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8); -moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8); box-shadow: 0px 0 px 20px rgba(255,255,255,0.8); )

บทสรุป

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

ก่อนอื่น สำหรับผู้ที่ไม่ค่อยอยู่ในหัวข้อนี้หรือไม่ได้อยู่ในหัวข้อนี้เลย ผมจะอธิบายสั้นๆ ว่าเอฟเฟกต์โฮเวอร์คืออะไร สิ่งเหล่านี้คือเอฟเฟ็กต์ประเภทต่างๆ (คำบรรยายป๊อปอัป คำแนะนำเครื่องมือ การเปลี่ยนที่ราบรื่น, การเปลี่ยนแปลง, การหมุน, การเพิ่ม, การชดเชย, ฯลฯ ฯลฯ) ใช้กับองค์ประกอบของเว็บไซต์เมื่อคุณวางเมาส์เหนือองค์ประกอบเหล่านั้นด้วยเคอร์เซอร์ เอฟเฟ็กต์เหล่านี้สามารถนำไปใช้ได้โดยใช้ ปลั๊กอินต่างๆ jQuery และ CSS3 บริสุทธิ์
วันนี้ฉันเตรียม เลือกขนาดใหญ่เอฟเฟ็กต์โฮเวอร์ดั้งเดิมสำหรับรูปภาพที่สร้างด้วย CSS3 โดยไม่รวมไลบรารีจาวาสคริปต์ ฉันจะไม่พูดถึงข้อดีและข้อเสียของการใช้เอฟเฟกต์โฮเวอร์บน CSS3 ล้วน นี่เป็นอีกหัวข้อหนึ่ง เพียงแค่ดูตัวอย่าง และถ้าจำเป็น ให้ใช้เอฟเฟกต์ที่คุณชอบบนไซต์ของคุณ เอฟเฟ็กต์ทั้งหมดที่นำเสนอในการตรวจสอบมีให้พร้อมตัวอย่างและเอกสารประกอบโดยละเอียดพร้อมซอร์สโค้ด คู่มือส่วนใหญ่เป็นชนชั้นกลาง แต่ทุกอย่างใช้งานง่ายไม่มากก็น้อย

เพียงต้องการดึงดูดความสนใจของคุณไปที่ข้อเท็จจริงที่ว่าตัวอย่างทั้งหมดจะทำงานได้อย่างถูกต้องในเบราว์เซอร์สมัยใหม่ที่รองรับคุณสมบัติ CSS3 เท่านั้น

เพื่อไม่ให้ภาพรวมเสียหาย ฉันไม่ได้บิดเบือนชื่อเอฟเฟกต์ด้วยการแปลด้วยเครื่อง (ยกเว้นบางส่วน) ฉันทิ้งชื่อดั้งเดิมไว้ตามที่ผู้พัฒนาเรียก

เอฟเฟกต์โฮเวอร์ที่น่าสนใจมากบนภาพขนาดย่อโดยใช้ เส้นบาง ๆในการออกแบบและการพิมพ์ เอฟเฟ็กต์คำบรรยายภาพประเภทต่างๆ มากมาย การแปลงภาพ 3 มิติที่นุ่มนวลและไม่รบกวนสายตา และการเปลี่ยนองค์ประกอบเสมือนที่ราบรื่น ใช้งานได้ในเบราว์เซอร์สมัยใหม่เท่านั้น

iHover เป็นคอลเลกชันที่น่าประทับใจของเอฟเฟ็กต์โฮเวอร์ CSS3 แท้พร้อมการรองรับ Bootstrap 3 สร้างขึ้นบน css ครับ(ไฟล์) แก้ไขได้ง่ายโดยตัวแปร รหัสเป็นแบบแยกส่วน ไม่จำเป็นต้องรวมไฟล์ทั้งหมด เอฟเฟกต์ต่าง ๆ มากกว่า 30 แบบในแพ็คเกจเดียว ทุกอย่างได้รับการบันทึกไว้ค่อนข้างดี เอฟเฟ็กต์ใช้งานง่ายมาก สิ่งที่คุณต้องทำคือสร้างมาร์กอัป HTML ให้ถูกต้องและรวมไฟล์ CSS เพื่อให้ทำงานได้

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

เอฟเฟ็กต์การเปลี่ยนภาพที่เรียบง่ายมาก โดยไม่มีเสียงระฆังและเสียงนกหวีดใดๆ เลย ภาพกลมในเฟรม จะแปลงโดยเปลี่ยนโฟกัสที่โฮเวอร์ แค่นั้น

เอฟเฟ็กต์โฮเวอร์ CSS3 สำหรับภาพขนาดย่อ

นักพัฒนาวางตำแหน่งงานของเขาเป็นตัวอย่างของแกลเลอรีรูปภาพที่มีเอฟเฟกต์การเปลี่ยนแปลงเมื่อคำอธิบายประกอบ (คำอธิบายภาพ) เป็นภาพขนาดย่อปรากฏขึ้น เบราว์เซอร์สมัยใหม่ประกาศการสนับสนุนอย่างมั่นใจ รวมถึง IE 9+ แน่นอนว่าเป็นการยากที่จะเรียกมันว่าแกลเลอรีเต็มรูปแบบ แต่เอฟเฟกต์ของลายเซ็นนั้นน่าสนใจทีเดียว

อีกชุด กฎ cssเพื่อสร้างเอฟเฟ็กต์โฮเวอร์ที่น่าประทับใจบนภาพขนาดย่อที่กลมอย่างสมบูรณ์แบบ แพ็คเกจประกอบด้วยการเปลี่ยน CSS3 7 ประเภท เอกสารประกอบโดยละเอียดเกี่ยวกับการตั้งค่าและใช้งาน เบราว์เซอร์สมัยใหม่รองรับเอฟเฟกต์ทั้งหมด

หมุนภาพขนาดย่อเมื่อโฮเวอร์

เอฟเฟ็กต์ง่ายๆ ของการหมุนภาพขนาดย่อแบบกลมเมื่อวางเมาส์เหนือภาพเหล่านั้นด้วยเคอร์เซอร์ คุณจะเห็นแบบเดียวกันในบล็อกของฉัน ในการประกาศโพสต์ในหน้าหลัก มันถูกนำไปใช้ในโค้ด css สองสามบรรทัด

หากแปลตามตัวอักษร: “เอฟเฟกต์สุดเซ็กซี่เมื่อวางเมาส์เหนือรูปภาพ” แน่นอน คุณไม่น่าจะสังเกตเห็นบางสิ่งที่เซ็กซี่ในเอฟเฟกต์นี้ เว้นแต่คุณจะมีจินตนาการที่บ้าคลั่ง แต่เอฟเฟกต์นั้นน่าสนใจในแบบของมันเอง และมันก็คุ้มค่าที่จะให้ความสนใจกับมัน

เอฟเฟกต์ที่แตกต่างกันห้าแบบสำหรับรูปภาพเมื่อวางเมาส์เหนือ ลายเซ็นป๊อปอัพในสามรูปแบบ ผ้าม่านในรูปแบบของการเปลี่ยนระดับความโปร่งใสและการหมุนด้วยการเคลื่อนไหวในแนวนอน

เอฟเฟ็กต์ภาพเคลื่อนไหว 4 ประเภทสำหรับคำบรรยายภาพ ใช้งานโดยใช้ CSS3 เท่านั้น ตำแหน่งต่างๆ กันที่ลักษณะและเอฟเฟ็กต์ทรานซิชัน ค่อนข้างเป็นมาตรฐาน เพื่อทำความเข้าใจว่าแอนิเมชั่นทำงานอย่างไร ลองดูที่ แหล่งที่มาหน้าสาธิต ฉันไม่พบเอกสารแยกต่างหาก

แกลเลอรีภาพขนาดย่อที่มีเส้นตารางพร้อมลักษณะคำบรรยาย การหมุน จาง ลอย ฯลฯ เอฟเฟกต์ต่างๆ เอกสารเกี่ยวกับการใช้งานและการกำหนดค่าค่อนข้างหายาก แต่คุณสามารถเข้าใจได้ด้วยความปรารถนาพิเศษ

เอฟเฟ็กต์นี้ไม่ได้แสดงถึงอะไรพิเศษ การเปลี่ยนแปลงความสว่างของรูปภาพซ้ำๆ เมื่อโฮเวอร์ ยกเว้นว่าองค์ประกอบแอนิเมชันจะถูกเพิ่มเข้าไป คุณจะต้องจัดการกับรายละเอียดของการใช้งานด้วยตัวเองโดยการแยกซอร์สโค้ดสาธิต

เอฟเฟ็กต์โฮเวอร์อีก 10 ชุดสำหรับรูปภาพ การดัดแปลงต่างๆ ของภาพขนาดย่อเมื่อโฮเวอร์ ซูม หมุน หมุน มืดลง ฯลฯ

เอฟเฟ็กต์ภาพเคลื่อนไหวชายแดน

เอฟเฟ็กต์เฟรมแอนิเมชั่นรอบภาพต่างๆ ดูน่าสนใจดี มีคู่มือการตั้งค่าและใช้งานอย่างละเอียด

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

แนวคิดคือการสร้าง SVG ที่เป็นรูปร่างพื้นหลังสำหรับข้อความบางส่วนและเปลี่ยนเป็นรูปร่างอื่นเมื่อโฮเวอร์ ดังนั้นจึงเป็นไปได้ที่จะสร้างจำนวนมาก ตัวเลือกที่แตกต่างกันในตัวอย่าง เอฟเฟ็กต์การเปลี่ยนแปลงสามประเภทจะแสดงขึ้น ศักดิ์ศรี การใช้งาน SVGคือเราสามารถปรับขนาดแบบฟอร์มให้ตรงกับขนาดของคอนเทนเนอร์หลักได้

ภาพเลื่อน

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

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

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

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

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

ชุด เอฟเฟกต์ที่สวยงามเมื่อวางเมาส์เหนือภาพขนาดย่อ รูปลักษณ์ประเภทต่างๆ และการออกแบบคำบรรยายสำหรับรูปภาพ เส้นบางๆ ที่ตัดกันกับพื้นหลังที่มืดเล็กน้อยจะสร้างบล็อกข้อมูลที่อ่านง่าย

รูปร่างแปลกประหลาดและเอฟเฟกต์การขยายร่วมกับ เอฟเฟ็กต์ภาพเคลื่อนไหวลักษณะที่ปรากฏของคำอธิบายภาพสำหรับภาพขนาดย่อ

เอฟเฟกต์การซ้อนทับไอคอนที่ยอดเยี่ยมบนภาพขนาดย่อในรูปแบบต่างๆ ตัวอย่างนี้ใช้อักขระ (+) ล้อมรอบด้วยวงกลมโดยใช้รัศมีเส้นขอบ: ใน CSS คุณยังสามารถใช้แบบอักษรของไอคอนเพื่อทำให้แผงป๊อปอัปมีข้อมูลมากขึ้น

6 คำบรรยายภาพ

6 ลักษณะที่ปรากฏของคำบรรยายป๊อปอัปสำหรับภาพที่โฮเวอร์โดยใช้ CSS3 บทเรียนที่ละเอียดที่สุดสำหรับการใช้งานและการกำหนดค่า ซอร์สโค้ดพร้อมให้ดาวน์โหลด

วิธีสร้างเอฟเฟ็กต์โฮเวอร์คำบรรยายที่ละเอียดอ่อนและทันสมัย

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

ทิศทางรับรู้ CSS3 Hover Effect ด้วย jQuery

สร้างเอฟเฟ็กต์โฮเวอร์ที่ทราบทิศทางโดยใช้ CSS3 และ jQuery

เรียนรู้วิธีสร้างเอฟเฟ็กต์โฮเวอร์ที่รับรู้ทิศทางโดยใช้ความดีของ CSS3 และ jQuery แนวคิดคือการมีภาพซ้อนทับเล็กน้อยที่ด้านบนของภาพขนาดย่อบางส่วนจากทิศทางที่เรามาจากด้วยเมาส์

เอฟเฟกต์ Circle Hover พร้อมการเปลี่ยน CSS

บทช่วยสอนเกี่ยวกับวิธีสร้างเอฟเฟ็กต์โฮเวอร์แบบต่างๆ บนวงกลมด้วยการเปลี่ยนผ่าน CSS และการหมุนแบบ 3 มิติ

ชุดปุ่ม CSS นี้ประกอบด้วยสไตล์และเอฟเฟกต์ที่เรียบง่าย สร้างสรรค์ และละเอียดอ่อนเพื่อสร้างแรงบันดาลใจให้กับคุณ เอฟเฟ็กต์สามารถเห็นได้เมื่อวางเมาส์เหนือปุ่มบางปุ่มและคลิกที่ปุ่มอื่นๆ ส่วนใหญ่จะใช้การเปลี่ยนผ่าน CSS แต่ยังรวมถึงภาพเคลื่อนไหว CSS และสำหรับบางปุ่มจะใช้ JavaScript เล็กน้อยเพื่อเพิ่ม / ลบคลาสเอฟเฟกต์

เอฟเฟ็กต์การเลื่อนไอคอน

ชุดเอฟเฟ็กต์โฮเวอร์ของไอคอนทรงกลมแบบง่ายๆ พร้อมการเปลี่ยน CSS และแอนิเมชันสำหรับแรงบันดาลใจของคุณ

ต่อไปนี้คือชุดของเอฟเฟ็กต์การเลื่อนไอคอนอย่างง่าย สร้างเอฟเฟ็กต์ที่ละเอียดอ่อนและมีสไตล์โดยใช้การเปลี่ยน CSS และแอนิเมชันบนจุดยึดและองค์ประกอบเทียม

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

สามแง่มุมของการสร้างเว็บไซต์

จากมุมมองที่เป็นทางการ มีองค์ประกอบหลักสามส่วน (ในรูปแบบวากยสัมพันธ์ที่แตกต่างกัน) ที่ประกอบกันเป็นไซต์: โค้ด PHP, โค้ด JavaScript และคำอธิบาย สไตล์ css. ไม่สำคัญอย่างยิ่งว่าจะเรียกส่วนประกอบนี้หรือส่วนประกอบนั้นอย่างไรและใช้เวอร์ชันใด เวอร์ชัน HTMLมาร์กอัปที่ใช้และเบราว์เซอร์เวอร์ชันใดที่คุ้มค่า ตอนนี้ความเข้ากันได้ไม่ได้รับการยกย่องอย่างสูงเพราะ ที่เกี่ยวข้องในทุกช่วงเวลา: สิ่งที่ถูกเข้ารหัสและสิ่งที่ถูกเข้ารหัสสามารถแสดงและดำเนินการได้.

หากภาษาก่อนหน้านี้ต่อสู้เพื่อความคิด วันนี้ผู้ผลิตมาตรฐานในด้านเทคโนโลยีอินเทอร์เน็ตและเบราว์เซอร์ต้องการต่อสู้อย่างว่างเปล่ามากขึ้น

ส่วนตัวและสาธารณะ

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

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

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

กฎข้อแรก: พึ่งพามาตรฐาน แต่อย่าทำผิดพลาดด้วยตัวคุณเอง

CSS:hover คือการที่เมาส์อยู่เหนือองค์ประกอบในหน้า เมื่อคลิกเมาส์บนองค์ประกอบ องค์ประกอบนั้นจะทำงาน แต่เมื่อเคอร์เซอร์เลื่อนออกไป องค์ประกอบนั้นสามารถเปลี่ยนและแสดงตัวเองอีกครั้งในสถานะใช้งาน “:hover”, “active” และ “visited” เป็นคลาสหลอกที่ใช้มากที่สุดเมื่ออธิบายสไตล์

มันสะดวกมากในโค้ดไซต์ที่ไม่ต้องกังวลกับเรื่องเล็ก ๆ น้อย ๆ เช่นการเลื่อนเมาส์ไปเหนือองค์ประกอบ โดยระบุสองคำอธิบายในตารางคำอธิบายสไตล์:

สีพื้นหลัง: สีเขียว;

รับเมื่อคุณวางเมาส์เหนือองค์ประกอบ เปลี่ยนอัตโนมัติเปลี่ยนสีข้อความจากสีดำเป็นสีขาว และเปลี่ยนพื้นหลังขององค์ประกอบนี้เป็นสีเขียว Pseudo-classes สามารถนำไปใช้กับองค์ประกอบใดก็ได้และได้เอฟเฟ็กต์ภาพที่หลากหลาย

กฎข้อที่สอง: มาตรฐานที่เชื่อถือได้ ให้ความสำคัญกับรหัสของคุณ

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

ในทางกลับกัน เฉพาะในอุปกรณ์ที่มีหน้าจอสัมผัสแบบพิเศษเท่านั้นที่สามารถบังคับนิ้วได้โดยตรง หน้าจอสัมผัสเนื่องจากเป็นที่คุ้นเคยอยู่แล้วในสมาร์ทโฟน แท็บเล็ต และอุปกรณ์ที่คล้ายกัน

มีความแตกต่างอย่างมีนัยสำคัญและ :hover ไม่ทำงานที่นี่อย่างที่เราต้องการ โค้ดเป็นสิ่งที่ขาดไม่ได้ที่นี่ และการใช้คิวรีมีเดียไม่สามารถแก้ปัญหาทั้งหมดได้

ความเข้ากันได้มีราคาแพงเกินไปสำหรับความทันสมัย โลกข้อมูลดังนั้น เพื่อให้แน่ใจว่าการทำงานที่เหมาะสมของเว็บไซต์ภายใน ข้อกำหนดที่กำหนดไว้สำหรับการออกแบบเว็บและการทำงาน ควรเน้นที่กรณีการใช้งานที่จำเป็นขั้นต่ำ: CSS hover, CSS hover focus, CSS hover active (visited) ยิ่งโค้ด (ทั้งภายในเบราว์เซอร์และบนเซิร์ฟเวอร์) ควบคุมการออกแบบเว็บมากเท่าไหร่ก็ยิ่งดีเท่านั้น โปรแกรมคือการควบคุม จะดีกว่าเมื่อการควบคุมนี้ไม่ยอมแพ้ต่อมาตรฐานปัจจุบัน ซึ่งคุณมักจะไม่รู้ว่าจะต้องคาดหวังอะไร

ปุ่มและองค์ประกอบของหน้าอื่นๆ

ปุ่ม เลื่อน CSS- เป็นวิธีแก้ปัญหาที่ยอดเยี่ยม แต่โดยรวมแล้วแต่ละองค์ประกอบของหน้าคือ "ปุ่ม" ก่อนอื่นไซต์ต้องมีชีวิตอยู่และหากไม่รวมอยู่ในรหัสหากงานคือการสร้างไซต์ที่พัฒนาอย่างเพียงพอสำหรับพื้นที่แอปพลิเคชันและดำเนินการโดยคำนึงถึงพฤติกรรมของผู้เยี่ยมชม อย่างน้อยที่สุดใช้สไตล์ CSS คุณสามารถเพิ่มความมีชีวิตชีวาให้กับองค์ประกอบของหน้า

การใช้โฮเวอร์เอฟเฟ็กต์นั้นสะดวก ด้วยความช่วยเหลือของพวกเขา คุณสามารถเพิ่มชีวิตชีวาให้กับหน้าต่างๆ ได้อย่างง่ายดาย แต่โค้ดจะไม่รู้ว่าเมาส์กำลังทำอะไรบนหน้าจอหากไม่มีความสามารถในการติดตามการเคลื่อนไหวของมัน จากมุมมองนี้ นั่นคือเมื่อโค้ดควบคุมการเคลื่อนไหวของเมาส์ (= การเคลื่อนไหวของนิ้วบนสมาร์ทโฟน) ก็สามารถเน้นองค์ประกอบหรือแปลงองค์ประกอบได้อย่างอิสระ สิ่งนี้ไม่เกี่ยวข้องกับคลาสหลอก แต่ให้ ควบคุมทั้งหมดโค้ดเหนือลักษณะที่ปรากฏของหน้า ช่วยให้คุณสามารถแสดงได้อย่างเพียงพอ อุปกรณ์ต่างๆในเบราว์เซอร์ต่างๆ

ข้อผิดพลาดในสไตล์ชีต

เป็นไปไม่ได้ที่จะบอกว่ามาตรฐานสไตล์ CSS ไม่รู้ว่ากำลังทำอะไรอยู่ แต่ก็เป็นไปไม่ได้ที่จะบอกว่าพวกเขามีปฏิสัมพันธ์อย่างเต็มที่กับมาตรฐานอื่น ๆ ในด้านการเขียนโปรแกรมอินเทอร์เน็ต

สไตล์และคลาสหลอกสามารถอธิบายได้ในขั้นตอนของการเข้ารหัสเพจ ในขณะที่เซิร์ฟเวอร์สร้างเพจและในไดนามิก: ภายในเบราว์เซอร์แล้ว คุณสามารถสร้างได้อย่างง่ายดาย สไตล์ใหม่และเปลี่ยนสิ่งที่มีอยู่

การใช้ AJAX เมื่อไม่จำเป็นต้องสร้างหน้าใหม่เพื่อแสดงปฏิกิริยาต่อการกระทำของผู้เยี่ยมชม แต่ก็เพียงพอแล้วที่จะเปลี่ยนองค์ประกอบหรือหลายองค์ประกอบเพิ่ม "พริกไทย" เล็กน้อย "มิตรภาพ" ของรหัส - สิ่งที่มีอยู่แล้วในเบราว์เซอร์ (JavaScript) และสิ่งที่อยู่บนเซิร์ฟเวอร์ (PHP) - เป็นผู้เขียน (โปรแกรมเมอร์) ของไซต์จำนวนมาก

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

มาตรฐานและการเลียนแบบ

สามารถจำลองโฮเวอร์ใน JavaScript โดยใช้เหตุการณ์ onmouseover และ onmouseout บ่อยครั้งที่ทุกอย่างจบลงที่นี่ จากตำแหน่ง การใช้ความคิดเบื้องต้น, เมื่อไร เรากำลังพูดถึงเกี่ยวกับการสร้างไซต์ที่ใช้งานได้จริง การควบคุมอยู่ในมือของคุณย่อมดีกว่าปล่อยให้เป็นไปตามมาตรฐานในตำนานที่เปลี่ยนแปลงเกินความตั้งใจและความต้องการของนักพัฒนา

บางครั้งคุณสามารถอ่านบางอย่างเช่น " โอกาสนี้ใช้ได้แม้ใน IE" แต่บ่อยครั้งกว่าที่คุณสามารถอ่านเกี่ยวกับคำอธิบายสไตล์ที่เบราว์เซอร์ใดรับรู้ บ่อยครั้งที่คุณสามารถเรียนรู้เกี่ยวกับความแตกต่างของ JavaScript ในบางเบราว์เซอร์

ประเมินประสบการณ์ที่ได้รับ ชื่นชมความสามารถของ Chrome และ Opera วิจารณ์ความช้าและความเฉื่อยของเบราว์เซอร์จากผู้ผลิต (สิ่งที่ลืมไม่ได้ เป็นที่รักของโปรแกรมเมอร์ IE ทุกคนจาก Microsoft: “Internet Explorer รุ่นเก่าไม่ได้ดุเฉพาะคนขี้เกียจเท่านั้น หรือคนที่สามารถเล่น Klondike บนคอมพิวเตอร์เท่านั้น- คำพูดจากผู้เขียนอินเทอร์เน็ตที่ไม่รู้จัก) คุณควรยึดติดกับค่าเฉลี่ยสีทอง: ใช้สิ่งที่ได้ผลทุกที่และทุกเวลา

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

การจำลองและการควบคุม

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

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