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

מאפיין זה מעוגל הגבול אינו נתמך על ידי IE. הצג הדגמה

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

דוגמה:

# 1 שלב Css מבנה

תחילה אנו יוצרים קוד פשוט Css

 ; margin : 0 ; } body { font : 100 % normal Arial, Helvetica, sans-serif ; } * (Padding: 0; margin: 0;) הגוף (font: 100% Arial רגיל, Helvetica, sans-serif;) 
 width : 280px ; height : 150px ; background-image : url ( land .jpg ) ; background-position : top ; -moz-border-radius : 10px ; -webkit-border-radius : 10px ; border : 10px solid #ccc ; font : 13px normal Arial, Helvetica, sans-serif ; line-height : 18px ; float :left ; margin : 0 10px 10px 0 ; } . rollover_img (width: 280px; גובה: 150px; background-image: url (הארץ. jpg); background-position: Top;-moz-border-radius: 10px;-webkit-border-radius: 10px; הגבול: 10px מוצק # CCC; font: 13px Arial רגיל, Helvetica, sans-serif; קו גובה: 18px; float: left; margin: 0 10px 10px 0;) 
  color : #fff ; width : 280px ; height : 150px ; display : block ; text-decoration : none ; } . rollover_img a (color: # fff; רוחב: 280px, גובה: 150px; display: block; text-decoration: none;) 
  { background : # 000 ; opacity: . 60 ; filter :alpha ( opacity= 60 ) ; } . rollover_img a: hover (background: # 000; אטימות:. 60; מסנן: (עמעום אלפא = 60);) 
 display : none ; width : 280px ; padding : 5px ; } . rollover_img טווח (display: none; רוחב: 280px; padding: 5px;) 
  span { display : block ; } . rollover_img: hover span (display: block;) 

# 2 שלב Html מבנה

עכשיו אנחנו פשוט ליצור קוד HTML

 > <a title = "Ace Infoway India" href = "http://blog.aceinfowayindia.com" > <span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. בכיתה <div "rollover_img" => הכותרת <a "Ace Infoway href = India" = "http://blog.aceinfowayindia.com"> <span> Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Condimentum Sed.  בשנת volutpat.  Elit Vestibulum.  Aenean vitae enim eget bibendum tellus pellentesque.  Sed ב דוגמה בהערכה טקסט, Lorem ipsum צער לשבת amet, consectetur adipiscing elit. </ Span> </ a> </ div> 

הצג הדגמה

Follow us on Twitter, או להירשם ל גן העדן מפתחים + RSS Feed עבור הדרכות פיתוח האינטרנט הטוב ביותר באינטרנט.

מתויק תחת: Css, הדרכות על ידי Admin