שימוש ב- CSS עם תמונות

הגדר את התמונות שלך והשתמש בתמונות בסגנונות

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

שינוי התמונה עצמה

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

• הוסף גבול או קווי מתאר מסביב לתמונות
• הסר את הגבול הצבעוני סביב תמונות מקושרות
• כוונון הרוחב ו / או גובה התמונות
• הוסף צל טיפה
• סובב את התמונה
• שנה את הסגנונות כאשר התמונה מרחפת מעל

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

img
גבול: 1px מוצק שחור;
ריפוד: 5px;
}

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

img> א {
גבול: none;
}

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

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

img
רוחב: 50%;
גובה: אוטומטי;
}

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

בעוד שהתכונות CSS-object ו- object-position אינן נתמכות באופן נרחב עדיין, ישנם תכונות CSS3 אחרות הנתמכות היטב ברוב הדפדפנים המודרניים שבהם תוכל להשתמש כדי לשנות את התמונות שלך. דברים כמו ירידה צללים, פינות מעוגלות, ו transformations כדי לסובב, להטות, או להעביר את כל התמונות שלך לעבוד עכשיו ברוב הדפדפנים המודרניים. לאחר מכן אתה יכול להשתמש במעברי CSS כדי לשנות את התמונות בעת העברת העכבר, או לחיצה עליו, או רק לאחר פרק זמן.

שימוש בתמונות כרקע

CSS עושה את זה קל ליצור רקע מהודר עם התמונות שלך.

ניתן להוסיף רקעים לדף כולו או רק אלמנט מסוים. קל ליצור תמונת רקע בדף עם מאפיין תמונת הרקע:

body {
background-image: url (background.jpg);
}

לשנות את בורר הגוף אלמנט מסוים בדף כדי לשים את הרקע על יסוד אחד בלבד.

עוד דבר מהנה שאתה יכול לעשות עם תמונות היא ליצור תמונת רקע כי לא לגלול עם שאר הדף - כמו סימן מים. אתה פשוט להשתמש בסגנון רקע הקובץ המצורף: קבוע; יחד עם תמונת הרקע שלך. אפשרויות אחרות עבור הרקע שלך כוללים הפיכתם אריח רק אופקית או אנכית באמצעות המאפיין לחזור על הרקע.

כתוב רקע לחזור: repeat-x; כדי לרענן את התמונה אופקית ואת הרקע לחזור: לחזור- y; כדי אריח אנכית. ותוכל למקם את תמונת הרקע שלך עם המאפיין מיקום הרקע.

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

HTML5 מסייע תמונות סגנון

יש להציב את אלמנט FIGURE ב- HTML5 סביב כל תמונה העומדת בפני עצמה בתוך המסמך. אחת הדרכים לחשוב על זה היא אם התמונה יכולה להופיע בנספח, אז זה צריך להיות בתוך אלמנט FIGURE. לאחר מכן תוכל להשתמש באלמנט זה וברכיב FIGCAPTION כדי להוסיף סגנונות לתמונות שלך.