אפקט תמונות מסקרן וממכר – ב 3 שורות קוד

[רבקי]

זה נשמע רעיון פגז! רק לא הבנתי את התהליך…

אשמח שתשלחי לי

[טליה שוורץ]

היי רבקי, אהבתי את הרעיון👍 (וגם את הפרסומת הסמויה 😉 …) מוזמנת להעלות קובץ עם הקוד!

[אביגיל איתן]

הי רבקי יקרה, איזה כיף לראות אותך כאן!!!

רק שתדעו שיש לרבקי קורסים מהממים בכל תחומי התכנות, CSS, הנפשות ועוד בדיגיטל, קורסים שווים!!

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

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

[אביגיל איתן]

משום מה הקוד לא מתקבל בוורדפרס….

[רבקי צולק]

איזה חמודות ומשתתפות אתן!

רבקי –

מצרפת את הקוד כאן בהודעה

הוא מצריך הבנה בסיסית ב HTML/CSS

טליה –

כיף שאהבת!

חחח לא התכוונתי שזו תהיה פרסומת סמויה.

אני כותבת הרבה פעמים חומרים,

כל פעם על תמונות מזדמנות

זה בדיוק מה שהיה לי זמין…

בכל מקרה –

החומר עצמו זו הפרסומת הכי טובה בשבילי

כי היא בדיוק ממחיש את תהליך העבודה אצלי.

אביגיל – ד”ש 🙂

רוצה לשתף איך בדיוק שילבת בוורדפרס?

אבדוק בשמחה למה לא עבד לך.

מצ”ב קובץ עם הקוד שהדגמתי כאן

image_effects.html 2 KB HTML - Click toצפיה

• העתקת קישור להורדה

div { width: 180px; display: inline-block; margin: 20px; box-shadow: #eeeeee 5px 3px 9px; padding: 10px; text-align: -webkit-center; border-radius: 20px; } img { max-width: 100%; } .grayscale { -webkit-filter: grayscale(100%); filter: grayscale(100%); } .blur { -webkit-filter: blur(5px); filter: blur(5px); } .sepia { filter: sepia(100%); } .opacity { filter: opacity(50%); } .invert { filter: invert(100%); } .saturate { filter: saturate(7); } img:hover { filter: none; } <title>אפקטי CSS על תמונות</title> <h1>אפקטי CSS על תמונות</h1> <div> <h2>גווני שחור לבן</h2> <img decoding="async" src="https://appupgo.co.il/wp-content/uploads/2019/08/appupgo-logo.jpg" class="grayscale" /> </div> <div> <h2>גווני שחור לבן</h2> <img decoding="async" src="https://appupgo.co.il/wp-content/uploads/2019/08/appupgo-logo.jpg" class="blur" /> </div> <div> <h2>ספיה</h2> <img decoding="async" src="https://appupgo.co.il/wp-content/uploads/2019/08/appupgo-logo.jpg" class="sepia" /> </div> <div> <h2>שקיפות</h2> <img decoding="async" src="https://appupgo.co.il/wp-content/uploads/2019/08/appupgo-logo.jpg" class="opacity" /> </div> <div> <h2>נגטיב</h2> <img decoding="async" src="https://appupgo.co.il/wp-content/uploads/2019/08/appupgo-logo.jpg" class="invert" /> </div> <div> <h2>חידוד צבעים</h2> <img decoding="async" src="https://appupgo.co.il/wp-content/uploads/2019/08/appupgo-logo.jpg" class="saturate" /> </div>

Expand

[רבקי צולק]

דרך אגב –

מה שהבאתי כאן זה משהו בסיסי,

יותר לעיקרון.

בפועל אפשר כמובן להגדיר ב CSS שהשינוי יתבצע באופן הדרגתי (הנפשה)

ועוד דיוקים.

רציתי להדגיש כאן את אפשרויות המשחק עם התמונות

[אביגיל איתן]

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

CSS.jpg 21 KB קובץ תמונה - Click toצפיה

• העתקת קישור להורדה

[רבקי צולק]

איפה שמת את הקוד הזה?

באלמנטור->מתקדם?

[אביגיל איתן]

כן, באלמנטור מתקדם – הוספת קוד CSS

[רבקי צולק]

מעולה.

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

באלמנטור, כשאת רוצה להגדיר CSS רק לאלמנט הזה –

את רושמת selector

לכן הקוד שלך אמור להיות רשום ככה:

selector img {

filter: grayscale(100%);

}

selector img:hover {

filter: none;

}

התבלבל פה קצת הימין/שמאל

אז הנה צילום מסך של הקוד: