במדריך זה אתה תלמד איך ליצור צל על טקסט באתר ובכל מקום שתרצה שיאפשר לך ליצור אפקט מקסימלי באמצעות Css. במיני קורס בניית אתרים שעברתי לא מזמן לא נגעתי בנושא זה וכעת באפשרותך ללמוד משהו קטן אבל אפקטיבי שבהרבה מקרים הגביר את יחס ההמרה באתרים או פרסומות ללא הרבה מאמץ. ליצור צל עבור טקסט באמצעות Css לא כזה סיפור, ויש דיונים רבים באינטרנט בנושא זה, אך כל פתרון הנמצא (רובם) הוא פתרון מסובך שמצריך ידע ב-PHP או שפה אחרת בתכנות אשר הופכים את טקסט לתמונה ואז עושים בו מניפולציות שונות באמצעות קוד מה שמביא תוצאה דומה. עם פקודה אחת, אפשר ליצור את הטקסט עם צל באמצעות Css.
לפני שנגע במדריך איך יוצרים אפקט צל על טקסט באמצעות Css, באפשרותך לצפות בתוצאות בתמונה הבא:
אז איך עושים את זה?
כדי ליצור טקסט עם צל באמצעות Css אנחנו צריכים קודם את קובץ Css או לפחות Inline Style בתוך מסמך Html שלנו.
כל שעליך להוסיף כדי לקבל תוצאה דומה לזה היא פקודה: text-shadow: #666 0 1px 2px;
עליך להוסיף את פקודה זו לאלמנט ספציפי באמצעות קובץ Css בדף Html.
מסמך דוגמה של Html:
[css]
<html>
<head>
<title>i Love Websit.co.il</title>
<link rel='stylesheet' href='style.css' type='text/css' media='screen' />
</head>
<body>
<div class="shadow">This is demo text for shadow</div>
</body>
</html>
</pre></blockquote>
קובץ דוגמה של Css:
<blockquote>
<pre lang="css" line="1">@charset "utf-8";/* CSS Document */
.shadow {
font-family:Arial, Helvetica, sans-serif;
font-size:24px;
font-weight: bold;
text-shadow: #666 0 1px 2px;
}
[/css]
באפשרותך להוריד עכשיו את קובץ Html + Css וליראות איך זה בדיוק נעשה וניראה במחשב שלך.
הורדה:
[adsense]
קובץ להורדה: [download id="42"]
ללמוד Css זה לא כזה קשה כמו שחלקם אולי חושבים. ללמוד Css די פשוט אבל הקושי משתקף בידע ובהכרות פקודות ומניפולציות שונות שדורשת את השפה. אפשר לשלב מספר רב של קומבינציות של פקודות כדי להגיע לתוצאות מדהימות כולל שילוב Css בשפות תכנות אחרות. הרבה מוסדות השכלה שמלדמים Css אכן מלמדים שיעור אחד בלבד וזה אינו מספיק בכלל להתמאה והבנה מלאה. כדי ללמוד Css החלטתי לעשות כמה שיעורים בוידאו שבקרוב ברצוני לפרסם באתר. אבל עד אז אתה יכול ללמוד Css ושיטות שונות במדיריכים ומאמרים שכתבתי, כמו: Css Reset.
בכל מקרה אני ירחיב בנושא Css בהמשך, אבל ללמוד Css יכול להיות משתלם וכדאי בהרבה מקרים. לא צריך להיות מתכנת או לדעת שפות תכנות שונות בשביל ללמוד Css. בהצלחה