แหล่งข้อมูลออนไลน์แทบไม่มีที่สิ้นสุด แต่ การค้นหาพวกเขาที่มีคุณภาพเป็นสิ่งที่ยากจริงๆแม้ว่าจะค้นหาข้อมูลเล็กน้อยและมีรายชื่อเว็บไซต์ที่ดีสำหรับการออกแบบ แต่สิ่งต่างๆก็ง่ายขึ้น ในช่วงเวลาที่ภาษาเช่น HTML และ CSS เป็นช่วงเวลาที่ดีการเข้าใกล้แหล่งข้อมูลคุณภาพสูงฟรีนั้นแทบจะอยู่ห่างออกไปเพียงไม่กี่คลิก
เราจะแสดงรายการชุด การ์ดฟรีใน HTML และ CSS เหมาะอย่างยิ่งสำหรับบล็อกทุกประเภทธุรกิจอีคอมเมิร์ซและอื่น ๆ อีกมากมาย คอลเลกชันระยะยาวเพื่อให้สามารถรวมเข้ากับงานบางอย่างที่คุณกำลังทำสำหรับลูกค้าทุกประเภท ลองทำกับรายการนี้ที่ใช้ codepen.io เพื่อให้คุณสามารถรับโค้ดได้ทั้งใน HTML และ CSS
บล็อกการ์ดสนุก # 1
Una การ์ดออกแบบที่ยอดเยี่ยม ที่บอกเกือบทุกอย่างของภาพที่แสดงถึงภาพนั้นคุณสามารถผ่าน codepen.io เพื่อรับรหัสที่เกี่ยวข้องและติดตั้งบนเว็บไซต์ของคุณ
CSS News Cards เท่านั้น CSS
การ์ดใบนี้กับ Stranger Things เป็นพื้นหลังโดดเด่นด้วยภาพเคลื่อนไหวที่ราบรื่นซึ่งเปิดเผยเนื้อหา เป็น CSS ที่บริสุทธิ์
รายการโพสต์บล็อก
การดูตัวอย่างเว็บโดยนำตัวชี้เมาส์ไปวางไว้บนนั้น มี CSS และ HTML เพื่อการรวมตัวที่ง่าย
การ์ดบล็อก
การออกแบบการ์ดบล็อกที่ตอบสนองอย่างเรียบง่าย ภาพเคลื่อนไหวที่รวดเร็วและราบรื่น คุณภาพสูงที่ไม่ปล่อยให้ใครสนใจ
นามบัตรที่ตอบสนอง
โดดเด่นสำหรับ ภาพเคลื่อนไหวเล็กน้อย โดยการเลื่อนตัวชี้เมาส์ไปที่ภาพการ์ด
การ์ดบล็อกอื่น
ปรากฏไฟล์ ข้อความการ์ดเมื่อวางเมาส์เหนือ ในสิ่งเดียวกัน
นามบัตร
Una การ์ดที่เรียบง่าย แต่เป็นปัจจุบัน เยี่ยมชมด้วยการสาธิตและโค้ดใน HTML และ CSS
นามบัตร 3 มิติ
บัตรนี้มีมูลค่า ภาพเคลื่อนไหว 3 มิติด้วย HTML และ CSS. ทำโดย Elena Nazarova เหมาะสำหรับนามบัตรที่มีสีสันโดดเด่น
นามบัตร CSS
นามบัตรที่โดดเด่นมากใน CSS นั้น หมุนเป็น 3 มิติ เพื่อหลีกเลี่ยงชุดของที่อยู่ URL ที่ตอบสนองต่อตัวชี้เมาส์ในขณะที่เราวางไว้
กริดการ์ด
ชุดไพ่ที่มีการจัดวางอย่างดี การออกแบบที่สะดุดตา. เป็นเรื่องที่น่าแปลกใจสำหรับสุนทรียศาสตร์ที่เรียบง่าย แต่มีผลดีในโค้ด HTML, CSS และ SCSS
การ์ด 3 มิติถูกเปิดเผย
การ์ดกริดชุดนี้ เปิดเผยข้อมูลเพิ่มเติมในขณะนี้ ที่เราทิ้งเมาส์ไว้ที่ไอคอนเป็นสีเขียว ในขณะเดียวกันกับที่เราออกจากตัวชี้ตารางที่เหลือจะเคลื่อนที่ตาม
การ์ดออกแบบวัสดุที่ตอบสนอง
ด้วยการ ภาษาออกแบบของ Googleการ์ดชุดนี้จะปรากฏขึ้นโดยโดดเด่นที่ไอคอนเมนูที่เปิดข้อมูลทั้งหมดของนักแสดงดังในกรณีตัวอย่าง ภาพเคลื่อนไหวที่สวยงามและใช้งานง่ายพร้อมรูปลักษณ์ที่ยอดเยี่ยม
ตารางการ์ด Flexbox
ต้นแบบการ์ด ที่ความสูงเดียวกันกับที่พวกเขาโดดเด่นในการใช้รูปแบบตาราง flexbox ค่าอื่น ๆ คือการใช้อัตราส่วน CSS และตัวกรอง CSS
การ์ด Clash of Clans
El เกมมือถือยอดนิยม มีการ์ดใน HTML และ CSS ที่สร้างโดย Andre Madarang เราสามารถผ่านระหว่างพวกเขาด้วยภาพเคลื่อนไหวที่แม่นยำและมีภาพสูง
สไลด์การ์ดสำหรับอีคอมเมิร์ซ
ด้วย ภาพเคลื่อนไหวที่คล่องตัวการ์ดเหล่านี้กระตุ้นให้คุณค้นหาองค์ประกอบของมันเพื่อดูว่ามันเกี่ยวกับอะไร ด้วยการออกแบบที่ยอดเยี่ยมจาก Omar Dsoky
การออกแบบอินเตอร์เฟส - การ์ดผลิตภัณฑ์
การ์ดที่สมบูรณ์แบบสำหรับการออกแบบ ผลิตภัณฑ์อีคอมเมิร์ซของเรา. สร้างใน HTML และ CSS
บัตรผลิตภัณฑ์
จากการ์ดใบเดียวกันเราทำได้ ผ่านหลายภาพ เพื่อดูผลิตภัณฑ์ได้ดีขึ้น ประกอบด้วยปุ่มเพิ่มลงในรถเข็นและมีโค้ด HTML, CSS และ JavaScript
บัตรผลิตภัณฑ์ Flexy
ตามชื่อที่ระบุ ใช้ flexbox เพื่อสร้างแอนิเมชั่นที่น่าสนใจเมื่อเราคลิกที่ปุ่มเพิ่มลงในรถเข็น
พลิกไพ่
รหัสเล็กน้อยสำหรับการ์ดบางใบที่มีความเรียบและ ภาพเคลื่อนไหวที่สมบูรณ์แบบ. คุณสามารถรวมเข้าด้วยกันได้ภายในไม่กี่นาที เพิ่มล่าสุดใน codepen
การ์ดเป็นการ์ดผลิตภัณฑ์ 3 มิติ
ควรสังเกตว่าการ์ดเหล่านี้เป็น ราวกับว่าเรามีไพ่ชุดหนึ่งอยู่บนโต๊ะ. ตัวชี้ถูกวางไว้ด้านซ้ายและซูมเข้าคลิกที่แต่ละตัวชี้และแสดงด้านหลังของการ์ดเพื่อแสดงข้อมูลผลิตภัณฑ์ เราคลิกอีกครั้งและปล่อยไว้ตามเดิมด้วยด้านหน้า เหมาะสำหรับการเรียนรู้คุณสมบัติ 3D CSS
การ์ดพารัลแลกซ์
การทดลองภาพที่สวยงามด้วยไฟล์ เอฟเฟกต์พลิกที่สะดุดตา. จะดีกว่าถ้าคุณเห็นมันเพื่อให้รู้ว่ามันกำลังพูดถึงอะไร
เอฟเฟกต์โฮเวอร์สำหรับการ์ด
เอฟเฟกต์ง่ายๆ แต่ วางเมาส์เป็นลูกเล่น เกี่ยวกับการ์ด
เอฟเฟกต์โฮเวอร์ง่ายๆ
เอฟเฟกต์ที่ค่อนข้างเรียบง่ายโดดเด่นแต่นั่นมีผลอย่างมากในช่วงเวลาที่เราเห็นภาพ
การ์ดความลึก Parallax
การ์ดเหล่านี้มี แนวคิดพารัลแลกซ์ขึ้นสู่จุดสูงสุด เพื่อสร้างการ์ดที่โดดเด่นมากโดยการออกแบบ คุณต้องดูเพื่อทำความเข้าใจให้ดีขึ้นถึงผลกระทบที่เกิดขึ้นกับผู้ใช้เมื่อเลือกบางหมวดหมู่ในบล็อกของเรา
การ์ด UI สำหรับภาพยนตร์
การ์ดของ รูปแบบที่ยอดเยี่ยมที่สร้างขึ้นด้วย HTML และ CSS
การ์ดโปรไฟล์
มาก ภาพเคลื่อนไหวที่ดี สำหรับบัตรผู้ติดต่อที่เราสามารถใช้การเข้าถึงโปรไฟล์โซเชียลมีเดีย HTML และ CSS
การ์ดที่แถมมาจากโพลารอยด์
ด้วยคุณสมบัติตัวกรองและ การเปลี่ยน CSS ที่กำหนดเอง การ์ดจัดกลุ่มโพลารอยด์ชุดนี้ถูกสร้างขึ้น อย่าพลาดเว็บภาพ SVG เหล่านี้.