ביצוע פשעי CSS

תמונה

הזמן של CSS-Tricks נגמר. עכשיו זה הזמן לפשעי CSS!

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

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

בלקל מורי יצר קונטרה כאשר משיכת ידית מסובבת לאט סדרה של גלגלי שיניים, גלגלות ושרשראות. בסופו של דבר נפתח צמצם לחשוף את הקמע של האתר ("ביצים") ואת ההכרזה "עבודה טובה!". בהיתי בזה בכלי מפתחים וזה שילוב מדהים של grid, resize, transform, ו calc(). בסופו של דבר הוספתי א border לכל <div>כדי לנסות ולהבין טוב יותר איך כל אלמנט בודד זז.

היו מצבים בעבר בהם הוגבלו משימוש בערכת הכלים המלאה של HTML, JavaScript ו-CSS. היו מקרים רבים של שימוש דקורטיבי צורות CSS כדי לעקוף תמונות. השתמשתי :hover כדרך לעקיפת הבעיה mouseenter ו mouseleave. השתמשתי input:checked בתור בורר אחים להחלפה.

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


קישור ישיר →

בול זמן:

עוד מ טריקים של CSS