27 כרטיסי HTML ו- CSS בחינם לבלוגים, מסחר אלקטרוני ועוד

כרטיסי רחף

משאבים מקוונים הם כמעט אינסופיים, אבל למצוא אותם באיכות זה באמת הדבר הקשהלמרות שחיפש מעט ויש רשימה טובה של אתרים המוקדשים לעיצוב, הדבר נהיה קל יותר. בתקופה בה שפות כמו HTML ו- CSS נמצאות במצב נהדר, התקרבות למשאבים בחינם ואיכותיים היא כמעט כמה קליקים משם.

אנו הולכים לרשום סדרה של כרטיסים בחינם ב- HTML ו- CSS שמתאימים באופן מושלם לכל סוגי הבלוגים, העסקים, המסחר האלקטרוני ועוד. אוסף ארוך טווח, כך שניתן יהיה לשלב אותו בחלק מהעבודה שאתה עושה עבור כל סוגי הלקוחות. בואו נעשה זאת עם רשימה זו המשתמשת ב- codepen.io כדי שתוכלו לקבל את הקוד גם ב- HTML וגם ב- CSS.

כיף כרטיס בלוג מס '1

כיף קלפים

א כרטיס עיצוב נהדר שאומר כמעט כל התמונה שמייצגת אותה, אתה יכול ללכת ל- codepen.io כדי להשיג את הקוד המתאים ולהתקין אותו באתר שלך.

כרטיסי חדשות CSS בלבד CSS

כרטיס חדשות

כרטיס זה, עם דברים זרים כרקע, בולט באנימציה החלקה שלה שחושפת את התוכן. זה CSS טהור.

פריט בבלוג

פוסט בבלוג תצוגה מקדימה של האינטרנט על ידי הבאת מצביע העכבר מעליו. יש לו CSS ו- HTML לשילוב קל.

כרטיסי בלוג

כרטיסי בלוג

עיצוב כרטיסי בלוג תגובה מינימליסטי. אנימציות מהירות וחלקות באיכות גבוהה שלא משאירים אף אחד אדיש.

כרטיסי ביקור רספונסיביים

קלפים רספונסיביים

בולט ל האנימציה הקלה על ידי הרחפת מצביע העכבר מעל תמונת הכרטיס.

עוד כרטיס בלוג

כרטיס רחף בלוג

נראה את טקסט כרטיס בעת ריחוף באותו.

כרטיסי ביקור

כרטיס ביקור

א כרטיס פשוט אך עדכני בקר עם הדגמה וקוד ב- HTML ו- CSS.

כרטיס ביקור בתלת מימד

כרטיס Flip 3D

הכרטיס הזה שווה אנימציה תלת ממדית עם HTML ו- CSS. מיוצר על ידי אלנה נזרובה, והוא מושלם לכרטיס ביקור בולט בצבעים.

כרטיס ביקור CSS

כרטיס ביקור CSS

כרטיס ביקור בולט מאוד ב- CSS זה מסתובב בתלת ממד לפנות מקום לסדרה של כתובות URL המגיבות לסמן העכבר ברגע שהנחנו אותה.

רשתות כרטיסים

כרטיס רשת

סדרת קלפים ממוקמים היטב עם עיצוב מושך את העין. זה מפתיע בגלל האסתטיקה הפשטנית שלו, אבל עם מכה טובה בקוד HTML, CSS ו- SCSS.

מתגלים כרטיסי תלת מימד

כרטיס תלת מימד

סדרת רשתות כרטיסים זו לחשוף מידע נוסף כרגע השארנו את העכבר מעל הסמל הירוק. במקביל לעזיבת המצביע, שאר הרשת נעה בהתאם.

כרטיס לעיצוב חומרים רספונסיבי

חומר עיצוב

עם שפת העיצוב של, סדרת הקלפים הזו מופיעה, מודגשת על ידי סמל התפריט הפותח את כל המידע של השחקנים כמו במקרה לדוגמא. אנימציות יפות ואינטואיטיביות עם מראה חזותי נהדר.

רשת כרטיסי פלקסבוקס

Flexbox

אב טיפוס של כרטיס באותו גובה שהם בולטים בשימוש בפורמט flexbox ברשת. אחד מערכיו הוא השימוש ביחסי גובה-רוחב של CSS ומסנני CSS.

Clash of Clans Cards

התנגשות קלאנים

