רוצים להשתתף בפעילויות כיפיות?
- לחצו כאן בשביל עוד פרטים

pucci

24/05/2019

 

yogdihl.webp


שלום קהילה, ברצוני לתת לכם כמה כלים בסיסיים שיכולו לעזור לכם להפוך את הנושאים שלכם לקצת יותר יפים.
מקווה שזה יוכל לעזור למישהו. בואו נתחיל~!


"הו וואו, מה זה הקו הזה כאן למעלה שמפריד בין הצגת הנושא לבין התוכן שלו?" - "נכון מדהים?!"
דבר ראשון שעליכם לעשות זה ללחוץ על כפתור המקור (נמצא בצד ימין של הסרגל) ולהכניס את הערך הזה: 


בין הפסקה שאתם רוצים להפריד.

 

כיצד זה צריך להראות
w0mqrz6.png  *הערה: אם שמתם את קו ההפרדה לפני שרשמתם את הפסקה אותה אתם רוצים להפריד הכתבן יציג קו אדום (תמונה בצד שמאל) שיתן לכם לרדת פסקה.
   ניתן ללחוץ על החץ שעל קו האדום על מנת לרדת פסקה שלמה. 
08fi3s4.png
 

 


"אוקיי, הראת לנו איך להפריד בין פסקאות וזה... אבל עזוב אותך, התיבות ספויילר האלו מדהימות! איך עשית אותן?!"

בואו ותגלו איך הקסם הזה עובד!
7ywpb98.png
<"div class="spoiler> - ערך זה מתייחס לתוכן התיבה ומה שנמצא בתוכה.
<"div class="title> - ערך זה מתייחס לכותרת של התיבה.
";*style="background: *color - ערך זה מאפיין את תוכנות ה-CSS שיש לאלמנט ה-HTML, במקרה שלנו תיבת הספויילר. את ערך ה-CSS יש לשים בסוגריים לאחר סימן '='.
תיבת ספויילר
-

 


עכשיו כשהראתי לכם איך אפשר לקשט ולחלק את הנושא בצורה טיפה יותר יפה, למה לא להוסיף תמונות?!

הסבר על מאפייני תמונה של הכתבן
בכתבן ספין יש לנו דרך קלה ופשוטה לערוך ולהוסיף כל מיני דברים לתמונות על ידי לחיצה כפולה על תמונה תצוץ לנו תפריט עם מגוון אפשרויות.
wqdqa16.png
*כאן ניתן לערוך את רוחב וגובה התמונה.
*כאן ניתן להוסיף מסגרת לתמונה באמצעות הוספת מספר כגודל המסגרת בפיקסלים.
*ירחיק את התמונה ביחידות פיקסלים באופן אופקי, למשל, 5 פיקסלים ירחיקו את התמונה כחמישה פיקסלים מהצד (תלוי בצד היישור).
*ירחיק את התמונה ביחידות פיקסלים באופן אנכיי, למשל, 5 פיקסלים ירחיקו את התמונה כחמישה פיקסלים מלמעלה.
*יישור התמונה יקבע באיזה צד התמונה תהיה צמודה אליו. בנוסף אפשר לכתוב ליד התמונה אם נקבע יישור כלשהו. (דוגמא: האלבומים האהובים עליי משנת 2018)

 


ולסיום המדריך, קבלו את... הוראות הנגישות! משהו כל כך שימושי, אך כל כך חבוי... למה? הסיבה לכך שזה חבוי לא ידועה כלל וכלל.
בכל אופן, בהוראות הנגישות יש כמה קיצורי מקלדת והסברים בעברית על הפעולות הכתבן. כדי לגשת להוראות הנגישות יש ללחוץ alt + 0.
בנוסף על כך, אפשר לקרוא יותר בעמוד הזה על עוד פעולות שניתן לעשות בכתבן: https://ckeditor.com/docs/ckeditor4/latest/guide/dev_shortcuts

מקווה שהמדריך הקצר-צר הועיל למישהו ^^

MISTER X D

24/05/2019

אני מקווה שמישהו יקרא את זה, הרחבת מאוד את הידע שלי, אתה קוסם

