אני לא אוהב למסגר את התמונות או את העמודים. תבנית Fresh הייתה כולה מלאה מסגרות והחלטתי להסיר את כולם (ועכשיו אני לא מוצא את הפוסט, יופי).
אבל את התמונות שאני מכין ו/או עורך בPhotoshop אני גם ככה ממסגר, לא במסגרת שחורה אלא בשני צבעים. זה נותן יופי לתמונה לפי דעתי.
כדי לא להשתמש בPhotoshop ובכל זאת לקבל מסגרת בשני צבעים צריכים פשוט לשחק עם הCss, חיפוש קטן בגוגל מעלה את התוצאה הבאה. Tobias Bleckert בתגובות נתן לי את הפתרון המושלם.
למי שרוצה מסגרת כפולה מוזמן להכניס את זה לCss:
צבע צהוב חרדל
img, a img{}
outline: 2px solid #e5e5e5;
border: 1px solid #747474;
כדי שגם באקספלורר זה יעבוד, הוסיפו:
כחול אפור
<!--[if lte IE 7]>
img, a img{
border:2px solid #e5e5e5; !important;
padding:1px; !important;
background:#747474; !important;
}
<![endif]–>
צבע צהוב חרדל
<!--[if lte IE 6]>;
img, a img{
border:2px solid #e5e5e5; !important;
padding:1px; !important;
background:#747474; !important;
}
<![endif]–>
אתם יכולים לשנות את הצבעים ולקבל מסגרת כפולה בצבעים אחרים, כל אחד לפי טעמו וההתאמה לבלוג שלו.
תהנו.
9 תגובות ל”Css: מסגרת בשני צבעים לתמונה“ (קפוץ לרשום)
#1
רמי
נכתב בתאריך: יום שבת, 01 במרץ 2008 בשעה 6:51 am
קצת בעייתי הקוד הזה,
שים לב שאתה מגדיר background, וזה יוצר בעיה לתמונות שקופות.
אומנם ניתן להגדי שה - background יהיה זהה לצבע הרקע, אבל אישית הייתי מחפש פתרון גלובלי יותר.
#2
השדון האגדי
נכתב בתאריך: יום שבת, 01 במרץ 2008 בשעה 4:19 pm
זה הדבר היחיד שזה יוצר, אז אתה פשוט משתדל לא לעשות תמונות שקופות. מלבד זאת, אתה יכול לקבוע class שרק בו תופיע המסגרת ואז כל התמונות השקופות שהם לא בפוסט למשל אינם מושפעים מזה.
#3
Tomer Cohen
נכתב בתאריך: יום שבת, 01 במרץ 2008 בשעה 7:49 pm
עצם העובדה שהקוד שלך כולל מעקפים בשביל לתמוך בדפדפן כזה או אחר זה כבר מבחינתי דבר מיותר. אנחנו לא צריכים שאנשים יוסיפו טלאים לרשת.
אגב, CSS3 אמור לכלול תכונה כזו, אם כי יעבור זמן מה עד שתהיה תמיכה מלאה ב־CSS3.
#4
השדון האגדי
נכתב בתאריך: יום שבת, 01 במרץ 2008 בשעה 9:16 pm
אני לא אשם שמיקרוסופט מפתחת דפדפנים מנוגדים לתקנים, ואם אני רוצה לתת תמיכה מלאה אין מה לעשות, חייב להוסיף לזה את הקוד של הדפדנים האחרים.
#5
רמי
נכתב בתאריך: יום ראשון, 02 במרץ 2008 בשעה 9:43 pm
אני מסכים עם תומר, עדיף קוד ללא תלאים ומעקפים.
ואם אני לא טועה, בזמנו ראיתי קוד שעושה את אותה הפעולה בדרך קצת אחרת וללא תלאים.
אני אנסה לאתר אותו ולשלוח לך קישור.
#6
רואה שחורות
נכתב בתאריך: יום שלישי, 04 במרץ 2008 בשעה 6:39 pm
טריק חביב. כולנו תקווה שאחרי שיצא אקספלורר 8 כבר לא נצטרך את המעקפים האלה.
#7
השדון האגדי
נכתב בתאריך: יום שישי, 07 במרץ 2008 בשעה 6:15 pm
רואה שחורות, כולנו אכן תקווה שמיקרוסופט תתמוך בתקנים כפי שהבטיחה בדפדפן אספלורר 8. כרגע, בגרסת הביטא הראשונה זה לא קורה.
#8
רמי
נכתב בתאריך: יום רביעי, 19 במרץ 2008 בשעה 1:59 pm
או קיי,
כמו שהבטחתי, הנה הקישור לתוסף פשוט יחסית שעושה את העבודה - imagecaptioneasy.
בהתחלה לא רציתי להתקין תוסף מיוחד רק בשביל מסגרת תמונה, אבל הפונקציונליות שלו פשוט מדהימה. תחפוף בקוד, אתה תבין על מה אני מדבר.
יישמתי את הפתרון באתר "הידען", אתה מוזמן לראות את התוצאות.
#9
השדון האגדי
נכתב בתאריך: יום חמישי, 20 במרץ 2008 בשעה 12:46 pm
הוא נחמד, אבל הוא לא נותן דאבל רקע (בהשתקפות) כפי שעושה הקוד שהבאתי. בכל מקרה, תודה :)