שימוש ב- CSS לעיצוב תמונות אינטרנט

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

HTML5 עוזר לתמונות סגנון

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