כיצד ליצור ממשק משתמש Switch באמצעות CSS מסכה

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

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

בגלל כמה בעיות תאימות דפדפן - לא כל תכונות המיסוך נתמכות בכל דפדפן (נכון ליוני 2016) - אני אראה שתי טכניקות להוספת מסכות, אחד לדפדפנים מבוססי Webkit ואחד עבור Firefox. שני השלבים הראשונים זה שלושה שלבים הדרכה זהים עבור כל דפדפן, אבל יהיה הבדל בשלב השלישי.

שלב 1. יצירת מתג בסיסי

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

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

אנו מתחילים עם HTML ו- CSS הבאים:

HTML

CSS

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

#outerWrapper width: 450px; גובה: 90px; ריפוד: 10px; שוליים: 100px אוטומטי 0 אוטומטי; border-radius: 55px; box-shadow: 0 0 10px 6px #EAEBED; רקע: #fff;  #innerWrapper גובה: 100%; border-radius: 45px; overflow: hidden; מקומות קרובים  .radio width: 90px; גובה: 100%; תפקיד מוחלט שוליים: 0; אטימות: 0;  #rightRadio right: 0;  .radio: לא (: מסומן) סמן: מצביע;

הוספתי את אטימות: 0 הכלל post .רדיו כיתה כדי להסתיר את לחצני הבחירה. הכלל האחרון בבלוק הקוד להלן, הסמן: מצביע; מציג את סמן המצביע עבור לחצן הבחירה שאינו מסומן, כך שמשתמשים יידעו איזה לחצן ללחוץ כדי להחליף את מצב המתג.

צילום מסך של ממשק המשתמש של המתג עם לחצני הבחירה בדפדפן Chrome

שלב 2. הוסף Skins כדי Switch

בשלב זה, נוסיף שני

תגים עבור שני עורות מתחת ללחצני הבחירה בקובץ HTML שלנו, ותמונת רקע לכל עור ב- CSS שלנו.

אני משתמש "יום" ו "לילה" כמו שתי המדינות של הבורר, בהשראת ירייה Dribbble על ידי Minh Killy Le.

HTML

CSS

#daySkin background-image: url ('day.png');  # nightSkin background-image: url ('night.png');  .skin width: 100%; גובה: 100%; מצביע אירועים: אף אחד; תפקיד מוחלט שוליים: 0;

ה מצביע אירועים: אף אחד; הכלל הוא הוסיף את עורות כך האירועים לחץ על המתג יכול לעבור דרכם, ו להגיע ללחצני הבחירה.

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

כחלופה לקוד לעיל, שתיים (עם תמונות המקור) בתוך

תגים יכולים גם לעבוד. הם יהיו עורות עבור שני מצבי מתג.

שלב 3 א. הוסף מסכה (גרסת Webkit)

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

באופן כללי, ישנם שני סוגים של מסוך: בהיקות ו אלפא.

ב בהיקות, החלק הכהה של תמונת המסכה מסתיר את התמונה שהיא מסווה: החלק הכהה יותר הוא בתמונת המסכה, יותר מוסתר כי הוא חלק בתמונה המסיכה.
ב מסיכת אלפא, החלק השקוף של תמונת המסכה מסתיר את התמונה שהיא מסווה: ככל שקוף חלק יותר בתמונת המסכה, כך החלק החבוי יותר בתמונה מסווה.

ב- Chrome (כמו בגירסה 51.0.2704.103, Win10), רק אלפא נראה לעבוד כרגע.

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

הנה CSS מוסיף מסכה לתמונות רקע בדפדפני Webkit:

CSS

#nightSkin background-image: url ('night.png'); סוג מסיכה: אלפא; / * מעגל שקוף עם החלק הנותר אטום * / -webkit מסכה- image: רדיאלי שיפוע (מעגל ב 45px 45px, rgba (0,0,0,0) 45px, rgba (0,0,0,1) 45px) ;  / * * כאשר העור יום נבחר * / #leftRadio: מסומן ~ # nightSkin מסכה-סוג: אלפא; / * מעגל אטום עם החלק הנותר שקוף * / -webkit מסכה- image: רדיאלי שיפוע (מעגל ב 405px 45px, rgba (0,0,0,1) 45px, rgba (0,0,0,0) 45px) ;

השתמשתי -webkit-mask-image המאפיין כדי ליצור את תמונת המסכה הראשונית. ערכו משתמש מחוגי רדיאלי () פונקציית CSS המשמשת ליצירת תמונה מצורה מוגדרת מראש, שיפוע רדיאלי ומרכז מעבר הצבע.

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

למרות שזה עדיין לא נתמך בדפדפני Webkit, הוספתי את סוג מסכה רכוש ל- CSS לעיון עתידי.

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

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

HTML

CSS

#switchBtnOutline width: 90px; גובה: 100%; border-radius: 45px; box-shadow: 0 0 2px אפור אפור, 0 0 10px אפור; מצביע אירועים: אף אחד; תפקיד מוחלט שוליים: 0;  / * מקום #switchBtnOutline בצד ימין כאשר העור יום נבחר * / #leftRadio: מסומן ~ # switchBtnOutline right: 0;

צילום מסך של מתג עם קצוות המסכה של הקצוות הגסים מוסתרים

שלב 3 ב. הוספת מסיכה (גרסת Firefox)

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

למרות ש מסכה רכוש צריך לקבל תמונה שנוצרה עם מחוגי רדיאלי () CSS פונקציה כערך, בדיוק כמו מסכה-דימוי רכוש עשה, אין תמיכה כי עדיין ב- Firefox.

אז במקום א מחוגי רדיאלי () תמונה, בואו נשתמש בתמונת SVG כתמונת המסכה עם סוג המסכה בהיקות.

תמונת SVG לעיל נראית כמו שילוב של מלבן לבן א מעגל שחור. הוסף את זה, ועוד אחד עם מלבן שחור א עיגול לבן כמו מסכות ל- HTML שבו השתמשנו בגרסת Webkit.

תמונת SVG (מלבן לבן ומעגל שחור עבור המסכה)

HTML

החלף (או שלב עם) את קוד ה- CSS עבור # nightSkin השתמשנו בגירסת Webkit עם הקוד הבא. וסיימת.

כעת יש לנו שתי תמונות מסכה שונות (CSS gradient & SVG), שני סוגי מסכה שונים (Alpha & Luminance) וכן תמיכה Webkit ו- Firefox.

CSS

#nightSkin background-image: url ('night.png'); סוג מסכה: בהיקות; מסכה: כתובת אתר (#leftSwitchMask);  #leftRadio: מסומנת ~ # nightSkin mask-type: בהיקות; מסכה: כתובת אתר (#rightSwitchMask);

בדוק את ההדגמה

הדגמה
הורד מקור

כיצד ליצור נקודת שחזור מערכת ב - Windows 7

כיצד ליצור נקודת שחזור מערכת באופן ידני ב - XP

כיצד ליצור סיסמה חזקה (ולזכור את זה)