דיונים - הייטק |

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

Web Development

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

פורסם ע"י רבקי צולק חברה on 04/05/2021 ב7:06 pm

שלום לכולן 🙂

נראה שיש פה קהילה לגמרי איכותית.

רציתי לשתף אתכן במשהו שאהבתי –

אפקטים שונים ש“יסתירו” לנו את התמונה:

הצגת התמונה בגווני שחור, הצגת התמונה מעומעמת, ועוד….

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

מה שייתן אפקט של סקרנות.

כל זה רק ע”י קוד CSS!

נתחיל?

נתחיל!

זו התמונה המקורית:

תראו מה עשיתי ממנה 🙂

אפקט שחור לבן

קוד ה CSS הבא מציג את התמונה בגווני שחור לבן:

ככה התמונה נראית אחרי שהוספתי את קוד ה CSS:

בגלל שאני רוצה שבמעבר עכבר התמונה תוצג בצבעים המקוריים שלה

(סיכמנו שזה כל הקטע, אפקט הסקרנות) –

אני מוסיפה את קוד ה CSS הבא (שמבטל את הפילטר במעבר עכבר):

אפקט עמעום

כדי להציג את התמונה מעומעמת, אני מוסיפה את קוד ה CSS הבא:

ככה נראית התמונה שלי אחרי הוספת קוד ה CSS:

ספיה

קוד ה CSS הבא מציג לי את התמונה בגווני ספיה:

וזו התוצאה:

הקוד הבא מחדד את הצבעים:

וזו התוצאה:

הקוד הזה מציג את התמונה בנגטיב:

וזו התוצאה:

מי שרוצה לקבל את הקובץ עם הקוד שלי, בכיף! אפשר במייל חוזר.

קלי קלות, וממש משדרג.

זהירות – ממכר!!

רבקי צולק הגיבה לפני 3 שנים, 7 חודשים 4 חברות · 10 תגובות
10 תגובות

רבקי
גרפיקה
חברה
04/05/2021 ב7:30 pm

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

אשמח שתשלחי לי
טליה שוורץ
מנהלת קדם
מנהלת
04/05/2021 ב11:35 pm

היי רבקי, אהבתי את הרעיון👍 (וגם את הפרסומת הסמויה 😉 …) מוזמנת להעלות קובץ עם הקוד!
אביגיל איתן
הוראה רכזות וחינוך
חברה
05/05/2021 ב9:05 am

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

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

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

תודה על הקוד, אנסה ליישם אותו באתר שלי, נשמע רעיון מהמם!!
אביגיל איתן
הוראה רכזות וחינוך
חברה
05/05/2021 ב9:27 am

משום מה הקוד לא מתקבל בוורדפרס….
רבקי צולק
חברה
חברה
05/05/2021 ב10:09 am
איזה חמודות ומשתתפות אתן!

רבקי –

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

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

טליה –

כיף שאהבת!

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

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

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

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

בכל מקרה –

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

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

אביגיל – ד”ש 🙂

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

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

מצ”ב קובץ עם הקוד שהדגמתי כאן
image_effects.html 2 KB HTML - Click toצפיה

Options

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

<!doctype html> 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
רבקי צולק
חברה
חברה
05/05/2021 ב10:36 am

דרך אגב –

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

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

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

ועוד דיוקים.

רציתי להדגיש כאן את אפשרויות המשחק עם התמונות
אביגיל איתן
הוראה רכזות וחינוך
חברה
05/05/2021 ב11:55 am
עדיין לא הולך רבקי, מצרפת לך כאן תמונת מסך
CSS.jpg 21 KB קובץ תמונה - Click toצפיה

Options

העתקת קישור להורדה
- רבקי צולק
  חברה
  חברה
  05/05/2021 ב7:09 pm
  
  איפה שמת את הקוד הזה?
  
  באלמנטור->מתקדם?
אביגיל איתן
הוראה רכזות וחינוך
חברה
05/05/2021 ב7:20 pm

כן, באלמנטור מתקדם – הוספת קוד CSS
- רבקי צולק
  חברה
  חברה
  05/05/2021 ב7:37 pm
  
  מעולה.
  
  אז ככה – קודם כל אני מתארת לעצמי שזה על אלמנט תמונה, או על אלמנט שיש בו תמונה.
  
  באלמנטור, כשאת רוצה להגדיר CSS רק לאלמנט הזה –
  
  את רושמת selector
  
  לכן הקוד שלך אמור להיות רשום ככה:
  
  selector img {
  
  filter: grayscale(100%);
  
  }
  
  selector img:hover {
  
  filter: none;
  
  }
  
  התבלבל פה קצת הימין/שמאל
  
  אז הנה צילום מסך של הקוד: