אלמנטים אחד על השני בשכבות

איש פשוט

משתמש רשום
האם עושים את זה עדיין עם position ן z-index או שיש דרכים יותר מתקדמות?
 
נערך לאחרונה ב:

איש פשוט

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

Naftali Stein

משתמש מקצוען
מנוי פרימיום
בוגר/תלמיד פרוג
D I G I T A L
אם הבנתי נכון אתה עושה 3 שכבות?

למיטב ידיעתי אין דרך טובה יותר, אם יש כזה אשמח לדעת.

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

בשיטה שחשבת לעשות, אם תגדיר grid של divים, ולכולם יהיו הגדרת position:relative, את השכבות הנוספת של כל div תכניס לתוך הdiv שלו, תן לכל הdivים הפנימיים קלאס עם

This user does not have permission to use the HTML BB code.

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

עיטורים פלוס

משתמש סופר מקצוען
מנוי פרימיום
בוגר/תלמיד פרוג
עיצוב גרפי
הנדסת תוכנה
צילום מקצועי
D I G I T A L
עימוד ספרים
אולי אפשר למקם את החלקים שמכסים את התמונה ע"ג div שהרקע שלו הוא התמונה שאתה רוצה שתתגלה
 

עיטורים פלוס

משתמש סופר מקצוען
מנוי פרימיום
בוגר/תלמיד פרוג
עיצוב גרפי
הנדסת תוכנה
צילום מקצועי
D I G I T A L
עימוד ספרים
משהו כזה
 

קבצים מצורפים

  • new 1.zip
    510 ביטים · צפיות: 3

Aharono

משתמש פעיל
D I G I T A L
אני לא חושב שצריך להניח מס' אובייקטים אחד על גב השני (את זה אגב, כדאי לעשות עם position: absolute ולשחק עם ה top ו ה left של כל אלמנט, בזמנו היה כאן מדריך יפה של חנה משהו ל css, אני חושב שהוא כתבה על זה)

ספציפית לפאזל, אני הייתי יוצר div כ container ומגדיר לו את התמונה שמתגלה כתמונה רקע. בתוך אותו ה-div הייתי שם את החלקים של הפאזל ומתי שעונים על תשובה נכונה, הייתי מגדיר לחלק שענו עליו תשובה נכונה opacity: 1 (שאז הוא נעלם).

בהצלחה
 

איש פשוט

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

אולי מעניין אותך גם...

הפרק היומי

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


תהילים פרק קיט א'

א אַשְׁרֵי תְמִימֵי דָרֶךְ הַהֹלְכִים בְּתוֹרַת יְהוָה:ב אַשְׁרֵי נֹצְרֵי עֵדֹתָיו בְּכָל לֵב יִדְרְשׁוּהוּ:ג אַף לֹא פָעֲלוּ עַוְלָה בִּדְרָכָיו הָלָכוּ:ד אַתָּה צִוִּיתָה פִקֻּדֶיךָ לִשְׁמֹר מְאֹד:ה אַחֲלַי יִכֹּנוּ דְרָכָי לִשְׁמֹר חֻקֶּיךָ:ו אָז לֹא אֵבוֹשׁ בְּהַבִּיטִי אֶל כָּל מִצְוֹתֶיךָ:ז אוֹדְךָ בְּיֹשֶׁר לֵבָב בְּלָמְדִי מִשְׁפְּטֵי צִדְקֶךָ:ח אֶת חֻקֶּיךָ אֶשְׁמֹר אַל תַּעַזְבֵנִי עַד מְאֹד:
נקרא  32  פעמים

לוח מודעות

למעלה