Ftit jiem ilu kien I-implimentazzjoni Effett Image Qlib fil-websajt I'm jaħdmu fuq. Ħafna mill-websajts portafoll qed jużaw effett qlib image. F'dan i tutorja se jitgħallmu kif għandek toħloq sempliċi effett css qlib image. I am jużaw biss waħda grafika sempliċi. Il-bqija huwa bażiku grafika CSS, ma HTML code sempliċi.

Din il-proprjetà tal-fruntiera Rounded mhijiex sostnuta minn IE. View Demo

jgħidilna ħsibijiet tiegħek? Jekk jinstab xi tutorials oħra li inti trid taqsamhom magħna, tħossok liberu li jgħidilna minn twaqqa fil-kumment.

Eżempju:

# 1 Pass css Struttura

ewwel noħolqu kodiċi sempliċi css

  ; margin : 0 ; } * (Padding: 0; margin: 0;)
 % normal Arial, Helvetica, sans-serif ; } korp (font: 100% Arial normali, 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 (wisa ': 280px; għoli: 150px;-isfond image: url (' l-art. jpg);-isfond pożizzjoni: top;-moz transkonfinali-raġġ: 10px;-webkit transkonfinali-raġġ: 10px; fruntiera: 10px solidi # CCC; font: 13px Arial normali, Helvetica, sans-Serif;-linja tal-għoli: 18px; float: left; marġni: 0 10px 10px 0;) 
  color : #fff ; width : 280px ; height : 150px ; display : block ; text-decoration : none ; } . rollover_img a (color: # F; wisa ': 280px; għoli: 150px; display: block;-test decoration: none;) 
  { background : # 000 ; opacity: . 60 ; filter :alpha ( opacity= 60 ) ; } . rollover_img a: imbagħad jerġgħu (background: # 000; opaċità:. 60; filtru: (alpha opaċità = 60);) 
 display : none ; width : 280px ; padding : 5px ; } . rollover_img medda (display: none; wisa ': 280px; padding: 5px;) 
  span { display : block ; } . rollover_img span imbagħad jerġgħu a: (display: block;) 

# 2 Pass Html Struttura

issa noħolqu kodiċi sempliċi Html

 > <a title = "Ace Infoway India" href = "http://blog.aceinfowayindia.com" > <span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. klassi <div = "rollover_img"> titolu <a = "Ace Infoway href India" = "http://blog.aceinfowayindia.com"> <span> dolor Ipsum Lorem ipoġġu, consectetur elit amet adipiscing.  Zat condimentum.  Fil volutpat.  Elit vestibulum.  Aenean curriculum enim eget bibendum Tellus pellentesque.  Zat fil Eżempju est Test, dolor Ipsum Lorem ipoġġu amet, consectetur elit adipiscing. </ Span> </ a> </ div> 

View Demo

Follow us fuq Twitter, jew tabbona għall-Paradise Developers + RSS Feed għall-tutorials aqwa web iżvilupp fuq il-web.

Iffajljati taħt: css, tutorials by admin