בעת שיפור תמונות אנו יכולים לבחור לעשות זאת עם Photoshop ואז לעלות אותם בדף האינטרנט או שנוכל גם לבחור באפשרות B: עשה זאת בטכניקות HTML, CSS ו- Javascript הזמינות.
לאחר הקפיצה ישנן טכניקות רבות לשיפור תמונות, כמעט כולן נעשות עם jQuery כבסיס הראשי או עם CSS3 מנצל את הסטנדרטים העדכניים ביותר באינטרנט, אם כי אני מזכיר לך שבמקרה זה אנו מאבדים תאימות עם כמה דפדפנים.
הם באנגלית אבל הם נתפסים לטוס, הבטיחו :)
מקור | 1WD
תמונה מעוגלת עם CSQ3
למד לעטוף תגית טווח סביב אלמנט התמונה כדי להשיג תמונות מעוגלות שיוצגו ישירות בכל הדפדפנים המודרניים.
2.
רקעים וגבולות מרובים עם CSS 2.1
למד כיצד להשתמש באלמנטים פסאודו CSS 2.1 כדי לספק עד 3 ציורי רקע, 2 תמונות מצגת בגודל קבוע ומספר גבולות מורכבים עבור אלמנט HTML יחיד.
3.
טיפ מהיר: מספר גבולות עם CSS פשוט
שידור מסך מהיר המציג כיצד להשיג גבולות מרובים באמצעות CSS פשוט כך מוסיף עומק רב יותר לעיצובים שלך. גרסה הרבה יותר פשוטה של ההדרכה הקודמת.
4.
גבולות מרובים על אלמנטים בגודל דינמי עם CSS2
גרסה שלישית של ניקולה גלאגר מראה לך מה לעשות אם אינך בגודל האלמנט.
5.
תיהנו עם גבולות - משופעים, לחוצים ועוד!
למד כיצד להשיג אפקט לחוץ עם CSS וכמה טריקים פשוטים בסגנון הגבול כדי להשיג אפקטים שונים.
6.
פולארואידים עם CSS3
למד כיצד להשתמש בכמה CSS2 ו CSS3 מדהימים כדי להפוך את רשימת התמונות הלא צנועה אחרת לקבוצה מלאה של תמונות פולארויד.
7.
תמונת רקע מושלמת לדף מלא
למדו כיצד להוסיף תמונת רקע עם CSS הממלאת עמוד שלם בתמונה, ללא שטח לבן, מגדילה תמונה לפי הצורך, אינה גורמת לפסי גלילה ועוד הרבה יותר.
8.
אפקטים של צל ותמונה של רחף של CSS3
חקור דרך חדשה להוסיף אפקטים של צל טיפה רק על ידי עריכת גיליון סגנונות.
9.
אפקט רחף מפואר של תמונה ממוזערת w / jQuery
השג אפקט מסודר בסגנון פלאש עם CSS ו- jQuery.
10.
כיצד ליצור אפקט גלגול תמונה פשוט CSS
במדריך זה תלמד כיצד ליצור אפקט פשוט של גלגול תמונות CSS עם עיצוב בסיסי של HTML ו- CSS.
11.
הדרכה לצוף
הדרכה לצוף מעבירה את היסודות של אלמנטים צפים כגון תמונות, כובעי ירידה, כפתורים הבאים ואחורה, גלריות תמונות, רשימות מוטבעות ופריסות מרובות עמודות. בדוק 4 מדריכים המוקדשים לצפות תמונה.
12.
השפעות סנוזי רחף באמצעות CSS
במדריך זה תעבור על יצירת טכניקות מרחפות מתקדמות וגמישות תוך שימוש במאפייני CSS2.1.
13.
גלגולים מהירים בלי
טען מראש
בעת שימוש בגלגולי תמונות CSS, יש לטעון שתיים, שלוש או יותר תמונות (ולעתים קרובות לטעון אותן מראש לקבלת התוצאות הטובות ביותר). למד כיצד להכניס את כל המדינות לתמונה אחת מבצעת שינויים דינמיים מהר יותר ואינה דורשת טעינה מוקדמת.
14.
פינות מעוגלות jQuery
הרבה אפקטים של jQuery לפינות מעוגלות ודפוסים רבים יותר.
15.
תיאור הכלים הקלה ביותר ותצוגה מקדימה של תמונות באמצעות jQuery
ראה 3 דוגמאות לשימוש בתסריט תצוגה מקדימה של jQuery לגלגול. ניתן ליישם סקריפט פשוט זה למטרות מגוונות.
16.
מוחלף - רקע מסך מלא /
מצגת
תוסף jQuery
Superzided הוא תוסף jQuery שמשנה את גודל התמונות למילוי הדפדפן תוך שמירה על יחס ממדי התמונה ומחזיר תמונות / רקעים באמצעות מצגת עם מעברים וטעינה מוקדמת.
17.
כיסוי PNG
האם נתקלת פעם בבעיית יצירת אתר עם תמונות שניתנו על ידי הלקוח, רק כדי לגלות מאוחר יותר לאחר שהם מעדכנים את הצילום שלהם המראה והתחושה המקוריים לא נשמרים? פתרון זה כולל יצירת כיסוי PNG שקוף אשר יכול לשמש כמסיכה / מסגרת סביב JPEG או GIF רגיל. בדרך זו, ניתן להגדיר התקנת CMS טיפוסית כך שמשתמשים יוכלו להעלות תמונות מבלי לדאוג להשתמש בתוכנית גרפית כלשהי כדי להחיל פילטרים.
18.
BeZoom
משקל קל
JQuery
תוסף זום
BeZoom היא אלטרנטיבה פשוטה וקלה עבור JQZoom. זה קל יותר וקל יותר לשימוש.
19.
שימוש ב- jQuery לאנימציות של תמונת רקע
שחקו עם jQuery ושינו את המיקום של תמונת הרקע כדי ליצור את סוג האפקט שאתם מחפשים. יש מאמר חדש שעונה על "איך אני מטפל במצבים פעילים?" - טיפול במצב פעיל לרקעים מונפשים של jQuery.
20.
5 דרכים לתבל את התמונות שלך באמצעות CSS
להלן מספר טריקים פשוטים כדי להוסיף קצת טעם לתמונות התפלות האופייניות שלך. השימוש בפוטושופ לעיצוב כל תמונה יכול להיות מייגע וקשה לתחזוקה בטווח הארוך. טכניקות CSS הבאות יעזרו לך להקל על הכאב.
21.
איך ל:
ניתן לשנות את הגודל
תמונת רקע
למד כיצד להגדיר תמונת רקע ניתנת לגודל באמצעות CSS. יש לך 3 אפשרויות לבחירה.
22.
סגנון קישורי התמונה שלך
להודיע למשתמשים כי החלק המסוים באתר שלנו נועד ללחוץ עליו מושג בצורה הטובה ביותר באמצעות אפקט העכבר מעל. אותם קטעים "הניתנים ללחיצה" כוללים בהחלט תמונות תוכן. קישור תמונה הוא סקריפט המאפשר לך להחיל סטיילינג נוסף על קישורי התמונה שלך.
23.
תמונות רקע מרובות עם CSS
לעיתים, הגיוני יותר להשתמש בתמונות רקע מאשר להכניס אותן ישירות לדף. ובעוד שכל אלמנט - כמו תג הגוף שלך - יכול להכיל רק תמונת רקע אחת, אך ניתן להחיל אותו על כמה אלמנטים.
24.
גבולות תמונה עם CSS
מדריך קל מאוד שמראה כיצד להוסיף גבול מוצק לתמונות באמצעות CSS.
25.
ספריטים CSS מבלי להשתמש בתמונות רקע
למד כיצד ליישם אפקט רחף ללא ידע רב אודות ספריטים CSS.