DeadlyAngle

24/05/2019

צוטט: MISTER X D

אני מקווה שמישהו יקרא את זה, הרחבת מאוד את הידע שלי, אתה קוסם

לול אתה בכלל יוצר נושאים?

pucci

24/05/2019

צוטט: DeadlyAngle

לול אתה בכלל יוצר נושאים?

אף פעם לא מאוחר מדי לנסות להיות פעיל בפורום. ממליץ גם לך לנסות! יש לי תחושה שבקרוב יהיה שווה לנסות.

Saltboi

24/05/2019

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

puma161~

24/05/2019

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

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

אבל, אני אזכור את הנושא הזה לפעם הבאה שארצה לפרסם כאן משהו~

Goldenfire

24/05/2019

צוטט: puma161~

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

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

אבל, אני אזכור את הנושא הזה לפעם הבאה שארצה לפרסם כאן משהו~

לגמרי

MISTER X D

24/05/2019

צוטט: DeadlyAngle

לול אתה בכלל יוצר נושאים?

חח מזתומרת, גם אם אני יוצר וגם אם לא, הוא הרחיב את הידע שלי /:

וכן אני יוצר לעיתים רחוקות..(:

DemandingMold

25/05/2019


 

תשימו את העכבר על ה div


 

שימו עליי את העכבר
מגניב נכון?
 

 

Alter

25/05/2019

צוטט: DemandingMold
ספויילר

תעתיקו את זה ושימו בהודעה במקור

 

תשימו את העכבר על ה div

 

 

 


 

 

 

 

 

 

שימו עליי את העכבר

 

 

 

 

מגניב נכון?

 

 

 

 

 

 

 

text-align:center;

font-size:3em;

text-shadow:3px 3px 2px rgba(0,0,0,0.5);

}

.container span{

text-shadow: 1px 1px 5px black;

}

 

.colorChange{

width: 100px;

height: 100px;

animation: randColor 4s infinite;

margin: 0 auto;

padding: 100px;

transition: 1s;

}

 

.colorChange:hover{

-ms-transform: translate(50px, 100px); /* IE 9 */

-webkit-transform: translate(50px, 100px); /* Safari */

transform: translate(50px, 100px);

}

 

.box{

width: 100px;

height: 100px;

margin: 50px auto;

padding:60px;

background-color: rgba(0,0,0,0.4);

text-align: center;

transition: 2s;

}

.box:hover{

-ms-transform: rotate(720deg); /* IE 9 */

-webkit-transform: rotate(720deg); /* Safari */

transform: rotate(720deg);

}

 

.container{

transition: 1s;

background-color:rgba(0,0,0,0.4);

width:200px;

margin:0 auto;

text-align:center;

}

.container:hover{

width:500px

}

.line{

border:0.1rem dashed rgb(255, 255, 255);

}

body{

background-image: linear-gradient(to right top, #051937, #00517b, #00909a, #00cd85, #caff53);

}

html , body{

height:100%;

color:white;

}

 

@keyframes randColor {

0% {background-color: red;}

20% {background-color: yellow;}

40% {background-color: blue;}

60% {background-color: green;}

80% {background-color: purple;}

100% {background-color: white;}

}


 

 


שים את זה במקור ולא פשוט בהודעה

pucci

25/05/2019

צוטט: DemandingMold

 

תשימו את העכבר על ה div


 

שימו עליי את העכבר
מגניב נכון?
 

 

 

מגניב 

יש מלא דברים שאפשר לעשות כאן עם הHTML. למשל להוסיף cog במאפייני תמונה לאימוג'ים, יעשה את זה: :thinking:

יש גם עוד אנימציות :scream::dizzy_face::dove:

DemandingMold

25/05/2019

כן ניסיתי לפרסם עם הקוד מקור אבל לא הסתדר לי

LuffySenpai

25/05/2019

צוטט: Pucci

מגניב 

יש מלא דברים שאפשר לעשות כאן עם הHTML. למשל להוסיף cog במאפייני תמונה לאימוג'ים, יעשה את זה: :thinking:

יש גם עוד אנימציות :scream::dizzy_face::dove:

איך עשית את זה?