Content property – CSS3

2 בינואר 2013

תגיות: , , , ,
2 תגובות

המאפיין content ב – css3 מאפשר לכתוב טקסטים בעזרת css.

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

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

המאפיין content יכול לבוא רק עם selctor של after או before, ה – selctor-ים הללו, מאפשרים לעצב מה יהיה לפני או אחרי האלמט, לדוגמא:

Code Snippet
div:before {
    content: 'shlomo';
    background-color: silver;
    color: white;
    padding: 2px;
    letter-spacing: 4px;
    font-size: 20px;
    border-radius: 5px;
}

הקוד הנל יגרום שלפני כל div במסך יופיע הטקסט הבא:

image

כמובן שניתן לכתוב after, והטקסט יופיע אחרי ה – div.

דוגמא מועילה יותר תהיה זאת:

בהנחה שיש לנו את קוד ה – html הבא:

Code Snippet
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>

ואז נכתוב את ה – css הבא:

Code Snippet
li
{
    width: 130px;
}
        
li:hover
{
    cursor: pointer;
    outline: 1px solid black;
}
        
li:hover:after
{
    content: ' (drag me)';
    color: #b4b4b4;
}

במעבר על כל אחד מה – li נקבל את התצוגה הבאה:

image

 

כדי לקבל אפקט כזה לא בעזרת content נצטרך לעבוד (יחסית) קשה ב – JS.

 

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

בנוסף אפשר לתת לו ערך של attribute כלשהו של האלמנט שהוא מסתכל עליו, (זאת הדרך היחידה לשנות מ – JS את התוכן של content)

לדוגמא:

Code Snippet

<progress max="100" value="0"></progress>


<input type="range" value="0" max="100" onchange="document.querySelector('progress').value=this.value" />

Code Snippet
progress:before
{
    content: attr(value);
    color: white;
    margin-left: 70px;
}

 

זה יתן את התוצאה הבאה:

image

 

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

הוסף תגובה
facebook linkedin twitter email

להגיב על שמואל לבטל

האימייל לא יוצג באתר. שדות החובה מסומנים *

2 תגובות

  1. דוד2 בינואר 2013 ב 5:47

    ממש יפה, תודה!

    הגב
  2. שמואל3 בינואר 2013 ב 11:13

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

    הגב