תבנית:תוכן שקוף: הבדלים בין גרסאות בדף
(יצירת דף עם התוכן "<includeonly><div {{#ifeq:{{{הדגשה במעבר}}}|כן|class="ElementOpacity"}} style="opacity: {{{1}}};">{{{2}}}</div></includeonly><noinclude> תבנית ...") |
חלוקת קונטרסים (שיחה | תרומות) אין תקציר עריכה |
||
(3 גרסאות ביניים של 2 משתמשים אינן מוצגות) | |||
שורה 1: | שורה 1: | ||
<includeonly>< | <includeonly><span {{#ifeq:{{{הדגשה במעבר}}}|כן|class="ElementOpacity"}} style="opacity: {{{1|1}}};">{{{2|}}}</span></includeonly><noinclude> | ||
תבנית זו משמשת ליצירת | תבנית זו משמשת ליצירת תמונות וטקסטים שקופים. התבנית משתמשת במאפיין Opacity של [[גיליונות סגנון מדורגים|CSS]]. | ||
באמצעות התבנית ניתן להפוך טקסטים רגילים, טקסטים מעוצבים, תמונות ואלמנטים נוספים ל{{תוכן שקוף|0.6|שקופים}}. | |||
כמו כן, ניתן להוסיף תוכן ש{{תוכן שקוף|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>, יש להשתמש בתבנית '''{{תב|מסגרת שקופה}}''' ולא בתבנית זו.}} | |||
== אופן השימוש == | == אופן השימוש == | ||
לתבנית זו שני פרמטרים עיקריים. הפרמטר הראשון מגדיר את רמת השקיפות, והפרמטר השני קובע את התוכן שיוצג. | לתבנית זו שני פרמטרים עיקריים. הפרמטר הראשון מגדיר את רמת השקיפות, והפרמטר השני קובע את התוכן שיוצג. | ||
רמת השקיפות יכולה להיות כל מספר מ־0 עד 1 (כלומר, מספרים עשרוניים). ככל שהמספר נמוך יותר, כך הטקסט שקוף יותר. | |||
רמת השקיפות יכולה להיות כל מספר מ־0 עד 1 (כלומר, מספרים עשרוניים). ככל שהמספר נמוך יותר, כך | |||
כדי לקבוע | כדי לקבוע שהתוכן יהיה שקוף בהתחלה, אך יאבד את שקיפותו כשהקורא מעביר את העכבר מעליו, יש להשתמש בפרמטר <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>{{ | <td><pre>{{תוכן שקוף|0.3| | ||
< | [[קובץ:סמל חבדפדיה.jpg|100 פיקסלים]] | ||
}}</pre></td> | |||
< | <td>{{תוכן שקוף|0.3|[[קובץ:חבדפדיה.jpg|100 פיקסלים]]}}</td> | ||
</tr> | |||
<tr style="background: white;"> | |||
<td><pre>{{תוכן שקוף|0.2 | |||
|2=[[קובץ:חבדפדיה.jpg|מרכז|100 פיקסלים]] | |||
}}</pre></td> | }}</pre></td> | ||
<td>{{ | <td>{{תוכן שקוף|0.2 | ||
|2=[[קובץ:חבדפדיה.jpg|מרכז|100 פיקסלים]] | |||
}}</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>{{ | <td><pre>{{תוכן שקוף|0.35| | ||
הנה תבנית שקופה: {{מזל טוב}} | |||
}}</pre></td> | }}</pre></td> | ||
<td>{{ | <td>{{תוכן שקוף|0.35|הנה תבנית שקופה: {{מזל טוב}}}}</td> | ||
< | </tr> | ||
<tr style="background: white;"> | |||
</ | <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>{{ | <td><pre>{{תוכן שקוף|0.47|הדגשה במעבר=כן|2= | ||
< | <span style="color: red; background: yellow;">'''הטקסט המעוצב הזה יהיה בולט יותר כשתעבירו מעליו את העכבר.'''</span> | ||
''' | |||
</ | |||
}}</pre></td> | }}</pre></td> | ||
<td>{{ | <td>{{תוכן שקוף|0.47|הדגשה במעבר=כן|2= | ||
< | <span style="color: red; background: yellow;">'''הטקסט המעוצב הזה יהיה בולט יותר כשתעבירו מעליו את העכבר.'''</span> | ||
''' | |||
</ | |||
}}</td> | }}</td> | ||
</tr> | </tr> | ||
<tr style="background: white;"> | <tr style="background: white;"> | ||
<td><pre> | <td><pre>התמונה הזו תהיה כהה יותר כשתעבירו מעליה את העכבר: | ||
{{ | {{תוכן שקוף|0.65|הדגשה במעבר=כן| | ||
[[קובץ:חבדפדיה.jpg|120px]] | |||
}}</pre></td> | }}</pre></td> | ||
<td> | <td>התמונה הזו תהיה כהה יותר כשתעבירו מעליה את העכבר: | ||
{{ | {{תוכן שקוף|0.65|הדגשה במעבר=כן| | ||
[[קובץ:חבדפדיה.jpg|120px]] | |||
}}</td> | }}</td> | ||
</tr> | </tr> | ||
[[קטגוריה:תבניות עיצוב]] | [[קטגוריה:תבניות עיצוב וסגנון של טקסטים]] |
גרסה אחרונה מ־07: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]] }} |
התמונה הזו תהיה כהה יותר כשתעבירו מעליה את העכבר: |