הדרכה ליצירת אפקט תלת מימד על הטקסט (טעימה קטנה מטכנולוגית CSS)
שלום,
הפעם אני רוצה לתת הדרכה קצרה - איך לייצר אפקט תלת מימד בטקסטים של הכותרות?
התוצאה יוצאת ככה (אם תמשיכו עד הסוף, יש סוג נוסף של אפקט תלת מימד בסוף המייל):
 
 
כדי לייצר את האפקט - 
לא נתקין תוסף חדש. תוסף נוסף מוסיף הכבדה נוספת לאתר, והרבה פעמים גם מאט אותו.
אנחנו נעשה משהו הרבה יותר יעיל - 
נוסיף קוד CSS!
 
ההדרכה הזו מתאימה לכל אתרי האינטרנט, לא דווקא לאתרי וורדפרס.
בכל אתר יש את המקום שבו ניתן להוסיף קוד CSS.
אני אדגים על אתר וורדפרס, באתרים אחרים מוסיפים את הקוד במיקום של קוד ה CSS שלהם.
 
בפאנל ניהול של וורדפרס נכנס ל"עיצוב" -> "התאמה אישית":
 
נחפש את תפריט ה "CSS מותאם" (אצלי זה נמצא בתוך "General Settings"):
 
נקבל חלון שלתוכו ניתן להכניס קוד CSS:
 
 לתוך החלון הזה נקליד את קוד ה CSS הבא:
h1 {
 text-shadow: 6px 6px lightgray,
   5px 5px lightgray, 5.5px 5.5px lightgray, 5.25px 5.25px lightgray, 5.75px 5.75px lightgray,
   4px 4px lightgray, 4.5px 4.5px lightgray, 4.25px 4.25px lightgray, 4.75px 4.75px lightgray,
   3px 3px lightgray, 3.5px 3.5px lightgray, 3.25px 3.25px lightgray, 3.75px 3.75px lightgray,
   2px 2px lightgray, 2.5px 2.5px lightgray, 2.25px 2.25px lightgray, 2.75px 2.75px lightgray,
   1px 1px lightgray, 1.5px 1.5px lightgray, 1.25px 1.25px lightgray, 1.75px 1.75px lightgray,
   0.5px 0.5px lightgray, 0.25px 0.25px lightgray, 0.75px 0.75px lightgray;
}
 ככה זה נראה אצלי אחרי שהוספתי את קוד ה CSS:
 
נלחץ על  "פרסום".
זהו :) אפשר לצפות בהנאה בתוצאה.
כותרות הדפים באתר מוצגים עם אפקט התלת מימד.
 
אם נרצה להחליט על הגוונים שיוצגו באפקט -
ניתן  להחליף את הגוונים שרשומים בקוד, בגוונים הרצויים:
 
 
אפשר לדגום מתוכנות גרפיות שונות (כמו למשל פוטושופ, צייר) את קוד הגוון הרצוי, ולהחליף בגוון שאני רשמתי בקוד.
במקרה ותדגמו צבע מתוכנה גרפית שם הצבע יהיה # ואח"כ קוד הצבע.
לדוגמה: 
#eeeeee 
 
הוספנו אפקט תלת מימד לכותרות שבאתר.
מוצלח :) אפשר להסתפק בזה.
אבל אני רוצה לתת הדרכה של סוג נוסף של אפקט תלת מימד!
האפקט הבא הוא אפקט עם 3 רמות הצללה, נראה כאילו הכותרת מוארת ע"י 3 פרוז'קטורים שונים...
מה שנותן לטקסט מראה "צף". 
ככה נראה האפקט:
 
וזה הקוד שלו:
h1 {
     text-shadow: 0px 15px 5px rgba(0,0,0,0.1), 10px 20px 5px rgba(0,0,0,0.05), -10px 20px 5px rgba(0,0,0,0.05);
 }
 
 
 
 טעמתם עכשיו טעימה קטנה (ושווה) מטכנולוגיית CSS .
 
אפשר ממש בקלות  להירשם לקורס הזה, ולהיות מאסטרים בתחום!
 
קורס CSS 
 מחיר: 350 ש"ח
בסיום הקורס תדעו לעצב את מראה האתר באופן אישי בעזרת CSS + HTML, ללא המוגבלויות של הכלים האוטומטיים של תבניות וורדפרס ודומיו. 
 
נ.ב.
אם כבר אנחנו בקשר, כדאי לראות שיתוף שווה מאחת העבודות שלי בתקופה האחרונה.
יצרתי אתר אינטרנט עבור משרד יהלומנים http://livingstonegems.com/. 
המשרד הוא וותיק, אבל פותח ליין חדש של יהלומי מעבדה - ובשביל זה הקמתי להם את האתר.
האתר הזה הוא לא סתם אתר תדמית, יש בו מערכת ניהול מלאי משוכללת.
המלאי מתעדכן באופן אוטומטי, ומראה לכל לקוח מחירים מותאמים לו אישית!
לא דומה מחיר עבור מוכר תכשיטים (לקוח זהב..) למחיר עבור קונה מזדמן :)
 
את האתר עצמו (ודומים לו) תוכלו לבנות בקלות ע"י לימוד קורס וורדפרס (350 ש"ח).
את המערכת המשוכללת שבתוכו - תוכלו ג"כ לבנות, אם תמשיכו ותלמדו את קורסי התכנות :)
 
הנה צילום מסך מ"בתוכו":
 
 
 
קיבלת מייל זה?
רוצה לקבל תכנים נוספים?
מומלץ!! יהיו עוד הרבה תכנים שווים בעז"ה!
שלחו אלי מייל ל [email protected]
עם בקשה להצטרף לרשימת התפוצה.
יהיה לנו מעניין :) 
 
 
נשלח באמצעות smoove פלטפורמת שיווק