20 מדהים חג המולד פרויקטים מוסתרת ב
CodePen הוא מגרש משחקים מקוון למפתחים חזיתיים מוכשרים, מקום שבו אתה תמיד יכול למצוא פרויקטים מגניבים להרחיב את האופקים שלך, ולראות מה מפתחים אחרים עד. סוף השנה החגים הם הזדמנות נפלאה להפתיע את יקיריכם עם פרויקטים אישיים יצירתיים, או להגיד תודה ללקוחות שלך עם כמה עיצובים מגניב, חיתוך קצה שיסייע לעודד את החג.
בהודעה זו נסתכל על 20 מדהים ניסויים חג המולד על, כי אתה יכול להשתמש בהשראה כדי ליצור עיצובים משלך.
1. משפחה חג המולד שיר
זה נהדר חג המולד חג המולד App יכול לשחק שירים האהוב עליך חג המולד מתארח על SoundCloud. כללי הסגנון נכתבים בשפה הסגנונית LESS, והפונקציונליות של נגן המוזיקה מסופקת על ידי תוסף מותאם אישית jQuery.
פתית השלג וסמלי עץ חג המולד ברקע מעניקים אווירה חגיגית לעיצוב, ואם אתה מרחף מעל העט אתה יכול גם למצוא כמה אפקטי CSS מתוחכם.
2. עץ חג המולד דיגיטלי
עיצוב לחג המולד הוא תמיד עבודה אסיר תודה, כמו אלמנטים ויזואליים טיפוסי שלה ניתן לבנות בדרכים יצירתיות רבות. עט זה הוא דוגמה טובה לכך. בהתחלה אתה יכול רק לראות משולשים צבעוניים, לכאורה לא קשור החגים, אבל כאשר אתה לוחץ על כפתור לחשוף, הם נקבעים יחד לתוך עץ חג המולד. זה לא רק פתרון ייחודי, אלא גם מזכיר משחק פשוט יותר.
3. אנימציה חג המולד עם שלג
אתה לא בהכרח צריך להשתמש ב- JavaScript, אם אתה רוצה ליצור אנימציה מגניב לחג המולד. בעט זה, הן את הנפשה שלג ואת תמונות הרקע נוצרות אך ורק ב- CSS. כדאי לבדוק את הקוד קצת, כפי שהוא מראה את היכולות המדהימות של CSS3. תמונת הרקע יכול להיות אפילו טועה עבור גרפיקה SVG אמיתי.
4. סנטה על הריצה!
סנטה על הריצה! הוא משחק כיף Javascript עבור החגים תוך שימוש במסגרת phaser.js HTML5 המשחק. אין יותר מדי חוקים במשחק הזה: סנטה רץ עד אין קץ, או לפחות עד שהוא נופל. עט זה נותן לך הזדמנות מצוינת להבין איך לכתוב משחק פשוט יותר ב- JavaScript.
5. סוד סנטה שם בורר
בחירת שם מתוך כובע הייתה דרך פופולרית בבתי ספר ומשרדים לבחור סנטה סתר - עט זה רק גרסה דיגיטלית של מסורת זו. כפי שהוא משתמש רק וניל JavaScript, אתה יכול בקלות להטביע אותו לתוך האתר שלך. פשוט לשנות את השמות בתוך המשתנה לתת.
6. חג המולד כדורים ב CSS טהור
כדורי חג המולד העליזים האלה נכתבים ב- CSS טהור, תוך ניצול המינוף של חוקי רדיוס הגבול. החלקים השונים של הכדורים נקבעים יחד על ידי שימוש במיקומים יחסית מחושבים.
אם אתה רוצה להוסיף במהירות אווירה החג לדף אינטרנט, פשוט להכניס כמה כדורים אלה למקומות המתאימים בצבע המתאים העיצוב הכולל של האתר.
7. פתיתי שלג פתוחים
אתה יכול להפוך את פתיתי השלג האלה לנוע על ידי מרחף מעל אותם על שולחן העבודה, או על ידי הטיה את הטלפון החכם. הפונקציונליות ניתנת על ידי JavaScript מונחה עצמים כי הוא בשימוש חכם על ידי היזם ליצור בכיתה Snowflake מותאם אישית.
פתיתי השלג עצמם בנויים ב- CSS3, והרקע משתמש במעברי צבע - אין תמונות בעט זה בכלל.
8. ניסוי אקורדיון חג
זה אקורדיון החג הוא פשוט יפה. אם אתה מרחף מעל לשונית זה מגיע להתמקד על ידי הרחבת קצת, ואם אתה לוחץ על זה פתאום קופץ ומכסה את כל הדף. זה מעניין לציין כי זה עט משתמש Scalable וקטור גרפיקה (SVG) כי הם מנוסח עם CSS.
SVGs הם חזקים יותר ממה שהם נראים במבט ראשון, הם יכולים להיות ממוקם בעדינות תוכנן עם אותם כללי סגנון אנו משתמשים עם רכיבי HTML רגילים.
9. שטוח Pure CSS שלג
מי אמר עיצוב שטוח צריך להיות משעמם? זה איש שלג מקסים יכול בקלות להוסיף רוח חג המולד לכל עיצוב. אין תמונות המשמשות את איש השלג, זה כתוב לחלוטין ב- CSS. כדאי להעיף מבט בקוד ה- CSS קצת, ולראות איך היזם משתמש ב: לפני ו: אחרי סלקטורים pseudo כדי להשיג את התוצאה המיועדת.
10. פתית שלג CSS3
באפשרותך להקל על יצירת תמונות CSS3 בלבד באמצעות כלי פיתוח מתקדמים בחזית; זה מעוצב היטב CSS3 פתית שלג הוא דוגמה מצוינת לכך. היזם עשה שימוש בשפת התבנית של ג'ייד, היוצרת HTML, והפרוצדורה של Sass CSS ליישם את עיצוב פתית השלג המדהים הזה.
11. חג המולד כפתור
עיצובים חכמים לעתים קרובות לבחור פתרונות מתוחכמים, בדיוק כמו כפתור חג המולד המושלג בעט הזה. רקע אדום כהה הוא בחירה מושלמת עבור עיצוב חג המולד; לא הכל צריך להיות ירוק אחרי הכל.
הצבעים, המעברי הצבע, הגופן ואפקט השהייה הופכים את הכפתור הזה לאלגנטי וחגיגי. אתה צריך רק כמה מהם במהירות לקשט אתר עבור Christmastime.
12. פרלקס חג שמח
אם אתה אוהב גלילה פרלקסה, למה לא להשתמש בו עבור עיצובים החג שלך? היזם של עט זה בחן ניסויים באפקט, והשתמש תוסף jQuery parallax.js באופן פחות נפוץ, אפקט הגלילה היא לא אנכית כרגיל, אבל אופקי. אווירת חג המולד מתעצמת בשלג מרשים
אם הייתי צריך לבחור על כל פגם בעט זה, זה יהיה הבחירה צבע: אותיות לבנות על רקע לבן חלקית מחלישה באופן משמעותי את הנגישות של העיצוב.
13. CSS חג המולד גלישת נייר
אתה יכול ליצור ייחודי לחלוטין חג המולד גלישת נייר בעזרת CSS3. היזם של עט זה מראה לא רק אחד, אבל שישה וריאנטים עבור זה. הדפוסים היפים מושגים על ידי ניצול חכם של הדרגתיים CSS ואת המאפיין רקע- blend מצב.
אתה יכול למצוא דוגמאות אפילו יותר מגניב הסבר מפורט באתר האינטרנט של היזם.
14. תיבה בתוך תיבה
עיצוב דמיוני זה קיבל השראה מבובות רוסיות מסורתיות (בובה בתוך בובה). אם אתה פותח את הקופסה החיצונית על ידי לחיצה על זה, זה מגלה תיבה פנימית כי הוא גם את הקופסה החיצונית של תיבת פנימית אחרת. הפונקציונליות נכתבת ב- jQuery, והמקומות המדויקים של הקופסאות נקבעים בעזרת כללי המיקום המוחלט והיחידי בקובץ CSS.
15. קופסת מתנה עם אפקט נייר לקלף
אם אתה מצליח להסיר את הסרט מתוך מתנה זו על ידי גרירת אותו משם, אתה יכול להסתכל על אפקט קליפת נייר supercool שחושף את התוכן הפנימי של המתנה. אתה יכול לקרוא את המדריך המלא באתר האינטרנט של היזם, זה טריק שזה בהחלט שווה ללמוד. אם אתה רק רוצה להשתמש בקוד אתה יכול לשכפל אותו GitHub גם כן.
16. חג המולד רוח אנימציה אנימציה
חג המולד יכול להיות זמן נהדר להתנסות עם דברים חדשים, בדיוק כמו היזם עשה את זה בעט זה באמצעות בד HTML5 כרקע אנימציה. הבד מגיע לפני התוכן (חג שמח!) בקובץ HTML, והוא מוגדר כרקע בעזרת המיקום החכם CSS.
העט גם משתמש ברקע הנפשה שכלול כקובץ JavaScript נפרד.
17. כרטיס מתנה כרטיס
זה לתפוס את כרטיס מתנה הוא לא רק לחג המולד, אבל ניתן להשתמש בו בכל עת כאשר אתה רוצה להפתיע את המשתמשים עם מתנה באתר האינטרנט שלך. הוא אינו מסתמך על JavaScript כפי שהוא כתוב כולו בשפת הסגנונות של Sass.
העיצוב עושה שימוש לנכס CSS3 נתיב נתיב המאפשר למפתחים להציג רק אזור מסוים של אלמנט, במקום להציג את כל האזור.
18. טהור CSS חג שמח כרטיס
זה סנטה צוחק אינסופי - באמצעות HTML בלבד CSS3 - יכול לתת לך את ההזדמנות להבין איך תחביר אנימציה keyframe ניתן להשתמש בפועל. ב- CSS3 ניתן להשתמש בכללי @keyframes כדי לציין את הכללים של הנפשה, ולאחר מכן תוכל לקשור את האנימציה שצוינה לאלמנט מסוים באמצעות המאפיין CSS3 של האנימציה.
אתה צריך להוסיף את השם של keyframe כמו הערך הראשון של נכס האנימציה, בדיוק כמו מפתח עשה את זה עם keyframes אישית בשם bodyLaugh, beardLaugh, headLaugh, ו mouthLaugh נוצר במיוחד עבור העט הזה.
19. סדנת חג המולד
אם אתה מרחף מעל זה חג המולד מרשים Xracker, זה מגלה מסר חג המולד ייחודי זה דרך מדהימה לאחל חג שמח למבקרים שלך. ה- HTML נכתב ב- HAML, ה- HTML הפשטת HTML Markup Language, בעוד שכללי הסגנון מנצלים את כוחה של השפה הססגונית של גלישת הסגנונות של Sass.
התוצאה היא אכן חכמה ומדהימה. על ידי הוספת קצת יותר JavaScript זה יכול לשמש גם כדי לספק ציטוטים מותאמים אישית או הודעות למשתמשים.
20. מהבהב אורות חג המולד
אלה מהבהבים אורות חג המולד יכול לתת במהירות אווירה ייחודית לכל אתר אינטרנט. הקוד הקדמי כתוב ב- HAML, היוצר HTML, Sass המתחבר ל- CSS ו- jQuery.
אפקט זוהר אנימציה מושגת על ידי כלל @keyframes הנ"ל שמספק CSS3. הצבעים של ההגהים נקבעים בקובץ jQuery על ידי הוספת 50 מעלות לערך הגוון של הקודם הוביל באמצעות HSL צבע סולם.
