Hachures de titre en CSS (essai)

by ydelmas

HTML

<h2 class="bg_img"><span>Exemple de titre - image</span></h2>
<p>Résultat&nbsp;: ok sur un écran normal, pas bon en haute densité ou à l'impression</p>
<h2 class="bg_rlg"><span>Exemple de titre - rep. lin. gradient</span></h2>
<p>Résultat&nbsp;: avec une largeur de √2 ou 1/√2, le résultat est désastreux à l'écran, sur tout navigateur. Correct à l'impression.</p>
<h2 class="bg_trn"><span>Exemple de titre - transformation CSS</span></h2>
<p>Résultat&nbsp;: Ok (impression et écran).</p>

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700);
*,*:before {-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
p { font-family: sans-serif; }
h2 {
    margin-top: 35px;
    font-size: 37px;
    line-height: 17px;
    height: 17px;
}
h2 span {
    font-family: 'Open Sans Condensed', sans-serif;
    font-size: 22px;
    text-transform: uppercase;
    padding-right: 10px;
    background: #FFF;
    display: inline-block;
    height: 17px;
    vertical-align: bottom;
}
h2.bg_img {
    background: url("http://sha.univ-poitiers.fr/masterweb/v2/wp-content/themes/master-web-edito/images/hachures-brn.png") repeat-x;
}
h2.bg_rlg {
    background-image: -webkit-repeating-linear-gradient(-45deg, transparent, transparent 3px, rgba(164, 138, 119, 0.95) 3px, rgba(164, 138, 119, 0.95) 4.414px, transparent 4.414px, transparent 5px);
    background-image: repeating-linear-gradient(-45deg, transparent, transparent 3px, rgba(164, 138, 119, 0.95) 3px, rgba(164, 138, 119, 0.95) 4.414px, transparent 4.414px, transparent 5px);
}
h2.bg_trn {
    position: relative;
    overflow: hidden;
}
h2.bg_trn:before {
    content: '\A0';
    display: block;
    position: absolute; bottom: 0; left:0;
    width: 100%;
    height: 1000px;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAICAIAAAHJlJL6AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QUNCSMuNVCz3QAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAAzSURBVAjXdYvBCQAgDMSiS3eHzuGe8VORCr6OHAkrA5WVoaJOoPAQAEMF6uhz/bfq2o83J2AkiFODxxwAAAAASUVORK5CYII=);
    background-repeat: repeat;
    z-index: 0;
    transform: rotate(45deg);
    transform-origin: 0% 100%;
}
h2.bg_trn span {
    position: absolute; top: 0; left: 0;
    z-index: 1;
}