El משחק סלולרי פופולרי יש את הכרטיסים ב- HTML וב- CSS שנוצרו על ידי אנדרה מדרנג. אנו יכולים לעבור ביניהם בעזרת אנימציה מדויקת וחזותית במיוחד.

כרטיסי שקופיות למסחר אלקטרוני

כרטיס מוצר

עם אנימציה זריזה, הקלפים האלה מעודדים אותך לחפש את האלמנטים שלהם כדי לגלות על מה מדובר. עם עיצוב נהדר של עומר דסוקי.

עיצוב ממשק - כרטיס מוצר

ממשק משתמש למוצר

כרטיס מושלם לעיצוב אלה של תוצר של המסחר האלקטרוני שלנו. מיוצר ב- HTML ו- CSS.

כרטיס מוצר

מוצר מסחר אלקטרוני

מאותו כרטיס אנחנו יכולים להעביר מספר תמונות כדי לראות טוב יותר את המוצר. הוא כולל את כפתור ההוספה לעגלה ומכיל קוד HTML, CSS וקוד JavaScript.

כרטיסי מוצר Flexy

כרטיס Flexy

כשמו כן הוא, משתמש ב- flexbox כדי ליצור אנימציה מעניינת כאשר אנו לוחצים על כפתור הוסף לעגלה.

קלפי

הפוך כרטיס

קוד קטן לכמה קלפים עם חלק ו אנימציה מושלמת. תוך מספר דקות תוכלו לשלב אותם. לאחרונה נוסף לקודפן.

כרטיסים ככרטיסי תלת מימד

כרטיס תלת מימד

יש לציין כי קלפים אלה הם כאילו הייתה לנו סדרת קלפים על שולחן. המצביע נשאר לנוח והם מתקרבים, לוחצים על כל אחד מהם ומראים את גב הכרטיס כדי להציג את פרטי המוצר. אנחנו לוחצים שוב ומשאירים את זה כמו בחזית. מושלם ללימוד מאפייני 3D CSS.

כרטיס פרלקס

כרטיס מקביל

ניסוי ויזואלי מאוד עם אפקט פליפ המושך את העין. עדיף שתראה את זה כדי לדעת על מה הוא מדבר.

העבר את העכבר לכרטיסים

כרטיס רחף

אפקט פשוט אבל מרחף גימיקי על קלפים.

אפקט רחף פשוט

קלף פשוט

אפקט מרשים למדי, אבל יש לזה השפעה רבה ברגע שאנחנו מדמיינים את זה.

קלפי עומק מקבילים

עומק מקביל

קלפים אלה נושאים את מושג פרלקסה למעלה ליצור כמה קלפים בולטים מאוד לפי העיצוב. אתה רק צריך לראות את זה כדי להבין טוב יותר את ההשפעה שהוא מייצר על המשתמש כאשר אתה בוחר בחלק מהקטגוריות בבלוג שלנו.

כרטיס ממשק משתמש לסרטים

כרטיס סרט

כרטיס של פריסה נהדרת עם HTML ו- CSS.

כרטיס פרופיל

כרטיס איש קשר

מוי אנימציות טובות לכרטיס קשר שבו נוכל ליישם גישה לפרופילי מדיה חברתית. HTML ו- CSS.

כרטיסי פולארויד ארוזים

פולארויד

עם מאפיינים, פילטרים ו- מעברים בהתאמה אישית של CSS נוצרת סדרה זו של קלפים מקובצים של פולארויד; אל תחמיץ את תמונות SVG אלה ברשת.


תוכן המאמר עומד בעקרונותינו של אתיקה עריכתית. כדי לדווח על שגיאה לחץ כאן.

תגובה, השאר את שלך

השאירו את התגובה שלכם

כתובת הדוא"ל שלך לא תפורסם. שדות חובה מסומנים *

*

*

  1. אחראי לנתונים: מיגל אנחל גטון
  2. מטרת הנתונים: בקרת ספאם, ניהול תגובות.
  3. לגיטימציה: הסכמתך
  4. מסירת הנתונים: הנתונים לא יועברו לצדדים שלישיים אלא בהתחייבות חוקית.
  5. אחסון נתונים: מסד נתונים המתארח על ידי Occentus Networks (EU)
  6. זכויות: בכל עת תוכל להגביל, לשחזר ולמחוק את המידע שלך.

  1.   Cristian דיג'ו

    ניתן יהיה להכניס כל אחד מהכרטיסים הללו לדף עם wordpress