De Wiki @ Brest
Ligne 4 : | Ligne 4 : | ||
background-position:top; | background-position:top; | ||
background-repeat:repeat-x; | background-repeat:repeat-x; | ||
+ | } | ||
+ | |||
+ | /* Image cropping */ | ||
+ | .img-crop, | ||
+ | .img-crop img{ | ||
+ | width: 150px; /* gotta be responsive these days */ | ||
+ | } | ||
+ | .img-crop{ | ||
+ | border-color: 1px dotted #ededed; /* some background color for short images */ | ||
+ | overflow: hidden; | ||
+ | width:160px; | ||
+ | height:120px; | ||
+ | margin:4px; | ||
+ | padding:0; | ||
+ | float:left; | ||
+ | /* remove white-space for inline-block elements */ | ||
+ | letter-spacing: -0.31em; /* webkit */ | ||
+ | *letter-spacing: normal; /* reset IE < 8 */ | ||
+ | word-spacing: -0.43em; /* IE < 8 && gecko */ | ||
+ | } | ||
+ | .img-crop:before, | ||
+ | .img-crop img{ | ||
+ | /* vertically center the image */ | ||
+ | display: inline-block; | ||
+ | vertical-align: middle; | ||
+ | horizontal-align: middle; | ||
+ | } | ||
+ | .img-crop:before{ | ||
+ | /* pseudo element to vertically align image to */ | ||
+ | content: ""; | ||
+ | |||
+ | /* Magic Number */ | ||
+ | /* Set this to your desired height(to width) ratio */ | ||
+ | padding-top: 75%; /* % of original image width */ | ||
+ | } | ||
+ | .img-crop img{ | ||
+ | /* removes(sorta) image from the flow */ | ||
+ | padding-left: 100%; | ||
+ | margin: -999em -100%; | ||
} | } |
Version du 11 juillet 2013 à 13:44
/* Le CSS placé ici sera appliqué à tous les habillages. */ .degrade{ background-image:url(http://upload.wikimedia.org/wikipedia/commons/f/fb/Gradient_43px.png); background-position:top; background-repeat:repeat-x; } /* Image cropping */ .img-crop, .img-crop img{ width: 150px; /* gotta be responsive these days */ } .img-crop{ border-color: 1px dotted #ededed; /* some background color for short images */ overflow: hidden; width:160px; height:120px; margin:4px; padding:0; float:left; /* remove white-space for inline-block elements */ letter-spacing: -0.31em; /* webkit */ *letter-spacing: normal; /* reset IE < 8 */ word-spacing: -0.43em; /* IE < 8 && gecko */ } .img-crop:before, .img-crop img{ /* vertically center the image */ display: inline-block; vertical-align: middle; horizontal-align: middle; } .img-crop:before{ /* pseudo element to vertically align image to */ content: ""; /* Magic Number */ /* Set this to your desired height(to width) ratio */ padding-top: 75%; /* % of original image width */ } .img-crop img{ /* removes(sorta) image from the flow */ padding-left: 100%; margin: -999em -100%; }