תבנית:תוכן שקוף: הבדלים בין גרסאות בדף

מתוך חב"דפדיה, אנציקלופדיה חב"דית חופשית
קפיצה לניווט קפיצה לחיפוש
חזותיקוד ויקי
מ (גרסה אחת)
אין תקציר עריכה
 
(גרסת ביניים אחת של משתמש אחר אחד אינה מוצגת)
שורה 1: שורה 1:
<includeonly><div {{#ifeq:{{{הדגשה במעבר}}}|כן|class="ElementOpacity"}} style="opacity: {{{1}}};">{{{2}}}</div></includeonly><noinclude>
<includeonly><span {{#ifeq:{{{הדגשה במעבר}}}|כן|class="ElementOpacity"}} style="opacity: {{{1|1}}};">{{{2|}}}</span></includeonly><noinclude>
תבנית זו משמשת ליצירת אובייקטים שקופים המכילים תגי <tt><nowiki><div></nowiki></tt> (למשל מסגרות). התבנית משתמשת במאפיין Opacity של [[גיליונות סגנון מדורגים|CSS]].
תבנית זו משמשת ליצירת תמונות וטקסטים שקופים. התבנית משתמשת במאפיין Opacity של [[גיליונות סגנון מדורגים|CSS]].


{{שימו לב|כדי ליצור טקסט שקוף או תמונה שקופה, יש להשתמש בתבנית '''{{תב|תוכן שקוף}}''' ולא בתבנית זו!}}
באמצעות התבנית ניתן להפוך טקסטים רגילים, טקסטים מעוצבים, תמונות ואלמנטים נוספים ל{{תוכן שקוף|0.6|שקופים}}.


התבנית הזו נועדה רק למקרים שבהם יש צורך לעשות שימוש בתגי <tt><nowiki><div></nowiki></tt> בתוכן השקוף, משום ששימוש כזה לא אפשרי בתבנית {{תב|תוכן שקוף}}.
כמו כן, ניתן להוסיף תוכן ש{{תוכן שקוף|0.6|הדגשה במעבר=כן|[[#תוכן שמאבד את שקיפותו בעת מעבר עכבר|מאבד את שקיפותו כשעוברים מעליו עם העכבר]]}}. תכונה זו עושה שימוש בעיצוב CSS שאינו קיים כברירת מחדל בתוכנת [[מדיה ויקי]]. לכן, אם ברצונכם לייצא את התבנית הזו לאתר ויקי אחר, יש להעתיק גם את הקוד הבא לקובץ ה־CSS של האתר:
 
ניתן גם להוסיף אובייקטים ש{{תוכן שקוף|0.6|הדגשה במעבר=כן|מאבדים את שקיפותם כשעוברים מעליהם עם העכבר}}. תכונה זו עושה שימוש בעיצוב CSS שאינו קיים כברירת מחדל בתוכנת [[מדיה ויקי]]. לכן, אם ברצונכם לייצא את התבנית הזו לאתר ויקי אחר, יש להעתיק גם את הקוד הבא לקובץ ה־CSS של האתר:
<syntaxhighlight lang="css">
<syntaxhighlight lang="css">
.ElementOpacity:hover {
.ElementOpacity:hover {
     opacity: 1 !important;
     opacity: 1 !important;
}</syntaxhighlight>
}</syntaxhighlight>
{{שימו לב|מסיבות טכניות, התבנית הזו לא מאפשרת להשתמש בתכנים עם תגי <tt><nowiki><div></nowiki></tt> (בעיקר מסגרות). לפיכך, אם ברצונכם ליצור מסגרת שקופה, או כל תוכן שקוף אחר שדורש שימוש בתגי <tt><nowiki><div></nowiki></tt>, יש להשתמש בתבנית '''{{תב|מסגרת שקופה}}''' ולא בתבנית זו.}}


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


'''הערה חשובה:''' יש להזין את הפרמטר <code>|2=</code> לפני התוכן השקוף. אחרת, ברוב המקרים התבנית לא תעבוד כראוי!
רמת השקיפות יכולה להיות כל מספר מ־0 עד 1 (כלומר, מספרים עשרוניים). ככל שהמספר נמוך יותר, כך הטקסט שקוף יותר.
 
רמת השקיפות יכולה להיות כל מספר מ־0 עד 1 (כלומר, מספרים עשרוניים). ככל שהמספר נמוך יותר, כך האובייקט שקוף יותר.


כדי לקבוע שהאובייקט יהיה שקוף בהתחלה, אך יאבד את שקיפותו כשהקורא מעביר את העכבר מעליו, יש להשתמש בפרמטר <code>|הדגשה במעבר=כן</code>.
כדי לקבוע שהתוכן יהיה שקוף בהתחלה, אך יאבד את שקיפותו כשהקורא מעביר את העכבר מעליו, יש להשתמש בפרמטר <code>|הדגשה במעבר=כן</code>.


=== דוגמאות לשימוש בתבנית ===
=== דוגמאות לשימוש בתבנית ===
<table class="wikitable" width="92%">
<table class="wikitable" width="92%">
<tr>
<th colspan="2" style="background: #fffff4; font-size: 110%;">טקסט בסיסי</th>
</tr>
<tr>
<th>קוד ויקי</th>
<th>תוצאה</th>
</tr>
<tr style="background: white;">
<td><code><nowiki>{{תוכן שקוף|0.7|זהו טקסט שקוף}}</nowiki></code></td>
<td>{{תוכן שקוף|0.7|זהו טקסט שקוף}}</td>
</tr>
<tr style="background: white;">
<td><code><nowiki>{{תוכן שקוף|0.4|זהו טקסט שקוף מאוד}}</nowiki></code></td>
<td>{{תוכן שקוף|0.4|זהו טקסט שקוף מאוד}}</td>
</tr>
<tr style="background: white;">
<td><code><nowiki>{{תוכן שקוף|0.5|'''זהו טקסט מודגש וגם שקוף'''}}</nowiki></code></td>
<td>{{תוכן שקוף|0.5|'''זהו טקסט מודגש וגם שקוף'''}}</td>
</tr>
</table>
<table class="wikitable" style="margin-top: -7px;" width="92%">
<tr>
<th colspan="2" style="background: #fffff4;"><span style="font-size: 110%;">טקסט מעוצב</span><br /><span style="font-weight: normal; font-size: 85%;">'''הערה חשובה:''' כדי להשתמש בטקסטים מעוצבים בתבנית הזו, יש להזין את הפרמטר <code>|2=</code> לפני התוכן, כמודגם להלן.</span></th>
</tr>
<tr>
<th>קוד ויקי</th>
<th>תוצאה</th>
</tr>
<tr style="background: white;">
<td><pre>{{תוכן שקוף|0.45|2=
<span style="color: green;">זהו טקסט שקוף בצבע ירוק</span>
}}</pre></td>
<td>{{תוכן שקוף|0.45|2=<span style="color: green;">זהו טקסט שקוף בצבע ירוק</span>}}</td>
</tr>
<tr style="background: white;">
<td><pre>{{תוכן שקוף|0.75|2=
<span style="background: lightyellow;">זהו טקסט שקוף עם רקע צהוב</span>
}}</pre></td>
<td>{{תוכן שקוף|0.75|2=<span style="background: lightyellow;">זהו טקסט שקוף עם רקע צהוב</span>}}</td>
</tr>
</table>
<table class="wikitable" style="margin-top: -7px;" width="92%">
<tr>
<th colspan="2" style="background: #fffff4; font-size: 110%;">תמונות</th>
</tr>
<tr>
<tr>
<th>קוד ויקי</th>
<th>קוד ויקי</th>
שורה 28: שורה 73:
</tr>
</tr>
<tr style="background: white;">
<tr style="background: white;">
<td><pre>{{מסגרת שקופה|0.4|2=
<td><pre>{{תוכן שקוף|0.3|
<div style="border: 1px solid black;">
[[קובץ:סמל חבדפדיה.jpg|100 פיקסלים]]
מסגרת שקופה פשוטה
}}</pre></td>
</div>
<td>{{תוכן שקוף|0.3|[[קובץ:חבדפדיה.jpg|100 פיקסלים]]}}</td>
</tr>
<tr style="background: white;">
<td><pre>{{תוכן שקוף|0.2
|2=[[קובץ:חבדפדיה.jpg|מרכז|100 פיקסלים]]
}}</pre></td>
}}</pre></td>
<td>{{מסגרת שקופה|0.4|2=
<td>{{תוכן שקוף|0.2
<div style="border: 1px solid black;">
|2=[[קובץ:חבדפדיה.jpg|מרכז|100 פיקסלים]]
מסגרת שקופה פשוטה
</div>
}}</td>
}}</td>
</tr>
</table>
<table class="wikitable" style="margin-top: -7px;" width="92%">
<tr>
<th colspan="2" style="background: #fffff4; font-size: 110%;">תבניות</th>
</tr>
<tr>
<th>קוד ויקי</th>
<th>תוצאה</th>
</tr>
</tr>
<tr style="background: white;">
<tr style="background: white;">
<td><pre>{{מסגרת שקופה|0.35|2=
<td><pre>{{תוכן שקוף|0.35|
<div style="border: 2px solid blue; background: #def; text-align: center;">
הנה תבנית שקופה: {{מזל טוב}}
מסגרת שקופה מעוצבת
</div>
}}</pre></td>
}}</pre></td>
<td>{{מסגרת שקופה|0.35|2=
<td>{{תוכן שקוף|0.35|הנה תבנית שקופה: {{מזל טוב}}}}</td>
<div style="border: 2px solid blue; background: #def; text-align: center;">
</tr>
מסגרת שקופה מעוצבת
<tr style="background: white;">
</div>
<td><code><nowiki>פרצופים שקופים: {{תוכן שקוף|0.5|{{חיוך}} {{קריצה}} {{צחוק}}}}</nowiki></code>
<td>פרצופים שקופים: {{תוכן שקוף|0.5|{{חיוך}} {{קריצה}} {{צחוק}}}}</td>
</tr>
</table>
 
<table class="wikitable" style="margin-top: -7px;" width="92%">
<tr>
<th colspan="2" style="background: #fffff4;"><span style="font-size: 110%;">{{עוגן|תוכן שמאבד את שקיפותו בעת מעבר עכבר|תוכן שמאבד את שקיפותו בעת מעבר עכבר}}</span><br /><span style="font-weight: normal; font-size: 85%;">ניתן להשתמש באפשרות זו כדי להדגיש תוכן כשהקורא "מרחף" מעליו באמצעות העכבר. לשם כך, יש להשתמש בפרמטר <code>|הדגשה במעבר=כן</code>.</span></th>
</tr>
<tr>
<th>קוד ויקי</th>
<th>תוצאה</th>
</tr>
<tr style="background: white;">
<td><pre>{{תוכן שקוף|0.6|הדגשה במעבר=כן|
הטקסט הזה יהיה כהה יותר כשתעבירו מעליו את העכבר.
}}</pre></td>
<td>{{תוכן שקוף|0.6|הדגשה במעבר=כן|
הטקסט הזה יהיה כהה יותר כשתעבירו מעליו את העכבר.
}}</td>
}}</td>
</tr>
</tr>
<tr style="background: white;">
<tr style="background: white;">
<td><pre>{{מסגרת שקופה|0.5|הדגשה במעבר=כן|2=
<td><pre>{{תוכן שקוף|0.47|הדגשה במעבר=כן|2=
<div style="border: 3px solid yellow; background: lightgreen; padding: 5px; text-align: center; color: darkred;">
<span style="color: red; background: yellow;">'''הטקסט המעוצב הזה יהיה בולט יותר כשתעבירו מעליו את העכבר.'''</span>
'''אם תעבירו מעליי את העכבר, אני כבר לא אהיה שקופה.'''
</div>
}}</pre></td>
}}</pre></td>
<td>{{מסגרת שקופה|0.5|הדגשה במעבר=כן|2=
<td>{{תוכן שקוף|0.47|הדגשה במעבר=כן|2=
<div style="border: 3px solid yellow; background: lightgreen; padding: 5px; text-align: center; color: darkred;">
<span style="color: red; background: yellow;">'''הטקסט המעוצב הזה יהיה בולט יותר כשתעבירו מעליו את העכבר.'''</span>
'''אם תעבירו מעליי את העכבר, אני כבר לא אהיה שקופה.'''
</div>
}}</td>
}}</td>
</tr>
</tr>
<tr style="background: white;">
<tr style="background: white;">
<td><pre>העבירו את העכבר מעל העיגול הזה כדי לראות אותו כמו שצריך:
<td><pre>התמונה הזו תהיה כהה יותר כשתעבירו מעליה את העכבר:


{{מסגרת שקופה|0.15|הדגשה במעבר=כן|2=
{{תוכן שקוף|0.65|הדגשה במעבר=כן|
<div style="border: 4px solid pink; background: blue; border-radius: 50%; width: 40px; height: 40px;"></div>
[[קובץ:חבדפדיה.jpg|120px]]
}}</pre></td>
}}</pre></td>
<td>העבירו את העכבר מעל העיגול הזה כדי לראות אותו כמו שצריך:
<td>התמונה הזו תהיה כהה יותר כשתעבירו מעליה את העכבר:


{{מסגרת שקופה|0.15|הדגשה במעבר=כן|2=
{{תוכן שקוף|0.65|הדגשה במעבר=כן|
<div style="border: 4px solid pink; background: blue; border-radius: 50%; width: 40px; height: 40px;"></div>
[[קובץ:חבדפדיה.jpg|120px]]
}}</td>
}}</td>
</tr>
</tr>
</table>


[[קטגוריה:תבניות עיצוב]]
[[קטגוריה:תבניות עיצוב וסגנון של טקסטים]]

גרסה אחרונה מ־06:59, 13 בספטמבר 2020

תבנית זו משמשת ליצירת תמונות וטקסטים שקופים. התבנית משתמשת במאפיין Opacity של CSS.

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

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

.ElementOpacity:hover {
    opacity: 1 !important;
}

שימו לב:

אופן השימוש[עריכת קוד מקור]

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

רמת השקיפות יכולה להיות כל מספר מ־0 עד 1 (כלומר, מספרים עשרוניים). ככל שהמספר נמוך יותר, כך הטקסט שקוף יותר.

כדי לקבוע שהתוכן יהיה שקוף בהתחלה, אך יאבד את שקיפותו כשהקורא מעביר את העכבר מעליו, יש להשתמש בפרמטר |הדגשה במעבר=כן.

דוגמאות לשימוש בתבנית[עריכת קוד מקור]

טקסט בסיסי
קוד ויקי תוצאה
{{תוכן שקוף|0.7|זהו טקסט שקוף}} זהו טקסט שקוף
{{תוכן שקוף|0.4|זהו טקסט שקוף מאוד}} זהו טקסט שקוף מאוד
{{תוכן שקוף|0.5|'''זהו טקסט מודגש וגם שקוף'''}} זהו טקסט מודגש וגם שקוף
טקסט מעוצב
הערה חשובה: כדי להשתמש בטקסטים מעוצבים בתבנית הזו, יש להזין את הפרמטר |2= לפני התוכן, כמודגם להלן.
קוד ויקי תוצאה 
{{תוכן שקוף|0.45|2=
<span style="color: green;">זהו טקסט שקוף בצבע ירוק</span>
}}
 זהו טקסט שקוף בצבע ירוק 
{{תוכן שקוף|0.75|2=
<span style="background: lightyellow;">זהו טקסט שקוף עם רקע צהוב</span>
}}
 זהו טקסט שקוף עם רקע צהוב
תמונות
קוד ויקי תוצאה 
{{תוכן שקוף|0.3|
[[קובץ:סמל חבדפדיה.jpg|100 פיקסלים]]
}}
 
{{תוכן שקוף|0.2
|2=[[קובץ:חבדפדיה.jpg|מרכז|100 פיקסלים]]
}}
תבניות
קוד ויקי תוצאה 
{{תוכן שקוף|0.35|
הנה תבנית שקופה: {{מזל טוב}}
}}
 הנה תבנית שקופה: מ ז ל ט ו ב !
פרצופים שקופים: {{תוכן שקוף|0.5|{{חיוך}} {{קריצה}} {{צחוק}}}} פרצופים שקופים:
תוכן שמאבד את שקיפותו בעת מעבר עכבר
ניתן להשתמש באפשרות זו כדי להדגיש תוכן כשהקורא "מרחף" מעליו באמצעות העכבר. לשם כך, יש להשתמש בפרמטר |הדגשה במעבר=כן.
קוד ויקי תוצאה 
{{תוכן שקוף|0.6|הדגשה במעבר=כן|
הטקסט הזה יהיה כהה יותר כשתעבירו מעליו את העכבר.
}}

הטקסט הזה יהיה כהה יותר כשתעבירו מעליו את העכבר. 

{{תוכן שקוף|0.47|הדגשה במעבר=כן|2=
<span style="color: red; background: yellow;">'''הטקסט המעוצב הזה יהיה בולט יותר כשתעבירו מעליו את העכבר.'''</span>
}}
 הטקסט המעוצב הזה יהיה בולט יותר כשתעבירו מעליו את העכבר. 
התמונה הזו תהיה כהה יותר כשתעבירו מעליה את העכבר:

{{תוכן שקוף|0.65|הדגשה במעבר=כן|
[[קובץ:חבדפדיה.jpg|120px]]
}}
 התמונה הזו תהיה כהה יותר כשתעבירו מעליה את העכבר:

אוחזר מתוך "https://chabadpedia.co.il/index.php?title=תבנית:תוכן_שקוף&oldid=405685"