דף הבית » ערכת כלים » 10 CSS ספריות עבור תמונה טובה יותר

    10 CSS ספריות עבור תמונה טובה יותר

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

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

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

    תמונה רחפת אפקטים (16 אפקטים)

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

    תמונה כיתוב אנימציה אנימציה (4 אפקטים)

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

    iHover (35 אפקטים)

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

    העבר את העכבר מעל התמונה (44 אפקטים)

    ספריה זו מכילה 44 אפקטים שנעשו עם CSS טהור. חלק מן ההשפעות כוללות fades, דוחף, שקופיות, צירי, מגלה, מתקרב, blurs, flips, קפלים ו תריסים, לכיוונים שונים. יש גרסה מורחבת של 216 אפקטים שניתן לקנות ב 14 €.

    הרעלת אפקטים רעיונות (30 אפקטים)

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

    העבר את CSS (108 אפקטים)

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

    אנימטיות (100 + אפקטים)

    קיימים יותר מ -100 הנפשות של העברת תמונות ללחצנים, שכבות על, פרטים, כיתובים, תמונות וכפתורי מדיה חברתית. כל האפקטים הם מופעל על ידי CSS3.

    הכיתוב מרחף אפקט (7 אפקטים)

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

    תמונת (15 אפקטים)

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

    כיוון מודעת תלת מימדית

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

    אנימציה אנימציה

    הנה גבול לרחף אנימציה בהשראת UNIQLO. בעת אירוע מעבר, הגבול של התמונה יהפוך להנפשה.

    אריחים עם אנימציה לרחף

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

    SVG קליפ נתיב ריחוף אפקט

    צילומי רנטגן מדהימים באפקט קרני רנטגן מרחף על ידי SVG קליפ-נתיב ו CSS מעברים. עובד מצוין ב- Chrome, Opera ו- Safari.