Knightmare

09/11/2017

964998a6b87501f1ca1fab3babd0f8dc52cf807f_hq.gif

מדריך עיצוב הפרופיל ב-CSS

"כל אחד יכול לעצב פרופיל באנימה-ספין"
-גוסטו לה טיים טראוולר

היי מינה!^^

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

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

שלב א'- הקדמה קלילה ומציאת נתיב האלמנט:

כל דף אינטרנט, במקרה שלנו פרופיל המשתמש, מורכב מ-HTML ו-CSS. יש עוד חלק בשם JS אבל זה לא מעניין אותנו (רגע! רגע! אל תברחו! אני מבטיח לכם שהמדריך הזה זורם אם תעקבו אחריו לאט לאט, תלמדו מאפס איך לעצב פרופיל בצורה מושלמת כרצונכם! תאמינו לי שזה נשמע רק מסובך, אבל ברגע שנותנים צ'אנס ולא בורחים מכל המילים המפחידות - מגלים שזה ממש ממש פשוט בפועל! בבקשה תזרמו, אבל תהיו עקביים ורציניים :wink:).
כל פרט ופרט שאתם רואים בפרופיל שלכם, בין אם זה הסרגל העליון שמכיל את האייקונים של ההודעות, התמונה שלכם, ה"קוביות" האלה של הפוסטים, הסרגל שעליו נמצאים מספר ההודעות והחברים, הכפתורים של "רשימת אנימות" ו"שלח הודעה" וכוללללל דבר ולו הקטן ביותר שנמצא על דף הפרופיל שלנו - הכל מכונה בשם "אלמנט" (או מחלקה, אבל בואו נזרום עם זה שקוראים להם אלמנטים למען הטרמינולוגיה הנוחה).

ב-CSS אנחנו בעצם מעצבים כרצוננו את אותם "אלמנטים". אם אלמנט מסוים כדוגמת הסרגל שמכיל את ה"פוסטים, הכל, נושאים" וכו' נראה באופן ברירת המחדל שבו דוד עיצב אותו, או בעצם ככה:
gwfwg6v.png
אנחנו ב-CSS לוקחים את האלמנט ומגדירים לו "תכונות". תכונה היא בעצם העיצוב של האלמנט. לדוגמה, אם האלמנט שלנו הוא הסרגל הזה, והתכונה היא "background-color: green;", העיצוב שיתקבל הוא שרקע הסרגל יהיה בצבע ירוק.
עד כאן פשוט, נכון?

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

אז לשלב הראשון - מציאת נתיב האלמנט הרצוי.

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

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

ספויילר 1
6scho01.png

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

(ראו בתמונה שבספויילר 1)

-----------------------------------------------------------------------------------------

ספויילר 2
3ytxjl0.png
dkwv1ld.png

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

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

אך זה עדיין לא מספיק, צריך הרבה פעמים לוודא שאכן זה הוא הנתיב הנכון ולא איזה נתיב של משהו מאחור או דבר כזה או אחר. על מנת לעשות זאת נגדיר את תכונת הרקע של האלמנט מחדש.
איך עושים את זה? מתחת לנתיב יש רשימה של תכונות. התכונות הן כל המאפיינים של האלמנט, בין אם זה הרקע שלו, צבע הכתב, ואפילו אם הפינות שלו יהיו עגולות או חדות.
כל מה שעלינו לעשות הוא להוסיף את תכונת הרקע (background) ולהגדיר לו צבע (אני אשתמש לדוגמא ב-red) אם עשינו הכל כראוי ואכן זהו האלמנט שבדקנו צבע הרקע של האלמנט ישתנה לאדום.
ולהלן התמונה בספויילר 3:

ספויילר 3
45wschy.png

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

#userPost #filterList li a

-----------------------------------------------------------------------------------------

בעית הנתיבים ה"מוסתרים":

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

ספויילר 4
t9ed5f3.png
(קצת קשה לראות את התיבה, מצטער, אבל נראה את זה יותר טוב כשנשנה את רקע התיבה).

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

n1kuj4m.png
אולי תגידו "אבל אני רואה את רקע התיבה מאחור? הנה זה לא מכסה", אז זה כן, אתם רואים רק מילים אבל באמת זה פס שלם של אלמנט שהולך לאורך כל התיבה ואני אוכיח לכם זאת על ידי שינוי רקע (לצורך הנוחיות נקרא לאלמנט של שם המפרסם "כותרת" ואני משנה את הפרופיל לשחור על מנת להראות את התיבה) .
(ראו בתמונות שבספויילר 4 ו-5) 

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

אז איך אנחנו בעצם מוצאים את נתיב האלמנט של התיבה עצמה?
אמרתי שהצד השמאלי של דף הבדיקה מכיל את כל המקורות. רשימת המקורות בדף הבדיקה בנויה בצורה כזו שככל שעולים ברשימה יותר למעלה אנחנו מגיעים למקור כללי יותר של האלמנטים ואני אסביר.
נגיד נקח לדוגמא שוב את הסרגל שמכיל את ה"נושאים", "פוסטים"...
ישנו אלמנט שמכיל את הסרגל שמכיל את כל הכפתורים, וממנו יוצאים תת-מקורות שכל תת-מקור הוא בעצם כפתור אחד מהסרגל, אם עדיין לא כ"כ מובן זה יבואר לכם בתמונות שבספויילר 6:
 

ספויילר 6
47t20lh.png
לאחר שמצאנו את הכפתור, עלינו לעלות במקורות עד שנמצא את המקור שיסמן את כל הסרגל:
73wxa2r.png 

עכשיו נעשה אותו הדבר לגבי תיבה:

ספויילר 7
ymhzfnd.png
כעת נעלה ברשימת מקורות ונחפש את המקור של התיבה:
osip7j0.png
אוקיי מצאנו את המקור, אבל תמיד כדאי לוודא שזה אכן זה. נשנה את הרקע:
137u4ww.png
והנה אכן צבע התיבה שונה, ובעצם מצאנו את נתיב התיבה שהוא "post section.".

-----------------------------------------------------------------------------------------

עד כאן מציאת הקודים

-----------------------------------------------------------------------------------------

שלב ב' - הכנסת הקודים לתוך העיצוב:

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

-----------------------------------------------------------------------------------------

ספויילר 8
4tbbnqc.png
0i03h5b.png

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

 אם תלחצו על הפרופיל יפתח לכם סוג של טבלה שלשם מכניסים את הנתיבים.

ספויילר 9
wsyjnde.png

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

ספויילר 10
כך זה בדף הבדיקה:rv91u5i.png
וכך זה בקוד:
xz7uipq.png

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

בתמונה אתם רואים קוד של פריט ששיניתי לו את הרקע (background) הוספתי לו כמו מסגרת צללית כזו (box-shadow) ושיניתי את הצבע של הכתב (color).
אחרי ששינינו את האלמנט לוחצים על "שלח" ובודקים אם האלמנט השתנה, אם הוא לא השתנה תעשו ctrl F5 (לא רק F5 אלא ctrl F5), ואם עדיין לא השתנה סימן שמשהו לא בסדר בקוד ותלכו לבדוק מה הבעיה (אולי לא סגרתם את הנתיב עם סוגרים מסולסלים, או אולי אפילו שכחתם להוסיף אחרי אחד מהתכונות של שינוי האלמנט את הסימן ; בקיצור ישנם המון סיבות פשוט תראו אם זה תואם את התמונה ששמתי).

בקוד שלם זה נראה כך:

ספויילר 11
3akxep9.png

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

-----------------------------------------------------------------------------------------

הוברים\אקטיבים\ פוקוס\ וויסיט:

אולי שמעתם מעצבי פרופילים שאומרים את המילה "הובר". אז מהו בעצם הובר?
מכירים את זה שאתם מצביעים עם העכבר על כפתור בפרופיל של מישהו וזה משנה צבע, נגיד כפתור בעל רקע בצבע אדום הופך לכחול? אז זה הובר.
אראה לכם בפרופיל שלי את ההובר:
 

ספויילר 12
l0ktpr6.png
jglfxwe.png
זה הובר.

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

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

 

ספויילר 13
82oi517.png
jf7ep87.png
כפי שאתם יכולים לראות ברגע שסימנתי את ה- "hover:", האלמנט של כפתור רשימת האנימות הפך לשחור (שזה ההובר שלו), ואני לא הצבעתי עליו.

אוקיי אחרי שהבנתם מזה הובר, אני אראה לכם איך למצוא הובר בדף הבדיקה (באותה דרך בודקים אקטיבים ואת כל השאר) על מנת שתוכלו לראות קודם כל את מה שאתם עושים לפני שאתם מכניסים את הנתיב לפרופיל. (הסתכלו בספויילר 13)
כשאתם בודקים אלמנט אתם תראו אך ורק את הנתיבים שלו ללא הוברים, כדי לראות את ההוברים אתם צריכים ללחוץ למעלה על hov: ואז יפתח לכם ארבעה אפשרויות (hover, active, focus, visit) שליד כל אחד יש ריבוע לסימון. את מי שאתם מסמנים הוא יוצג מעל הנתיב של האלמנט עם אותו שם ותוספת hover: בסוף ועם רשימת התכונות שלו (ובנוסף, האלמנט אותו רציתם לשנות יראה כאילו אתם מצביעים עליו, כדי שתוכלו לראות מה אתם עושים מבלי כל רגע להצביע עליו באמת).

אוקיי אחרי שהבנו איך למצוא הובר, איך אנחנו כותבים את זה בקוד עם ההובר?
למעשה זה כמו מיני קוד בתוך הקוד של האלמנט:
תמונה של המבנה:

ספויילר 14
fhxl31e.png

 

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

-----------------------------------------------------------------------------------------

לשנות כמה פריטים בקוד אחד:

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

תמונה של מבנה הקוד:

ספויילר 15
cw50eio.png
7iwi22m.png 

ואתם יכולים לעשות כמה כאלה שאתם רוצים.

-----------------------------------------------------------------------------------------

אוקיי עד עכשיו למדנו על הפרופיל, עכשיו הסבר קצרצר ממש על רשימה:

לגבי הרשימת אנימות:
 

ספויילר 16
u7y67i3.png


פשוט את כל הקודים שאתם עושים על רשימת האנימות, אתם צריכים להכניס אותם לתוך הטבלה של ה"רשימה":

ספויילר 17
hp2x8w5.png
מתנה קטנה
ראיתם שהבאתי הרבה פעמים כדוגמא את תכונת שינוי צבע הרקע, נכון? בעצם במדריך הראיתי לכם איך לזהות נתיבים, לכתוב אותם ולהוסיף להם תכונות, אבל לא הבאתי לכם את התכונות עצמן. אז בחלק הזה ליקטתי בשבילכם תכונות עיצוב דומיננטיות כמו שינוי צבע הכתב, צבע הרקע, גבולות וצלליות מסגרת. את שאר התכונות אתם מוזמנים לבדוק בעצמכם בפרופילים של אחרים על ידי כניסה לדף הבדיקה וזיהוי התכונות שהם השתמשו בהם על האלמנטים שלהם.
להלן תכונות שימושיות:
הרקע לפרופיל: רק תכניסו שם של הכתובת של התמונה שאתם רוצים (גודל מינימלי ואידיאלי 1920x1080)(זה הקוד היחיד שצריך לתת את כל התכונות שלו, אחרת נוצר בעיה מסויימת)
.userBg {
    background-image: url(https://images7.alphacoders.com/681/681499.jpg);
    background-color: black;
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
}
צבע כתב:
color: #f00;
צבע רקע:
background: rgba(132, 157, 253, 0.68);
בורדר (מסגרת): (px- קובע את הגודל, solid- קובע את סוג הקו [קו מקווקו, קו שלם] solid זה קו שלם, והאחרון זה הצבע של המסגרת)
border: 2px solid #f00;
מסגרת צללית: (px הראשון (0)- מיקום המסגרת (x כמו במערכת צירים), px שני (0)- y (כמו במערכת צירים), px שלישי- כמה שהמסגרת מטושטשת כזו, px רביעי- הגודל של פיזור המסגרת)
box-shadow: 0 0 3px 3.4px #d70000;
ישנם עוד המון המון תכונות, ואותם תוכלו ללמוד לבד, תכנסו לפרופילים של אחרים תראו תכונות מיוחדות שהם עשו כמו תמונות עגולות וכל הדברים האלה, תבדקו את האלמנטים האלו כמו שלימדתי אתכם, ותשחקו עם התכונות שאתם רואים עד שתמצאו את מה שאתם מחפשים. באמת לא מסובך, במיוחד שהרבה מהתכונות הן בעלות שמות הגיוניים, צריך אנגלית פשוטה מאוד כדי להבין את משמעות התכונות.
הנה דוגמה של רשימת תכונות שאני יכול לגלות מדף של אדם אחר:
ספויילר אחרון החביב
xi7h1ym.png
כפי שאתם רואים, בסרגל הזה שלו יש תכונות צביעת רקע (background) לצבע שחור (שאגב, שכחתי לציין, אבל את קוד הצבע המדויק כולל שקיפות אפשר לבדוק על ידי לחיצה על הריבוע הקטן שלפני הrgba שמופיע בתמונה בשחור. ייפתח לכם כלי לבחירה מדויקת של צבע. אני מאמין שתסתדרו), יש לו תכונת עיגול קצוות (border-radius) מכוונת ל-12px (אתם מוזמנים לשחק עם זה ולראות איך זה משתנה ככל שאתם מוסיפים או מפחיתים px ולהתאים את זה לפרופיל שלכם כרצונכם), ותכונה של צל תיבה (box-shadow) שהוא ניצל אותה כדי לעשות "זוהר" בצבע תכלת מסביב לאלמנט.
מבינים? ככה תוכלו לראות אפקטים עיצוביים שונים וליישם אותם בנתיבים שתמצאו ובקודים שתכתבו בפרופיל שלכם!^^

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

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

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

שאלות, מענות, טענות ועוד, אתם יכולים לשאול כאן.
בהצלחה!^^

ותודה רבה ל- @Otoshigami על העזרה הגדולה שהוא עבר לי על כל המדריך!^^

Otoshigami

09/11/2017

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

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

KaTeX

09/11/2017

תע"ה

ScaBieS

09/11/2017

וואו איזו השקעה, תודה על הפרסום :hugging:

zaza~

09/11/2017

וואו

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

UVERworld

09/11/2017

אחלה מדריך, ממליץ על להחליף אותו עם המדריך של שלמה בנעוצים~

~MiYo_Chan~

09/11/2017

כל הכבודדד ממש אלוף! באמת כל הכבוד על ההשקעה אני בטוחה שזה יעזור להמון אנשים!^^

Akagami no Shimon

09/11/2017

רעיון מצוין, כל הכבוד על ההשקעה נתנאל!

cN3rd

09/11/2017

צוטט: 『 』

אחלה מדריך, ממליץ על להחליף אותו עם המדריך של שלמה בנעוצים~

לא להחליף, להוסיף. :P

ושאפו על המדריך.

EviMan10

09/11/2017

תודה על המדריך הוא מאוד עזר לי

Silence

11/11/2017

תודה רבה, עזר לי להשלמת הפרופיל. ^^

Ousama AsherM

11/11/2017

תודה רבהההה!!

 

Naruto Uzumaki

11/11/2017

תודההה אני מקוה מאוד שאני יצליח להבין כי קצת התקשתי

jemes

12/11/2017

עכשיו זה נשמע הרבה יותר הגיוני :expressionless:

MISTER X D

12/11/2017

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

 

 

Knightmare

12/11/2017

צוטט: mister x

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

 

 

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

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

MISTER X D

12/11/2017

כן עשיתי את זה תוך כדי....

 

aviel4455_draw

13/11/2017

אני לא מבין כלום

DavDav

14/12/2017

עכשיו סוף סוף אני מבין את השפה הזאת תודה תודה ועדו פעם תודה:v::v::ok_hand:

LOL'

17/12/2017

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

userBg {
    background:sad_jaina_by_puddingpack-d9bo94j
}

עשיתי שלח וזה כתב לי שונה בהצלחה אבל התמונת רקע לא השתנתה 

MeDuzA

17/12/2017

-