Boussole Style - Sprite: flexible background-image

J'essaie d'utiliser la fonction Sprite de Compass pour une info-bulle simple.Boussole Style - Sprite: flexible background-image

La chose que je veux créer est:

Le code html:

<h2>*BUG* Sprite Tooltip with Compass</h2><br /><br /> 
     <div id="tooltip_test"> 
      <div class="tooltip-Tooltip_up"></div> 
      <div class="tooltip-Tooltip_bg">asdsad<br /></div> 
      <div class="tooltip-Tooltip_down"></div> 
     </div> 
     <h2>Sprite Tooltip with Compass &customBG</h2><br /><br /> 
     <div id="tooltip_test"> 
      <div class="tooltip-Tooltip_up"></div> 
      <div class="custombg">asdsad</div> 
      <div class="tooltip-Tooltip_down"></div> 
     </div>

Pour la première info-bulle, j'utilise la classe bg générée par la boussole.

Pour la deuxième info-bulle, j'utilise une classe bg personnalisée (pour vous montrer ce que je veux)

Le sprite généré est:

(la première ligne de pixel est le Background- image, puis l'en-tête et pied de page)

ma question est:

est-e Avons-nous la possibilité de répéter la zone bg de l'image-objet (générée par la boussole) afin d'avoir une hauteur flexible de l'info-bulle?

Le code de ma classe générée manuellement est:

.custombg { 
     background: url('images/tooltip/Tooltip_bg.png'); 
     height: 100px; 
     width: 258px; 
    }

Merci pour votre aide!

Source

2011-09-14 M00ly

Une solution CSS seule: http: //-css astuces.com/examples/ShapesOfCSS/# talkbubble – feeela

Merci pour le lien css seulement :) Mais je voudrais vraiment utiliser le truc sprite à cause du support IE – M00ly

À partir de Compass version0.12, la répétition d'une partie de l'image-objet est possible, mais la répétition ne fonctionne que sur l'axe des x. Parce que la partie centrale de votre bulle de citation est juste une couleur plate, vous pouvez le styler avec css et utiliser votre sprite existant pour les parties supérieure et inférieure de la bulle de citation.

Il existe plusieurs façons de faire cela en utilisant css3 pur, cependant si vous voulez utiliser les images pour que cela fonctionne dans les anciennes versions d'IE, vous pouvez utiliser des pseudo-éléments avant et après sur un seul élément html.

Try this ...

En utilisant cette structure de fichier:

images/ 
    tooltip/ 
    top.png 
    bottom.png 
    tooltip-sfc34d436c9.png <-- Sass will create this file. 
sass/ 
    sprite.sass 
sprite.html 
stylesheets/ 
    sprite.css

Et sprite.html contient ceci:

<!doctype html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <link href="stylesheets/sprite.css" rel="stylesheet" /> 
    </head> 
    <body> 
    <div class="tooltip"> 
     To be, or not to be, that is the question. 
    </div> 
    </body> 
</html>

Et sprite.sass contient ceci:

// Sprite setup 
$tooltip-sprite-dimensions: true 
@import "tooltip/*.png" 

// Tooltip styles 
$tooltip-top-image: "tooltip/top.png" 
$tooltip-top-width: image-width($tooltip-top-image) 
$tooltip-top-height: image-height($tooltip-top-image) 
$tooltip-bottom-image: "tooltip/bottom.png" 
$tooltip-bottom-width: image-width($tooltip-bottom-image) 
$tooltip-bottom-height: image-height($tooltip-bottom-image) 
$tooltip-width: $tooltip-top-width 
$tooltip-h-padding: 10px 
.tooltip 
    position: relative 
    width: $tooltip-width - ($tooltip-h-padding * 2) 
    background: #8aa5bb 
    padding: $tooltip-top-height $tooltip-h-padding $tooltip-bottom-height 
    &:before 
    content: "" 
    position: absolute 
    top: 0 
    left: 0 
    +tooltip-sprite(top) 
    &:after 
    content: "" 
    position: absolute 
    bottom: 0 
    left: ($tooltip-width - $tooltip-bottom-width)/2 
    +tooltip-sprite(bottom)

Et sprite.css rassemble à cette sprite.css:

.tooltip-sprite, .tooltip:before, .tooltip:after { 
    background: url('../images/tooltip-sfc34d436c9.png') no-repeat; 
} 
.tooltip { 
    position: relative; 
    width: 232px; 
    background: #8aa5bb; 
    padding: 15px 10px 13px; 
} 
.tooltip:before { 
    content: ""; 
    position: absolute; 
    top: 0; 
    left: 0; 
    background-position: 0 -13px; 
    height: 15px; 
    width: 252px; 
} 
.tooltip:after { 
    content: ""; 
    position: absolute; 
    bottom: 0; 
    left: -3px; 
    background-position: 0 0; 
    height: 13px; 
    width: 258px; 
}

L'info-bulle fini ressemblera à ceci:

finished tooltip

Source

2012-03-25 01:59:02

Boussole Style - Sprite: flexible background-image

Répondre

Questions connexes