אנשים רבים משתמשים ב- CSS כדי להתאים טקסט, לשנות את הגופן, את הצבע, את הגודל ועוד. אבל דבר אחד שאנשים רבים שוכחים לעתים קרובות הוא שאתה יכול להשתמש ב- CSS עם תמונות גם כן.
שינוי התמונה עצמה
CSS מאפשר לך לשנות את אופן הצגת התמונה בדף. זה יכול להיות שימושי מאוד לשמירת הדפים שלך עקביים. על ידי הגדרת סגנונות על כל התמונות, אתה יוצר מראה רגיל עבור התמונות שלך. חלק מהדברים שאתה יכול לעשות:
- הוסף גבול או קווי מתאר מסביב לתמונות
- הסר את הגבול הצבעוני סביב תמונות מקושרות
- כוונון הרוחב ו / או גובה התמונות
- הוסף צל טיפה
- סובב את התמונה
- שנה את הסגנונות כאשר התמונה מרחפת מעל
לתת את התמונה הגבול הוא מקום נהדר להתחיל. אבל כדאי לשקול יותר מאשר רק את הגבול - לחשוב על כל קצה התמונה שלך ולהתאים את השוליים ואת הריפוד גם כן. תמונה עם גבול שחור דק נראית יפה, אך הוספת ריפוד כלשהו בין הגבול לתמונה יכולה להיראות טוב יותר.
img גבול: 1px מוצק שחור; ריפוד: 5px;}
זה רעיון טוב תמיד לקשר תמונות שאינם דקורטיביים, במידת האפשר. אבל כאשר אתה עושה, זכור כי רוב הדפדפנים להוסיף גבול צבעוני סביב התמונה. גם אם אתה משתמש בקוד לעיל כדי לשנות את הגבול, הקישור יהיה לעקוף את זה אלא אם תסיר או לשנות את הגבול על הקישור גם כן. כדי לעשות זאת עליך להשתמש בכללי CSS של ילדים כדי להסיר או לשנות את הגבול סביב תמונות מקושרות:
img> א { גבול: none;}
ניתן גם להשתמש ב- CSS כדי לשנות או להגדיר את הגובה והרוחב של התמונות. אמנם זה לא רעיון טוב להשתמש בדפדפן כדי להתאים את גודל התמונה בגלל מהירויות ההורדה, הם מקבלים הרבה יותר טוב ב שינוי גודל התמונות, כך שהם עדיין נראים טוב. ועם CSS אתה יכול להגדיר את התמונות שלך לכל להיות רוחב רגיל או גובה או אפילו להגדיר את הממדים להיות יחסית למכולה.
זכור, כאשר תשנה את גודל התמונות, לקבלת התוצאות הטובות ביותר, עליך לשנות גודל של מאפיין אחד בלבד - הגובה או הרוחב. זה יהיה enusre כי התמונה שומרת על יחס הממדים שלה, ולכן לא נראה מוזר. הגדר את הערך האחר ל אוטומטי או להשאיר את זה כדי לספר את הדפדפן כדי לשמור על יחס הממדים עקבית.
img רוחב: 50%; גובה: אוטומטי;}
CSS3 מציעה פתרון לבעיה זו עם המאפיינים החדשים בכושר האובייקט ו מיקום אובייקט. עם מאפיינים אלה תוכל להגדיר את גובה התמונה המדויקת ואת רוחב ואיך יחס גובה צריך להיות מטופל. זה עלול ליצור אפקטים letterboxing סביב התמונות שלך או חיתוך כדי לקבל את התמונה כדי להתאים בגודל הנדרש.
בעוד CSS3 בכושר האובייקט ו מיקום אובייקט מאפיינים אינם נתמכים באופן נרחב עדיין, ישנם מאפיינים אחרים CSS3 כי הם נתמכים היטב ברוב הדפדפנים המודרניים שבהם ניתן להשתמש כדי לשנות את התמונות שלך. דברים כמו ירידה צללים, פינות מעוגלות, ו transformations כדי לסובב, להטות, או להעביר את כל התמונות שלך לעבוד עכשיו ברוב הדפדפנים המודרניים. לאחר מכן אתה יכול להשתמש במעברי CSS כדי לשנות את התמונות בעת העברת העכבר, או לחיצה עליו, או רק לאחר פרק זמן.
שימוש בתמונות כרקע
CSS עושה את זה קל ליצור רקע מהודר עם התמונות שלך. ניתן להוסיף רקעים לדף כולו או רק אלמנט מסוים. זה קל ליצור תמונת רקע בדף עם תמונת רקע נכס:
body { background-image: url (background.jpg);}
לשנות את ה הגוף בחר ל אלמנט מסוים בדף כדי לשים את הרקע על אלמנט אחד בלבד.
עוד דבר מהנה שאתה יכול לעשות עם תמונות היא ליצור תמונת רקע כי לא לגלול עם שאר הדף - כמו סימן מים. אתה פשוט להשתמש בסגנון background-attachment: fixed; יחד עם תמונת הרקע שלך. אפשרויות אחרות עבור הרקע שלך כוללים הפיכתם אריח רק אופקית או אנכית באמצעות רקע לחזור נכס. כתוב background-repeat: repeat-x; כדי לרענן את התמונה אופקית ו background-repeat: repeat-y; כדי אריח אנכית. ואתה יכול למקם את תמונת הרקע שלך עם מיקום הרקע נכס.
ו CSS3 מוסיף סגנונות נוספים עבור הרקע שלך גם כן. אתה יכול למתוח את התמונות שלך כדי להתאים לכל גודל רקע או להגדיר את תמונת הרקע כדי לשנות את גודל החלון. באפשרותך לשנות את המיקום ולאחר מכן קליפ תמונת הרקע. אבל אחד הדברים הטובים ביותר על CSS3 היא שאתה יכול עכשיו שכבת תמונות רקע מרובים כדי ליצור אפקטים מורכבים עוד יותר.
HTML5 מסייע תמונות סגנון
ה דמות אלמנט HTML5 צריך להיות ממוקם סביב כל התמונות שיכולות לעמוד לבד בתוך המסמך. אחת הדרכים לחשוב על זה היא אם התמונה יכולה להופיע בנספח, אז זה צריך להיות בתוך דמות אלמנט. לאחר מכן תוכל להשתמש באלמנט זה וב- FIGCAPTION אלמנט להוסיף סגנונות לתמונות שלך.
