משאבים מקוונים הם כמעט אינסופיים, אבל למצוא אותם באיכות זה באמת הדבר הקשהלמרות שחיפש מעט ויש רשימה טובה של אתרים המוקדשים לעיצוב, הדבר נהיה קל יותר. בתקופה בה שפות כמו HTML ו- CSS נמצאות במצב נהדר, התקרבות למשאבים בחינם ואיכותיים היא כמעט כמה קליקים משם.
אנו הולכים לרשום סדרה של כרטיסים בחינם ב- HTML ו- CSS שמתאימים באופן מושלם לכל סוגי הבלוגים, העסקים, המסחר האלקטרוני ועוד. אוסף ארוך טווח, כך שניתן יהיה לשלב אותו בחלק מהעבודה שאתה עושה עבור כל סוגי הלקוחות. בואו נעשה זאת עם רשימה זו המשתמשת ב- codepen.io כדי שתוכלו לקבל את הקוד גם ב- HTML וגם ב- CSS.
כיף כרטיס בלוג מס '1
א כרטיס עיצוב נהדר שאומר כמעט כל התמונה שמייצגת אותה, אתה יכול ללכת ל- codepen.io כדי להשיג את הקוד המתאים ולהתקין אותו באתר שלך.
כרטיסי חדשות CSS בלבד CSS
כרטיס זה, עם דברים זרים כרקע, בולט באנימציה החלקה שלה שחושפת את התוכן. זה CSS טהור.
פריט בבלוג
תצוגה מקדימה של האינטרנט על ידי הבאת מצביע העכבר מעליו. יש לו CSS ו- HTML לשילוב קל.
כרטיסי בלוג
עיצוב כרטיסי בלוג תגובה מינימליסטי. אנימציות מהירות וחלקות באיכות גבוהה שלא משאירים אף אחד אדיש.
כרטיסי ביקור רספונסיביים
בולט ל האנימציה הקלה על ידי הרחפת מצביע העכבר מעל תמונת הכרטיס.
עוד כרטיס בלוג
נראה את טקסט כרטיס בעת ריחוף באותו.
כרטיסי ביקור
א כרטיס פשוט אך עדכני בקר עם הדגמה וקוד ב- HTML ו- CSS.
כרטיס ביקור בתלת מימד
הכרטיס הזה שווה אנימציה תלת ממדית עם HTML ו- CSS. מיוצר על ידי אלנה נזרובה, והוא מושלם לכרטיס ביקור בולט בצבעים.
כרטיס ביקור CSS
כרטיס ביקור בולט מאוד ב- CSS זה מסתובב בתלת ממד לפנות מקום לסדרה של כתובות URL המגיבות לסמן העכבר ברגע שהנחנו אותה.
רשתות כרטיסים
סדרת קלפים ממוקמים היטב עם עיצוב מושך את העין. זה מפתיע בגלל האסתטיקה הפשטנית שלו, אבל עם מכה טובה בקוד HTML, CSS ו- SCSS.
מתגלים כרטיסי תלת מימד
סדרת רשתות כרטיסים זו לחשוף מידע נוסף כרגע השארנו את העכבר מעל הסמל הירוק. במקביל לעזיבת המצביע, שאר הרשת נעה בהתאם.
כרטיס לעיצוב חומרים רספונסיבי
עם שפת העיצוב של, סדרת הקלפים הזו מופיעה, מודגשת על ידי סמל התפריט הפותח את כל המידע של השחקנים כמו במקרה לדוגמא. אנימציות יפות ואינטואיטיביות עם מראה חזותי נהדר.
רשת כרטיסי פלקסבוקס
אב טיפוס של כרטיס באותו גובה שהם בולטים בשימוש בפורמט flexbox ברשת. אחד מערכיו הוא השימוש ביחסי גובה-רוחב של CSS ומסנני CSS.
Clash of Clans Cards
El משחק סלולרי פופולרי יש את הכרטיסים ב- HTML וב- CSS שנוצרו על ידי אנדרה מדרנג. אנו יכולים לעבור ביניהם בעזרת אנימציה מדויקת וחזותית במיוחד.
כרטיסי שקופיות למסחר אלקטרוני
עם אנימציה זריזה, הקלפים האלה מעודדים אותך לחפש את האלמנטים שלהם כדי לגלות על מה מדובר. עם עיצוב נהדר של עומר דסוקי.
עיצוב ממשק - כרטיס מוצר
כרטיס מושלם לעיצוב אלה של תוצר של המסחר האלקטרוני שלנו. מיוצר ב- HTML ו- CSS.
כרטיס מוצר
מאותו כרטיס אנחנו יכולים להעביר מספר תמונות כדי לראות טוב יותר את המוצר. הוא כולל את כפתור ההוספה לעגלה ומכיל קוד HTML, CSS וקוד JavaScript.
כרטיסי מוצר Flexy
כשמו כן הוא, משתמש ב- flexbox כדי ליצור אנימציה מעניינת כאשר אנו לוחצים על כפתור הוסף לעגלה.
קלפי
קוד קטן לכמה קלפים עם חלק ו אנימציה מושלמת. תוך מספר דקות תוכלו לשלב אותם. לאחרונה נוסף לקודפן.
כרטיסים ככרטיסי תלת מימד
יש לציין כי קלפים אלה הם כאילו הייתה לנו סדרת קלפים על שולחן. המצביע נשאר לנוח והם מתקרבים, לוחצים על כל אחד מהם ומראים את גב הכרטיס כדי להציג את פרטי המוצר. אנחנו לוחצים שוב ומשאירים את זה כמו בחזית. מושלם ללימוד מאפייני 3D CSS.
כרטיס פרלקס
ניסוי ויזואלי מאוד עם אפקט פליפ המושך את העין. עדיף שתראה את זה כדי לדעת על מה הוא מדבר.
העבר את העכבר לכרטיסים
אפקט פשוט אבל מרחף גימיקי על קלפים.
אפקט רחף פשוט
אפקט מרשים למדי, אבל יש לזה השפעה רבה ברגע שאנחנו מדמיינים את זה.
קלפי עומק מקבילים
קלפים אלה נושאים את מושג פרלקסה למעלה ליצור כמה קלפים בולטים מאוד לפי העיצוב. אתה רק צריך לראות את זה כדי להבין טוב יותר את ההשפעה שהוא מייצר על המשתמש כאשר אתה בוחר בחלק מהקטגוריות בבלוג שלנו.
כרטיס ממשק משתמש לסרטים
כרטיס של פריסה נהדרת עם HTML ו- CSS.
כרטיס פרופיל
מוי אנימציות טובות לכרטיס קשר שבו נוכל ליישם גישה לפרופילי מדיה חברתית. HTML ו- CSS.
כרטיסי פולארויד ארוזים
עם מאפיינים, פילטרים ו- מעברים בהתאמה אישית של CSS נוצרת סדרה זו של קלפים מקובצים של פולארויד; אל תחמיץ את תמונות SVG אלה ברשת.
ניתן יהיה להכניס כל אחד מהכרטיסים הללו לדף עם wordpress
אני אוהב אותם